<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.right {
width: 100px;
height: 100px;
border-radius: 50%;
float: left;
text-align: center;
color: white;
}
#nav {
transform: translate(43%);
}
.red {
background-color: red;
}
.green {
background-color: Lime;
}
@keyframes myfirst {
0% {
background-color: rgba(255, 255, 0, 1);
}
100% {
background-color: rgba(255, 255, 0, 0);
}
}
@keyframes mysecond {
0% {
background-color: rgba(0, 255, 0, 1);
}
100% {
background-color: rgba(0, 255, 0, 0);
}
}
@keyframes mythist {
0% {
background-color: rgba(255, 0, 0, 1);
}
100% {
background-color: rgba(255, 0, 0, 0);
}
}
@keyframes myp {
0% {
color: rgba(0, 0, 0, 1);
}
100% {
color: rgba(0, 0, 0, 0);
}
}
.yellow {
background-color: yellow;
animation: myfirst 1s infinite;
}
.g {
animation: mysecond 1s infinite;
}
.r {
animation: mythist 1s infinite;
}
#time1, #time2, #time3 {
animation: myp 1s infinite;
font-size: 40px;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="nav">
<div class="right red">
<div id="time1" class="p"></div>
</div>
<div class="right">
<div id="time2" class="p"></div>
</div>
<div class="right">
<div id="time3" class="p"></div>
</div>
</div>
<script>
let colorred = document.getElementsByClassName('right')[0];
let colorgreen = document.getElementsByClassName('right')[2];
let coloryellow = document.getElementsByClassName('right')[1];
const setTime = function (ms) {
return function (color) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, color)
});
}
}
let red = setTime(30000);
let yellow = setTime(4000);
let green = setTime(30000);
let p = document.getElementById("time1");
let py = document.getElementById("time2");
let pg = document.getElementById("time3");
(function reset() {
var time = 30;
var timey = 4;
var timeg = 30;
(function () {
let set = setInterval(function () {
time--;
p.innerHTML = time;
if (time == 3) {
colorred.className = 'right red r';
}
if (time === 0) {
p.innerHTML = "";
clearInterval(set);
(function () {
let set = setInterval(function () {
timey--;
py.innerHTML = timey;
if (timey === 0) {
py.innerHTML = "";
clearInterval(set);
}
}, 1000);
})();
}
}, 1000);
})();
red('red').then((data) => {
colorred.className = 'right';
coloryellow.className = 'right yellow';
return yellow('yellow')
}).then((data) => {
coloryellow.className = 'right';
colorgreen.className = 'right green';
var timey = 4;
(function () {
let set = setInterval(function () {
timeg--;
pg.innerHTML = timeg;
if (timeg == 3) {
colorgreen.className = 'right red g';
}
if (timeg === 0) {
pg.innerHTML = "";
clearInterval(set);
(function () {
let set = setInterval(function () {
timey--;
py.innerHTML = timey;
if (timey === 0) {
py.innerHTML = "";
clearInterval(set);
}
}, 1000);
})();
}
}, 1000);
})();
return green('green')
}).then((data) => {
colorgreen.className = 'right'
coloryellow.className = 'right yellow'
return yellow('yellow')
}).then((data) => {
console.log(data, new Date().getSeconds());
coloryellow.className = 'right';
colorred.className = 'right red';
reset();
});
})();
</script>
</body>
</html>
交通灯的实现
最新推荐文章于 2024-07-24 23:30:03 发布