<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="too.js"></script>
<script type="text/javascript" src="jquery.min (1).js"></script>
<!--小的div60*60-->
<style type="text/css">
body{
text-align: center;
}
/*显示框*/
#box{
width:600px ;
height: 300px;
/*居中 ，让div自动适用left和right的大小*/
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;
background-color: yellow;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="but1">添加</button>
<button id="but2">闪烁</button>
</body>
<script type="text/javascript">
//添加
$('#but1').on('click',function(evt){
//创建新标签
var newdivNode = $('<div class="newdiv"></div>').text(newdivNode)
//添加新标签
newdivNode.css('background-color',randomColor())
$('#box').prepend(newdivNode)
// $('.newdiv').attr()
if($('.newdiv').length>50){
$('#box .newdiv:last').remove()
}
})
//闪烁
$('#but2').on('click',function(){
// allNewDiv = $('.newdiv')
if($('#but2').text()=='闪烁'){
$('#but2').text('暂停')
timmer = setInterval(function(){
//获取小的div
divNodes = $('#box .newdiv')
//遍历
for(i=0;i<divNodes.length;i++){
$(divNodes[i]).css('background-color', randomColor())
}
},100)
}else{
$('#but2').text('闪烁')
//暂停功能
clearInterval(timmer)
}
})
</script>
</html>
image.png
网友评论