下面是演示没什么闲话很简单的(注意下面的横线的不是代码问题闪烁的太快录制跟不上造成的)
下面是代码(注意需要jquery)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
#lightLeft,#lightCenter,#lightRight{
background: #acaaaf;
width: 120px;
display:block;
float: left;
height: 80px;
/* border:1px solid red; */
}
#lightLeft{
border-radius:60px 0px 0px 60px;
}
#lightRight{
border-radius:0px 60px 60px 0px ;
}
#lightCenter{
width: 40px;
background: #6C6971;
}
button{
/* float: left; */
margin-top:120px;
padding: 10px 30px;
}
</style>
</head>
<body>
<span id="lightLeft" ></span>
<span id="lightCenter"></span>
<span id="lightRight" ></span>
<button onclick="start1()" >start</button>
<button onclick="close1()" >close</button>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script type="text/javascript">
//亮灭变量
var bool1 = true;
//循环变量
window.intervaldata = "";
//切换灯
function light(bool){
if(bool){
$("#lightLeft").css("background","#f00");
$("#lightRight").css("background","#00f");
}else{
$("#lightRight").css("background","#f00");
$("#lightLeft").css("background","#00f");
}
}
//延时
function interval(){
intervaldata = setInterval(function(){
light(bool1);
bool1 = !bool1;
})
}
//开启
function start1(){
interval();
};
//关闭
function close1(){
clearInterval(intervaldata);
$("#lightRight").css("background","#acaaaf");
$("#lightLeft").css("background","#acaaaf");
}
</script>
</html>
里面有注释自己理解吧:思想这种东西还得靠自己学不来的
975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
