用JavaScript实现类似于单片机那样的跑马灯

最新推荐文章于 2024-04-20 17:52:36 发布

一粒程序米

最新推荐文章于 2024-04-20 17:52:36 发布

阅读量533

点赞数

分类专栏：前端HTML 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_43449246/article/details/117981630

版权

前端HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近因为需要这样的动图实现功能显示，在网上又找不到类似的动图，也不知道怎么做这样的动图，又刚好学了JavaScript，所以就试试能不能实现。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>paomadeng</title>
		<style type="text/css">
			body{background-color: black;}
			#paomadeng{text-align:center;vertical-align: center;margin-top: 100px; visibility: hidden; }
			#d1{margin-left: 0px;}
			#d2{margin-left: 5px;}
			#d3{margin-left: 10px;}
			#d4{margin-left: 15px;}
			#d5{margin-left: 20px;}
			#d6{margin-left: 25px;}
			#d7{margin-left: 30px;}
			#d8{margin-left: 35px;}
			#d9{margin-left: 40px;}
		</style>
	</head>
	<body onload="showPaoMaDeng()">	
		<div id="paomadeng">
		
			<div id="d1">
				<img src="img/yellow.png" height="10px" width="80px"  >
			</div>
			<div id="d2">
				<img src="img/yellow.png" height="10px" width="75px">
			</div>
			<div id="d3">
				<img src="img/yellow.png" height="10px" width="70px">
			</div>
			<div id="d4">
				<img src="img/yellow.png" height="10px" width="65px">
			</div>
			<div id="d5">
				<img src="img/yellow.png" height="10px" width="60px">
			</div>
			<div id="d6">
				<img src="img/yellow.png" height="10px" width="55px">
			</div>
			<div id="d7">
				<img src="img/yellow.png" height="10px" width="50px">
			</div>
			<div id="d8">
				<img src="img/yellow.png" height="10px" width="45px">
			</div>
			<div id="d9">
				<img src="img/yellow.png" height="10px" width="40px">
			</div>
		</div>
		
		var myVar=setInterval(function(){showPaoMaDeng()},500);
		<script language="javascript",type="text/javascript">	
			var i=0;
			function hiddenLight1(num1){
				switch(num1)
				{
					case 1:
						document.getElementById("d1").style.visibility="hidden";//隐藏
					break;
					case 2:
						document.getElementById("d2").style.visibility="hidden";//隐藏
					break;
					case 3:
						document.getElementById("d3").style.visibility="hidden";//隐藏
					break;
					case 4:
						document.getElementById("d4").style.visibility="hidden";//隐藏
					break;
					case 5:
						document.getElementById("d5").style.visibility="hidden";//隐藏
					break;
					case 6:
						document.getElementById("d6").style.visibility="hidden";//隐藏
					break;
					case 7:
						document.getElementById("d7").style.visibility="hidden";//隐藏
					break;
					case 8:
						document.getElementById("d8").style.visibility="hidden";//隐藏
					break;
					case 9:
						document.getElementById("d9").style.visibility="hidden";//隐藏
					break;
				}				
			};
			function showLight1(num2){				
				switch(num2)
				{
					case 1:
						document.getElementById("d1").style.visibility="visible";//显示
					break;
					case 2:
						document.getElementById("d2").style.visibility="visible";//显示
					break;
					case 3:
						document.getElementById("d3").style.visibility="visible";//显示
					break;
					case 4:
						document.getElementById("d4").style.visibility="visible";//显示
					break;
					case 5:
						document.getElementById("d5").style.visibility="visible";//显示
					break;
					case 6:
						document.getElementById("d6").style.visibility="visible";//显示
					break;
					case 7:
						document.getElementById("d7").style.visibility="visible";//显示
					break;
					case 8:
						document.getElementById("d8").style.visibility="visible";//显示
					break;
					case 9:
						document.getElementById("d9").style.visibility="visible";//显示
					break;
				}
			};
			function func(){
				i++;
				if(i<10&&i>0)
				{
					showLight1(10-i);
				}
				else if(i<19&&i>9)
				{
					hiddenLight1(19-i);
				}
				else
				{
					i=0;
				}
			};
			function showPaoMaDeng(){
				setInterval(function(){func()},100);
			};
		</script>
	</body>
</html>

当然，在HTML的同级目录下还需要新建一个文件夹img，里面放一张图片：

完结。

一粒程序米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
用JavaScript实现类似于单片机那样的跑马灯

最近因为需要这样的动图实现功能显示，在网上又找不到类似的动图，也不知道怎么做这样的动图，又刚好学了JavaScript，所以就试试能不能实现。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>paomadeng</title> <style type="text/css"> body{background-col..
复制链接

扫一扫