GFT动态效果图:

jquery——警示灯特效-LMLPHP

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery.js"></script>
		<style>
			.blue{
				height: 50px;
				width: 40px;
				background-color: blue;
				border-radius: 20px 20px 2px 2px;
			}
			.red{
				height: 50px;
				width: 40px;
				background-color: red;
				border-radius: 20px 20px 2px 2px;
			}
		</style>
	</head>
	<body>
		<div class="blue"></div><br/>
		<input type="button" id="close" value="关闭" />
		<input type="button" id="open" value="打开" />
		<script type="text/javascript">
			//定义定时器对象
			var interval;
			//打开定时器
			function open(){
				if(interval != undefined){
					alert("已经启动!");
				}else{
					interval = setInterval(function(){
						$("div").toggleClass("red");
					},100);
				}
			}
			//关闭定时器
			function close(){
				clearInterval(interval);
				interval = undefined;
			}
			$(function(){
				//关闭按钮绑定点击事件
				$("#close").click(function(){
					close();
				});
				//打开按钮绑定点击事件
				$("#open").click(function(){
					open();
				});
			});
	</script>
	</body>
</html>
10-25 13:14