笔试题--js为各div加不同背景颜色

最新推荐文章于 2022-11-12 14:51:27 发布

原创最新推荐文章于 2022-11-12 14:51:27 发布 · 814 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

vue爬坑之旅专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用jQuery为页面上的多个DIV元素随机分配背景颜色的方法。通过数学运算生成随机RGB值，使得每个DIV拥有独特的颜色，增强了网页的视觉效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('div').each(function () {
                var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
                $(this).css("background-color", hue);
            });
        });
    </script>
</head>
<body>
<div class='A kk'>2....</div>
<div class='A B'>1....</div>
<div class='A C'>7....</div>
<div class='A B C'>4....</div>
<div class='B C'>8....</div>
<div class='A C'>9....</div>
<div class='A B'>0....</div>
<div class='C B'>0....</div>
<div class='B'>2....</div>
<div class='C'>3....</div>
<div class='A'>5....</div>
</body>
</html>

效果图：