课堂作业—— JS制作红绿灯效果

#课堂作业—— JS制作红绿灯效果

每隔五秒变换红绿灯颜色。


一、代码(HTML+JS)


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body onload="changeLight()">
		<div align="center">
			<div id="red" style="width: 100px;height: 100px;border-radius: 50%;background-color: red;">div>
			<div id="yellow" style="width: 100px;height: 100px;border-radius: 50%;background-color: darkgray;">div>
			<div id="green" style="width: 100px;height: 100px;border-radius: 50%;background-color: darkgray;">div>
		div>
		<div align="center">
		<h1>倒计时:h1><h1 id="t1">5h1>
		div>
	body>
	<script>
		function changeLight(){
			var red = document.getElementById("red");
			var yellow = document.getElementById("yellow");
			var green = document.getElementById("green");
			//如果当前灯的颜色为红色,则将红色变为灰色,绿色位置的背景颜色替换为绿色
			if(red.style.backgroundColor=="red"){
				red.style.backgroundColor="darkgray";
				green.style.backgroundColor="green";
				return;
			}
			if(green.style.backgroundColor=="green"){
				green.style.backgroundColor="darkgray";
				yellow.style.backgroundColor="yellow";
				return;
			}
			if(yellow.style.backgroundColor=="yellow"){
				red.style.backgroundColor="red";
				yellow.style.backgroundColor="darkgray";
				return;
			}
		}
		//计时器,每隔5秒自动执行一次changLight()函数
		setInterval("changeLight()",5000); 
		
		//以下为倒计时的方法
		var t1 = document.getElementById("t1");
		var p = 5;
		function change(){
			p=p-1;
			t1.innerHTML=p;
			if(p==1){
				p=6;
				return;
			}
		}
		setInterval("change()",1000);
	script>
html>


##二、知识点
1、div或按钮设置成圆形
使width属性与height属性相同,border-radius属性设为50%

<div id="red" style="width: 100px;height: 100px;border-radius: 50%;background-color: red;">div>

2、js计时器

setInterval("方法",时间(单位为毫秒));

你可能感兴趣的:(课堂作业)