Javascript案例之计时器和倒计时器

javascript的基础知识,从今天开始就不再更新了。而是开始专注于小案例的编写。今天是第一个案例,计时器和倒计时器。

计时器:

实际上就是将Date对象实例化后简单处理后,将其打印出来。年月日的获取时,只有月要简单注意一下,getMonth()+1即可。

星期几的实现也是很简单的,因为getDay()方法返回的是一个int数值,0代表星期日,以此类推,6代表星期六。故此,只需要构造一个数组,数组中存入星期,array(d)便是星期几。(d为getDay()返回的数值)

小时,分钟,秒都可以运用get方法获得。但是获得只是一个静态的当前数值,只有在刷新的时候,才可以将其动态改变。故此需要借助setTimeout()来定时刷新。

当然了,时间还要简单处理下,具体见代码。

下面贴上代码:

<script language="javascript" type="text/javascript">
		 window.onload=function()
		 {
			 
			 showtime();
		}
			 	
			function checktime(i)
			{//简单地处理,保证秒在出现的时候是两位出现
				if(i<10)
				{
					i="0"+i;
					
				}
				return i;
					
			}
			function showtime()
			{
				
		 	var myDate=new Date();
			//获取他的年月日
			var year=myDate.getFullYear();
			var month=myDate.getMonth()+1;
			var date=myDate.getDate();
			var d=myDate.getDay();
			var hour=myDate.getHours();
			var minute=myDate.getMinutes();
			var second=myDate.getSeconds();
			hour=checktime(hour);
			minute=checktime(minute);
			second=checktime(second);
			//通过innerHTML来向div中写内容
			var day=new Array(7);
			day[0]="星期日";
			day[1]="星期一";
			day[2]="星期二";
			day[3]="星期三";
			day[4]="星期四";
			day[5]="星期五";
			day[6]="星期六";
			document.getElementById('show').innerHTML=year+'年'+month+'月'+date+'日'+day[d]+hour+':'+minute+':'+second;
		 	setTimeout(showtime,500);//每隔500毫秒进行一次刷新,记住要写在showtime()函数里面,保证无限循环调用。
			}
	</script>


 
 


倒计时器:

倒计时跟计时器相比起来要更简单。只需要获取当前时间,设置截止时间,二者作差即可。

扫描二维码关注公众号,回复: 3842378 查看本文章

注意:date对象运算得到的是随机数,要通过gettime方法,转化成毫秒数。在通过换算转化成天数。

代码如下:

<script language="javascript" type="text/javascript">
	window.onload=function()
	{
	var startdate=new Date();
	var enddate=new Date("2017,8,28");
	var	lefttime=Math.ceil((enddate.getTime()-startdate.getTime())/(24*60*60*1000));
	document.getElementById('showltime').innerHTML=lefttime;
	}
</script>

今天的小例子,就是这样。明天接着更新。



猜你喜欢

转载自blog.csdn.net/qq_36251958/article/details/76241064