摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>随机颜色</title> &nbs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>随机颜色</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
a{
height:100px;width:100px;line-height:100px;margin:10px 10px;display:block;float:left;text-decoration:none;font-size:16px;color:#fff;background:#ccc;text-align:center;border-radius:50px;
}
span{font-size:30px;}
</style>
<script type="text/javascript">
var isnum=0//初始化为0
var t = setInterval(function(){//实现数字从0到10的动态增加 利用setInterval()来调用函数
isnum++;
var number = document.getElementById('number');
number.innerText=isnum;
if(isnum==10){
clearInterval(t)//clearInterval结束调用
}
},100)
function rgbcolor(tag){
var len=document.getElementsByTagName(tag).length //取出标签为a的所有长度
for(var i = 0 ; i < len ; i++){//设置颜色值 floor四舍五入,math.random为随机数
document.getElementsByTagName(tag)[i].style.background='rgb('+ Math.floor(Math.random()*256) +','+ Math.floor(Math.random()*256) +','+ Math.floor(Math.random()*256)+')'
}
}
$(document).ready(function(){
rgbcolor('a')//执行函数
$('a').mouseover(function(){
$bg=$(this).css('backgroundColor');//设置变量存储颜色值
$(this).css('box-shadow','0px 0px 20px ' + $bg );
$(this).css('border-radius','20px')
})
$('a').mouseleave(function(){
$(this).css('box-shadow','none');
$(this).css('border-radius','50px')
})
})
</script>
</head>
<body>
<div>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href=""><span id="number"> 0 </span></a><!-- 实现数字动态增加 -->
</div>
</body>
</html>尝试增加了一下数字动态变化的效果。
批改老师：韦小宝批改时间：2018-11-26 16:07:38
老师总结：嗯！很不错！要多多这样的去尝试！好多案例都是这样来的！课后记得多练习哦！
