06- 定时器作业 随机色卡

<!DOCTYPEhtml>

<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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
width: 100%;
border: 3px solid black;
}
#next{
text-align: center;
}
#wrap span{
display: inline-block;
width: 150px;
height: 60px;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div id="next">RGB 按钮：
<button id="run">run</button>
<button id="stop">stop</button>
</div> <br>
<div id="next">十六进制 按钮:
<button id="run1">run</button>
<button id="stop1">stop</button>
</div>
<div id="wrap"></div>

<script>
/*
思路：
1.通过document.createElement创建一个元素节点，就可以出现很多格子
2.设置随机颜色，RGB是0-255范围的，Math.random(）*256可以随机获取0-255的小数,
Math.floor()可以向下取整数，既可以获取1-255的数字，因为随机数取不到1，
0.999*10的时候也是取不到10，所以要加一
3.鼠标点击，触发定时器
*/
var oWrap = document.getElementById('wrap');
var oRun = document.getElementById('run');
var oStop = document.getElementById('stop');
var timer = 0; //存放定时器的序列号

oRun.onclick = function(){
//每次点击都要把上次的定时器清除，防止多次点击造成开启多个定时器，确保只有一个定时器
clearInterval(timer);
timer = setInterval(function(){ //出现盒子,函数执行返回的结果赋给timer
var oSpan = document.createElement('span'); //创建div节点
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var srgb ='rgb('+r+','+g+','+b+')';
oSpan.style.backgroundColor=srgb;
oSpan.innerHTML=srgb;
oWrap.appendChild(oSpan); //把创建的盒子加到wrap标签上
},800)
}
oStop.onclick = function(){
clearInterval(timer) //括号中是函数返回的值，用timer接收
}





//十六进制获取随机色卡
/*
思路：1.步骤几乎和上面一样
2.获取十六进制的数值：Math.random().toString(16)
3.获取出来的支付串要截取：Math.random().toString(16).substr(2,6)
*/
var oWrap = document.getElementById('wrap');
var oRun1 = document.getElementById('run1');
var oStop1 = document.getElementById('stop1');
var timer1 = 0;
oRun1.onclick = function(){
clearInterval(timer1);
timer1 = setInterval(function(){
var oSpan = document.createElement('span');
var num = '#'+Math.random().toString(16).substr(2,6);
oSpan.innerText =num;
oWrap.appendChild(oSpan);
oSpan.style.backgroundColor=num;
},800)
}
oStop1.onclick = function(){
clearInterval(timer1);
}


</script>
</body>
</html>

 

posted @ 2019-07-05 17:20  小小oRa  阅读(419)  评论(0)    收藏  举报