<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
span{
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid white;
opacity: 0.1;
}
.light{
opacity: 1;
}
#red{
background-color: red;
}
#yellow{
background-color: yellow;
}
#green{
background-color: green;
}
#time{
margin-left: 30px;
font-size: 70px;
}
</style>
<p>
<span id="red" class="light"></span>
<span id="yellow"></span>
<span id="green"></span>
<b id="time">10</b>
</p>
<script>
var current="red";
var time="10";
function changeLight(from,to,timeout){
if(time>0){
return;
}
current=to;
time=timeout;
document.getElementById(from).removeAttribute('class','light');
document.getElementById(to).setAttribute('class','light');
}
setInterval(function(){
time--;
if(current==='red'){
changeLight('red','yellow',3);
}else if(current==='yellow'){
changeLight('yellow','green',8);
}else if(current==='green'){
changeLight('green','red',10);
}
document.getElementById('time').innerText=time;
},1000)
</script>
</body>
</html>
扫一扫
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
