随机生成元素的背景颜色

abstract：随机颜色值主要是用到 rgb(255,255,255)命令设置网页颜色rgb的三个参数利用js的生成随机数命令生成，Math.floot(Math.random()*256)Math.random()*256 需要生成的随机数数量(包含小数点)Math.floot() 取整数部分舍弃小数点后面的所有<!DOCTYPE html> <html lang=&q

随机颜色值主要是用到 rgb(255,255,255)命令设置网页颜色

rgb的三个参数利用js的生成随机数命令生成，Math.floot(Math.random()*256)

Math.random()*256 需要生成的随机数数量(包含小数点)

Math.floot() 取整数部分舍弃小数点后面的所有

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>获取随机颜色</title>
    <style>
 a{
            float: left;
 margin: 10px;
 width: 100px;
 height: 100px;
 line-height: 100px;
 text-align: center;
 background-color: #ffc09f;
 border-radius: 50px;
 text-decoration: none;
 font-size: 2rem;
 }
    </style>
</head>
<body>

<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<script type="text/javascript" src="jquery.js"></script>
<script>


 $(document).ready(function () {

        // js方式设置打开网页随机颜色
 var aa = document.getElementsByTagName('a');
 Object.keys(aa).forEach(function (value) {
            aa[value].style.backgroundColor = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
 });

 $('a').hover(function () {
            // 获取当前标签的背景颜色
 var $bg = $(this).css('backgroundColor');
 $(this).css('box-shadow','0px 0px 20px '+$bg);
 $(this).css('border-radius','20px ');
 },function () {
            $(this).css('box-shadow','none');
 $(this).css('border-radius','50px ');
 });

 // 每次点击a标签 标签文本内容自动更改
 $('a').click(function () {
            this.innerHTML = Math.floor(Math.random()*256);
 this.style.backgroundColor = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
 })
    })

</script>

</body>
</html>

Correcting teacher：查无此人Correction time：2019-05-21 09:14:45
Teacher's summary：完成的不错。你加载了jq，可以全部用jq的语句来写代码。继续加油。

随机生成元素的背景颜色

Popular Entries