#学习笔记#(39)JS随机颜色

来源：互联网发布：乔丹各赛季数据编辑：程序博客网时间：2024/05/29 12:35

Math.random*1000%256

html代码如下

<!DOCTYPE html><html><head><title>随机颜色</title><meta charset="UTF-8" /><link href="randomcolor.css" rel="stylesheet" /></head><body><div class="container" id="boxs"><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div><div class="box">猴年吉祥</div></div><div class="return"><a href="../../coding.html">点我返回</a></div><script src="randomcolor.js"></script></body></html>

JS代码如下

var oBoxs=document.getElementById("boxs").childNodes;function randomColor(){var rgb=Math.floor(Math.random()*1000)%256;return rgb;}var t=null;function changeColor(){clearInterval(t);for(var i=0;i<oBoxs.length;i++){var r=randomColor();var g=randomColor();var b=randomColor();oBoxs[i].style="background-color:rgb("+r+","+g+","+b+")";}t=setInterval("changeColor()",1000);}changeColor();

CSS代码

.container{width:500px;margin:50px auto;padding:0px;}.box{width:100px;height:100px;border:1px solid #ccc;border-radius:50%;float:left;margin:10px;text-align:center;line-height:100px;opacity:0.8;color:#ccc;font-size:12px;cursor:pointer;}.box:hover{opacity:1;animation:changeSize 1s;transition:1s all;box-shadow:0px 0px 20px #ccc,0px 0px 20px #ccc inset;}@keyframes changeSize{0%{transform:scale(1.5);}100%{transform:scale(1);}}.return{bottom:50px;right:50px;position:fixed;width:60px;height:60px;background-color:#ccc;opacity:0.8;color:green;font-size:12px;font-family:微软雅黑;text-align:center;line-height:60px;border-radius:50%;}.return:hover{opacity:1;}a{color:green;text-decoration:none;}

0 0