作业晚上晚上就搞定了,想今天练习一下,基本思路是页面包含2个按钮 5个div与分别对应的checkbox复选框 刷新页面5个div会获得随机色 点击换色按钮,倒计时过后被选中的div会变色 另一个按钮是全选按钮 控制全选与取消
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全选 随机色 倒计时</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 15px;
}
.box1{
width: 1300px;
margin: 0 auto;
}
.box2{
width: 1300px;
height: 50px;
text-align: center;
padding-top: 5px;
line-height: 50px;
}
.button1{
width: 90px;
height: 50px;
border-radius: 20%;
font-weight: bold;
}
span{
color: red;
font-size: 30px;
}
.box3{
width: 180px;
height: 400px;
float: left;
margin-top: 90px;
margin-left: 30px;
position: relative;
/* border-radius: 55%; */
}
.clear{
clear: both;
}
input{
width: 30px;
height: 30px;
position: absolute;
top: -40px;
left: 75px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<button type="button" name="button" class="button1"onclick="timeOut()">倒计时换色</button>
<button type="button" name="button" class="button1" onclick="chAll()">全选/取消</button>
<p>
还有<span>5</span>秒将选中区域换色
</p>
</div>
<div>
<div class="box3">
<input type="checkbox" name="cb" value="">
<div></div>
</div>
<div class="box3">
<input type="checkbox" name="cb" value="">
<div></div>
</div>
<div class="box3">
<input type="checkbox" name="cb" value="">
<div></div>
</div>
<div class="box3">
<input type="checkbox" name="cb" value="">
<div></div>
</div>
<div class="box3">
<input type="checkbox" name="cb" value="">
<div></div>
</div>
<div class="box3">
<input type="checkbox" name="cb" value="">
<div></div>
</div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
// 全选/反选 需改进
function chAll(){
var cheall=document.getElementsByTagName('input');
if(cheall[0].checked)
{
for(var i=0;i<cheall.length;i++)
{
cheall[i].checked=false;
}
}
else
{
for(var i=0;i<cheall.length;i++)
{
cheall[i].checked=true;
}
}
}
//随机色 页面刷新
var winColor=function (){
var box3=document.getElementsByClassName('box3');
for(var i=0;i<box3.length;i++)
{
var bg="#";
var r=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
var g=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
var b=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
bg+=r+g+b;
box3[i].style.background=bg;
}
}
//选择后的变色
var outColor=function (){
var box3=document.getElementsByClassName('box3');
var cheall=document.getElementsByTagName('input');
for(var i=0;i<box3.length;i++)
{
if(cheall[i].checked)
{
var bg="#";
var r=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
var g=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
var b=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
bg+=r+g+b;
box3[i].style.background=bg;
}
}
}
winColor();
//倒计时换色
function timeOut(){
var t=4;
var times=setInterval(function(){
var timecolor=document.getElementsByTagName('span')[0];
if(t>0){
timecolor.innerHTML=t;
t--;
}else{
timecolor.innerHTML=t;
outColor();
clearInterval(times);
}},1000);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:倒计时卡了我整整4个小时,总是在最后结束的时候 每秒变一次颜色,经过西门老师的指点,才明白了原来创建了多个定时器,只停止了一个 其他还是会继续运行,其他的知识点思路就比较清晰了.
课上内容:
1:各行换色 原理在于对行数进行取余遍历 通过判断进行换色
2:全选是对元素的获取,通过循环 .checked=true/false
3:随机数 Math.round(); 括号外可以跟*100 +1来控制随机值的范围
4:随机色通过rgb颜色 获取两位数 分别拼接r g b 了解了为何不直接生成6位数.....
5:日期对象 new Date(); 是一切的前提 分别获取年月日小时分钟秒星期 通过拼接就可以实现显示日期
6:倒计时 setInterval()于clearInterval()练习使用,了解了setInterval()的流程以及坑..... 哈
感谢老师