摘要：隨機顏色值 主要是用到 rgb(255,255,255)命令設(shè)置網(wǎng)頁顏色rgb的三個參數(shù)利用js的生成隨機數(shù)命令生成，Math.floot(Math.random()*256)Math.random()*256 需要生成的隨機數(shù)數(shù)量(包含小數(shù)點)Math.floot() 取整數(shù)部分 舍棄小數(shù)點后面的所有<!DOCTYPE html> <html lang=&q
隨機顏色值 主要是用到 rgb(255,255,255)命令設(shè)置網(wǎng)頁顏色
rgb的三個參數(shù)利用js的生成隨機數(shù)命令生成，Math.floot(Math.random()*256)
Math.random()*256 需要生成的隨機數(shù)數(shù)量(包含小數(shù)點)
Math.floot() 取整數(shù)部分 舍棄小數(shù)點后面的所有
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>獲取隨機顏色</title>
<style>
a{
float: left;
margin: 10px;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #ffc09f;
border-radius: 50px;
text-decoration: none;
font-size: 2rem;
}
</style>
</head>
<body>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function () {
// js方式設(shè)置打開網(wǎng)頁隨機顏色
var aa = document.getElementsByTagName('a');
Object.keys(aa).forEach(function (value) {
aa[value].style.backgroundColor = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
});
$('a').hover(function () {
// 獲取當前標簽的背景顏色
var $bg = $(this).css('backgroundColor');
$(this).css('box-shadow','0px 0px 20px '+$bg);
$(this).css('border-radius','20px ');
},function () {
$(this).css('box-shadow','none');
$(this).css('border-radius','50px ');
});
// 每次點擊a標簽 標簽文本內(nèi)容自動更改
$('a').click(function () {
this.innerHTML = Math.floor(Math.random()*256);
this.style.backgroundColor = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
})
})
</script>
</body>
</html>
批改老師：查無此人批改時間：2019-05-21 09:14:45
老師總結(jié)：完成的不錯。你加載了jq，可以全部用jq的語句來寫代碼。繼續(xù)加油。