用jQuery写红绿灯项目

2021年09月15日 阅读数:1
这篇文章主要向大家介绍用jQuery写红绿灯项目,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body, html {
margin: 50px 200px;
padding: 0
}

.wrapper {
width: 100px;
height: 300px;
background: white;
border: 2px solid #111111;
border-radius: 50px;
position: relative;
display: inline-block;
}

div {
width: 50px;
height: 50px;
border: 1px solid #111111;
border-radius: 50%;
margin: 5px auto;
padding: 20px;
}

.red {
background: red;
}

.green {
background: green;
}

.white {
background: yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="red"></div>
<div class="green"></div>
<div class="white"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function () {
function changeColor() {
setTimeout(() => {
$('.red').css('border', '5px solid #111111')
$('.green').css('border', '1px solid #111111')
$('.white').css('border', '1px solid #111111')
setTimeout(() => {
$('.red').css('border', '1px solid #111111')
$('.green').css('border', '5px solid #111111')
$('.white').css('border', '1px solid #111111')
setTimeout(() => {
$('.red').css('border', '1px solid #111111')
$('.green').css('border', '1px solid #111111')
$('.white').css('border', '5px solid #111111')
setTimeout(
changeColor(), 1000
)
}, 1000)
}, 1000)
}, 1000)
}

changeColor()
})
</script>
</html>

关键是setTimeout的使用,在最后一个setTimeout重复函数css