<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红绿灯await</title>
<style>
#TrafficLight {
width: 50px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div id="TrafficLight"></div>
</body>
<script>
//1.获取元素
Light = document.getElementById("TrafficLight");
// 2.设置颜色
function setBg(bgColor) {
Light.style.backgroundColor = bgColor
}
//设置动画
async function Animate() {
await slepp(2000).then(() => {
setBg("green")
});
await slepp(2000).then(() => {
setBg("yellow")
});
await slepp(1000).then(() => {
setBg("red")
});
Animate();
};
// 睡眠函数
function slepp(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
},time)
})
}
Animate();
</script>
</html>
js实现红绿灯(async/await)
最新推荐文章于 2023-04-11 15:42:06 发布