摘要：随机颜色值 主要是用到 rgb(255,255,255)命令设置网页颜色rgb的三个参数利用js的生成随机数命令生成，Math.floot(Math.random()*256)Math.random()*256 需要生成的随机数数量(包含小数点)Math.floot() 取整数部分 舍弃小数点后面的所有<!DOCTYPE html> <html lang=&q
随机颜色值 主要是用到 rgb(255,255,255)命令设置网页颜色
rgb的三个参数利用js的生成随机数命令生成，Math.floot(Math.random()*256)
Math.random()*256 需要生成的随机数数量(包含小数点)
Math.floot() 取整数部分 舍弃小数点后面的所有
<!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方式设置打开网页随机颜色
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标签 标签文本内容自动更改
$('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
老师总结：完成的不错。你加载了jq，可以全部用jq的语句来写代码。继续加油。
