<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#top{
margin: auto;
width: 800px;
height: 400px;
/*background-color: blue;*/
margin-top: 40px;
border: 1px solid black;
}
button{
position: absolute;
border: 0;
background-color: red;
font-size: 30px;
outline: none;
}
#btn1{
/*position: absolute;*/
left: 40%;
/*left: 600px;*/
margin-top: 20px;
}
#btn2{
/*position: absolute;*/
right: 40%;
/*right: 600px;*/
margin-top: 20px;
z-index: 1;
}
#btn3{
/*position: absolute;*/
right: 40%;
/*right: 600px;*/
margin-top: 20px;
z-index: 0;
}
</style>
</head>
<body>
<div id="top"></div>
<button id="btn1">添加</button>
<button id="btn2">闪烁</button>
<button id="btn3">暂停</button>
</body>
</html>
<script type="text/javascript">
//============产生随机颜色============
function randomColor(){
var num1 = parseInt(Math.random()*255)
var num2 = parseInt(Math.random()*255)
var num3 = parseInt(Math.random()*255)
return 'rgb('+num1+','+num2+','+num3+')'
}
//产生节点
var topNode = document.getElementById('top')
var div1Node = document.createElement('div')
var btn1Node = document.getElementById('btn1')
var btn2Node = document.getElementById('btn2')
var btn3Node = document.getElementById('btn3')
//给小模块添加属性
div1Node.style.width = '100px'
div1Node.style.height = '100px'
div1Node.style.float = 'left'
//添加
num = 0
btn1Node.onclick = function(){
num++
//给小模块随机颜色
div1Node.style.backgroundColor = randomColor()
var divNode = div1Node.cloneNode()
topNode.insertBefore(divNode,topNode.firstElementChild)
if(num>32){
topNode.lastElementChild.remove()
}
}
//开始闪烁
function ddf(){
var divNodeArray = topNode.children
console.log(typeof(divNodeArray),divNodeArray)
for(var i=0;i<divNodeArray.length;i++)
//for(index in divNodeArray)
{
var divNode2 = divNodeArray[i]
console.log(divNode2,typeof(divNode2))
//var divNode2 = divNodeArray[index]
// console.log(divNode2)
divNode2.style.backgroundColor = randomColor()
}
}
//定义一个变量保存点击闪烁次数,初始值为1
var count = 1
//定义一个isGo变量
var isGo = false
//点击自动闪烁
btn2Node.onclick = function(){
count++
isGo = true
if(isGo){
interval1 = window.setInterval(ddf,1000)
}
//显示暂停
btn3Node.style.zIndex = count
}
//暂停
btn3Node.onclick = function(){
count++
window.clearInterval(interval1)
btn2Node.style.zIndex = count
}
// //暂停
// var btn3Node = document.createElement('button')
// btn3Node.style.position = 'absolute'
// btn3Node.style.right ='40%'
// btn3Node.style.marginTop = '20px'
//
</script>
网友评论