摘要：一、主要功能1、按下“刷新”按鈕，矩形產(chǎn)生隨機(jī)顏色和隨機(jī)數(shù)2、移動(dòng)到矩形上，變成圓形二、功能代碼<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隨機(jī)顏色和隨機(jī)數(shù)功能的實(shí)現(xiàn)<
一、主要功能
1、按下“刷新”按鈕，矩形產(chǎn)生隨機(jī)顏色和隨機(jī)數(shù)
2、移動(dòng)到矩形上，變成圓形
二、功能代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隨機(jī)顏色和隨機(jī)數(shù)功能的實(shí)現(xiàn)</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設(shè)置隨機(jī)顏色和數(shù)字值
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實(shí)現(xiàn)動(dòng)畫效果
$(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>
批改老師：韋小寶批改時(shí)間：2019-01-30 13:27:01
老師總結(jié)：不錯(cuò)不錯(cuò) 寫的很棒 這種小案例可以幫助我們快速的掌握很多知識(shí)點(diǎn) 沒事的時(shí)候要多練習(xí)哦