<!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>
day 作业 - 神奇马赛克
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- “ 拍高清视频的摄影师 一日三餐都加了鸡腿 打马赛克的后期却在吃土 ” 两河流域——传说中的“伊甸园”,早在几千年...
- 平时无论是在刷着微博还是在浏览文章,都可以看到许多未成年的图片被打上了马赛克,除非是争得对方的允许才不会打马赛克,...