<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: none;
padding: none;
border: none;
}
#box{
width: 500px;
height: 250px;
margin: auto;
/* background-color: skyblue;*/
border: 1px solid lightblue;
}
#buttonBox button{
width: 70px;
height: 35px;
margin-top: 10px;
background-color: orangered;
color: white;
font-size: 16px;
outline: 0;
}
#box div{
width: 50px;
height: 50px;
float: left;
</style>
<script type="text/javascript">
window.onload = function(){
function randomColor(){
var col1 = parseInt(Math.random()*255);
var col2 = parseInt(Math.random()*255);
var col3 = parseInt(Math.random()*255);
return 'rgb('+col1+','+col2+','+col3+')' ;
}
function createMosaicNode(){
var mosaicNode = document.createElement('div');
mosaicNode.style.backgroundColor = randomColor();
mosaicNode.className = 'm1';
var boxNode = document.getElementById('box');
boxNode.appendChild(mosaicNode);
var boxNodeArray = document.getElementsByClassName('m1');
if(boxNodeArray.length>50){
boxNode.removeChild(boxNode.lastChild);
}
}
var num = false;
var time = null;
function flashingNode(){
var btn2Node = document.getElementById('btn2');
btn2Node.innerText = '暂停';
interval1 = window.setInterval(function(){
var boxNodeArray = document.getElementsByClassName('m1');
while(true){
for(i in boxNodeArray){
var mosaicNode = boxNodeArray[i];
mosaicNode.style.backgroundColor = randomColor();
}
}
},200)
}
function stopNode(){
if(time!=null){
document.getElementById('btn2').innerHTML = '闪烁';
window.clearInterval();
}
}
function flashOrStop(){
if(num){
flashingNode();
}else{
stopNode();
num = !num;
}
}
var btn1Node = document.getElementById('btn1');
btn1Node.onclick = createMosaicNode;
var btn2Node = document.getElementById('btn2');
btn2Node.onclick = flashingNode;
}
</script>
</head>
<body style="text-align: center;">
<div id="box" class="mosaic"></div>
<div id="buttonBox">
<button id="btn1">添加</button>
<button id="btn2">闪烁</button>
</div>
</body>
</html>
网友评论