abstract：<!DOCTYPE html><html><head> <title>獲取隨機(jī)色</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>獲取隨機(jī)色</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
a{ float: left; display: block; margin:50px; width:100px; line-height: 100px; text-align: center; height: 100px; color:#fff;
border-radius: 50px; text-decoration: none;}
</style>
</head>
<body>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<div style="clear:both;"></div>
<button>刷新顏色</button>
<script type="text/javascript">
//單擊按鈕刷新顏色
$(document).on('click','button',function(){
changeColor('a');
})
//改變標(biāo)簽的背景顏色
function changeColor(tag){
var title = document.getElementsByTagName(tag);
for(var i=0;i<title.length;i++){
title[i].style.backgroundColor = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
}
}
$(document).ready(function(){
changeColor('a');
//鼠標(biāo)放上效果
$('a').mouseover(function(){
var bg = $(this).css('backgroundColor');
$(this).css('box-shadow','0px 0px 20px '+ bg);
$(this).css('border-radius','20px');
});
//鼠標(biāo)離開效果
$('a').mouseout(function(){
$(this).css('box-shadow','none');
$(this).css('border-radius','50px');
});
//點(diǎn)擊改變隨機(jī)值
$('a').click(function(){
var num =Math.floor(Math.random()*10000);
$(this).text(num);
});
})
</script>
</body>
</html>
Correcting teacher：查無(wú)此人Correction time：2019-05-06 09:27:25
Teacher's summary：完成的不錯(cuò)。js最重要的就是事件，要好好練習(xí)。繼續(xù)加油。