<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="too.js">
</script>
<style type="text/css">
body{
text-align: center;
}
/*小盒子是60*60*/
#box{
width: 600px;
height: 300px;
/*居中*/
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}
/*按鈕*/
button{
width: 60px;
height: 30px;
color: white;
background-color: red;
border: 0;
}
button:focus{
outline: 0;
}
.newDiv{
width: 60px;
height: 60px;
float: left;
}
</style>
</head>
<body>
<div id="box">
</div>
<button onclick="addAction()">添加</button>
<button onclick="blink()" id="blink">閃爍</button>
</body>
<script type="text/javascript">
boxNode = document.getElementById('box')
//添加
function addAction(){
//創(chuàng)建節(jié)點(diǎn)
newDivNode = document.createElement('div')
newDivNode.className = 'newDiv'
newDivNode.style.backgroundColor = randomColor()
//添加節(jié)點(diǎn)
boxNode.insertBefore(newDivNode,boxNode.firstElementChild)
if(boxNode.children.length>50){
//刪除最后一個(gè)
boxNode.lastElementChild.remove()
}
}
//閃爍
function blink(){
//拿到按鈕
blikBtnNode = document.getElementById('blink')
//拿到所有的子標(biāo)簽
allSmallDiv = boxNode.children
if(blikBtnNode.innerText=='閃爍'){
blikBtnNode.innerText = '暫停'
//閃爍功能
timmer = setInterval(function(){
for(i=0;i<allSmallDiv.length;i++){
smallDivNode = allSmallDiv[i]
smallDivNode.style.backgroundColor = randomColor()
}
},10)
}else{
blikBtnNode.innerText = '閃爍'
//暫停功能
clearInterval(timmer)
}
}
</script>
</html>
js文件
//隨機(jī)顏色
function randomColor(){
var r = parseInt(Math.random()*255)
var g = parseInt(Math.random()*255)
var b = parseInt(Math.random()*255)
//實(shí)現(xiàn)拼接rgb（44号阿，4，5）
return 'rgb('+r+','+g+','+b+')'
}
image.png
