码迷,mamicode.com
首页 > Web开发 > 详细

如何在网页中设置一个定时器计算时间?

时间:2017-07-01 14:30:33      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:oql   span   ccf   pua   jar   aic   evel   bit   scn   

写一个简单的计数js代码

首先先写一个div,用于存放计数器,并且通过改变样式可以改变计数器的样子

	<body>	
		<div id="le"></div>
	</body>

 

		<style type="text/css">
			
			#le{
				position: fixed;
				right: 100px;
				top: 200px;
				width: 250px;
				height: 200px;
				background-color: #000000;
				font-size: 40px;
				line-height: 200px;
				text-align: center;
				color: white;
				font-weight: 700;
				transition: all .5s ease;
			}
			
		</style>

 技术分享

接下来写js代码

<script type="text/javascript">
        var num = 0;    //先建立全局变量,当网站打开时归0
        var Interval = setInterval(function()  //写一个定时函数,每过多久执行一次,如果是时间,可以让执行时间为1000ms
        {
            num++;     //定时器每执行一次,让num+1
            var la = document.getElementById("le");    //选中div
            la.innerText = num;    //让div中的文本变成num,由于num不断变化,div中的文本也不断变化
        },1000);  //设置定时器的时间

</script>

技术分享

效果如图

如果想增加其他效果可以自己设置

比如如下代码:

switch(num%10){  // num的个位数决定着整个div的样式
                case 1:
                    la.style.textAlign="left";
                break;    
                case 2:
                    la.style.lineHeight="40px";
                break;
                case 3:
                    la.style.textAlign="center";
                break;    
                case 4:
                    la.style.lineHeight="200px";
                break;
                case 5:
                    la.style.textAlign="right";
                break;    
                case 6:
                    la.style.lineHeight="360px";
                break;
                case 7:
                    la.style.textAlign="center";
                break;    
                case 8:
                    la.style.lineHeight="200px";
                break;
                case 9:
                    la.style.fontSize="180px";
                break;    
                case 0:
                    la.style.fontSize="40px";
                    
                break;
                    
                default:
                    alert("2");
                
            }

将switch分支结构插入计时器中,按照其中的样式变换

技术分享

好啦,今天的这个小功能就这么简单的实现了,如果有什么需要帮助的请联系我哦~

 

如何在网页中设置一个定时器计算时间?

标签:oql   span   ccf   pua   jar   aic   evel   bit   scn   

原文地址:http://www.cnblogs.com/Lmey/p/7102216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!