JS加HTML加CSS怎么制作红绿灯倒计时？

html-css015

JS加HTML加CSS怎么制作红绿灯倒计时？,第1张

我简单制作了一个，你看是否是你所需要的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style type="text/css">

*{margin:0pxpadding:0px}

.main{border:1px double #cccwidth:300pxheight:100px}

.deng{width:90pxheight:90pxfloat:leftborder:3px solid blackbackground-color:#CCCCCCborder-radius:45pxmargin-left:2px}

.jiShi{margin:5px 10pxcolor:#FF00FF}

</style>

</head>

<body>

<div class="main">

<div class="deng c0"></div>

<div class="deng c1"></div>

<div class="deng c2"></div>

<div class="jiShi">

00:00:30

</div>

<H3>每隔30秒变换一次</H3>

</div>

<script type="text/javascript">

window.onload=function(){

let timer,timer2

let n = 0

let t = 29

let colors = ["red","green","yellow"]

timer = window.setInterval(function(){

if(t==0){

$(".deng").css({"backgroundColor":"#CCC"})

$(".c" + n).css({"backgroundColor":colors[n]})

n++

if(n==3){n=0}

t=30

}else{

$(".jiShi").text("00:00:" + t)

t--

}

},1000)

}

</script>

</body>

</html>

1是对的

2：你看到的其实是信号灯的一种，它是分道信号灯，每个灯对应一个车道，你在第几车道就看第几个灯。路口不能右转却右转了算违章。（求一下jcss放行率50%）

3：黄灯亮起时过停车线的可以前行，没过的要减速停车，四面黄灯闪烁应减速了望，缓慢通行。

4：打转向灯直行的话，抓到就是违章，没有抓到就不算：）

5：小车的停车位可以停放摩托车，付钱就行。

6：如果限速80，你开过了限速就是违章，不管你是不是超车，不过有些地方会放宽10码限速。