摘要：一、主要功能1、按下“刷新”按钮，矩形产生随机颜色和随机数2、移动到矩形上，变成圆形二、功能代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机颜色和随机数功能的实现<
一、主要功能
1、按下“刷新”按钮，矩形产生随机颜色和随机数
2、移动到矩形上，变成圆形
二、功能代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机颜色和随机数功能的实现</title>
<script src="../jquery-3.3.1.js"></script>
<style>
a{
display: inline-block;
width: 100px;
height: 100px;
margin: 30px;
border: 1px solid #ccc;
text-align: center;
line-height: 100px;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<button>刷新</button>
<script>
//利用js设置随机颜色和数字值
function getRandom(tag){
var len = document.getElementsByTagName(tag).length
for(var i = 0; i < len ;i++){
document.getElementsByTagName(tag)[i].style.backgroundColor=
'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')'
document.getElementsByTagName(tag)[i].innerHTML=Math.floor(Math.random()*100)
}
}
//利用jq实现动画效果
$(function(){
getRandom('a')
$('button').click(function(){
getRandom('a')
})
$('a').hover(function(){
var color = $(this).attr('backgroundColor')
$(this).css({'box-shadow':'0px 0px 20px'+color,'border-radius':'50%'})
},function(){
$(this).css({'box-shadow':'','border-radius':''})
})
})
</script>
</body>
</html>
批改老师：韦小宝批改时间：2019-01-30 13:27:01
老师总结：不错不错 写的很棒 这种小案例可以帮助我们快速的掌握很多知识点 没事的时候要多练习哦
