摘要：这节课最主要的一点就是原生js随机颜色的获取方法:var bgcolor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() *
这节课最主要的一点就是原生js随机颜色的获取方法:
var bgcolor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";然后通过for循环设置所有元素的随机背景色
最后用jq事件改变元素的样式,中间也用到了前面学的圆角和阴影效果.
实例练习:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 614px;
height: 300px;
border: 0px solid green;
margin: 30px auto;
}
span {
transition: 0.3s;
display: inline-block;
width: 200px;
height: 200px;
background: green;
}
button {
font-size: 20px;
display: block;
width: 100px;
height: 50px;
margin: 20px auto;
box-shadow: 8px 8px 15px grey;
}
button:hover {
box-shadow: 3px 3px 10px grey;
}
</style>
</head>
<body>
<script>
window.onload = function () {
var i;
var obtn = document.getElementById("btn");
obtn.onclick = function bg() {
var len = document.getElementsByTagName("span");
for (i = 0; i < len.length; i++) {
var bgcolor = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";
len[i].style.backgroundColor = bgcolor;
}
}
}
$(function () {
$("span").mouseover(function () {
$bg = $(this).css("backgroundColor")
$(this).css("borderRadius", "30%")
$(this).css("box-shadow", "0px 0px 20px " + $bg)
})
$("span").mouseleave(function () {
$bg = $(this).css("backgroundColor")
$(this).css("borderRadius", "0")
$(this).css("box-shadow", "none")
})
}
)
</script>
<div class="box">
<span></span>
<span></span>
<span></span>
<div>
<button id="btn">切换颜色</button>
</div>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-18 18:03:41
老师总结：这样的作业,我喜欢, 图文相配合, 一目了解, js有强大的数学计算能力
