javascript实现倒计时-------Day28

先来两幅图片,看看今天要写什么:

看到图片右上角是什么了么看到图片下面是什么了么

相信这个大家都不会陌生吧,那些生活中等着秒杀,等着抢小米人们,焦躁等待的你曾一秒一秒的盯着它看么,我不知道答案,可我知道有那么一批人,可能已经在心里开始一秒一秒的开始数了。这一年一度的高考也又要到了,倒计时的时间也是已经越来越小,我不知道哪些在数着考试的时间,哪些在数着毕业的时间,哪些纯粹在数着解脱的时间,呜呼哀哉,各有各路,这道路口如今也就那么着吧。

言归正传,今天来写一下倒计时,到现在来看确然是简单的很了,但是我们还是来按步骤分析下:

实现效果:

时间按“秒”减小,实现动态减小效果,这个就不多说了

实现原理:

首先我们可以要确定倒计时的时长,即最大值,然后将最大值用天、时、分或者秒进行描述,动态的每秒钟递减倒计时的最大时长,动态的效果表现出来就是随时显示当前的最大时长,最后在倒计时结束后,结束循环,停止递减。

这里要用到几个时间转换:1秒(s)=1000毫秒(ms),至于天、时、分、秒之间的转换不用说了吧

备注:setinterval的定时调用的指定周期为毫秒(ms)

代码实现:

话不多说了,上代码:

window.onload=function showDate(){
	var needTime=60;
	var dateTime=function(){
		var hour=Math.floor(needTime/(3600*60));
		var minute=Math.floor((needTime/60)%60);//分的转换,/60描述被小时整除的剩余部分,%60表示整除后剩下的不能被秒整除的部分为分
		var second=Math.floor(needTime%60);//无法被秒整除的就是秒数
		hour<0?hour=0:hour=hour;//这个条件运算符爽吧,学了之后就没用过几次,用上去感觉简练了好多
		minute<0?minute=0:minute=minute;
		second<0?second=0:second=second;
		hour.toString().length < 2 ? hstr = "0" + hour.toString() : hstr = hour; //1显示01
		minute.toString().length < 2 ? mstr = "0" + minute.toString() : mstr = minute; //1显示01
		second.toString().length < 2 ? sstr = "0" + second.toString() : sstr = second; //1显示01
		timestr = hstr + ":" + mstr + ":" + sstr;
		needTime=needTime-1;//needTime--也可以;
		if(needTime==0){
			clearInterval(dateTime);
		}
		document.getElementById("ce").innerHTML=timestr;

	};
	window.setInterval(dateTime, 1000);//调用方法啊,一定定义了,就直接调用定的名称就行了,不用加()
};
</script>

html部分就更简单了,写一个div属性id=”ce“就可以了,当然如果要是想要样式的话就单独写嘛,其实就是一个定时器的应用,还记得刚接触这行业,当时做一个图书网站,想要弄一个倒计时拍卖,找了些资料,看了好久没看懂,还感觉太麻烦了,结果...这样来看的话是不是秒表也就不在话下了呢,相同原理嘛,一个减少,一个增加.

只要不停下脚步,我们就在不停进步吧,好吧,我只能这么安慰自己...

javascript实现倒计时-------Day28

时间: 2024-08-27 03:03:37

javascript实现倒计时-------Day28的相关文章

javascript实现倒计时

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>大三倒计时</title> </head> <body> <div> 距离大三结束时间2015年7月1日仅有:<span id="ot

javascript - 活动倒计时(天、时、分、秒)

计数时: 结束时: 示例: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv=&qu

JavaScript 的倒计时

一年前,在网上找到的例子,现在已经找不到出处,对不住原作者,请原谅.修改了一下,在刷新页面的情况下,倒计时不重来. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>倒计时</title> </head> <body> <label id="time">

原生JavaScript时间倒计时的方法

这个思路是来源用%的方法来做的: 以前用%做过转秒的 http://taobao.fm/archives/666 现在用来做倒计时方法: 需要用到的方法是getTime:获取距离1970年1月1日午夜00:00之间的毫秒差: var targetTime=new Date("2016/01/25 16:59:59"); 这个是优秀的写法:下面是有问题的写法:因为IE678下不兼容的:需要把-改成/才好: var targetTime=new Date("2016-01-25

javascript 计算倒计时

function timeDown(second) { var month = '', day = '', hour = '', minute = ''; if (second >= 86400 * 30) { month = Math.floor(second / (86400 * 30)) + '月'; second = second % (86400 * 30); } if (second >= 86400) { day = Math.floor(second / 86400) + '天

javaScript 实现倒计时 + 获取网页中的文字

一.倒计时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <p id="demo"></p> <script> // Set the date we're counting down to var count

javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决

找了半天问题啊!!! 我使用了mobiscroll.js这个插件 ,但是ios手机一直报错! 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在iOS上缺不能正常显示,显示的时间为:NaN-NaN1-NaN  Invalid Date new Date('2016-07-18 14:58:32').getTime();      //在ios上死活拿不到时间戳显示NaN 接着我查了很多国外的技术blog,终于找到了解决方案,原来想要IOS5中的S

javascript 体验倒计时:距离国庆还有多长时间

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div { 8 width: 1210px; 9 margin: 200px auto; 10 color: orange; 11 text-align: center

js圣诞节倒计时网页

在线预览:http://keleyi.com/keleyi/phtml/jstexiao/17.htm 以下是代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>javascript节日倒计时-柯乐义</title> 5 <style type="text/css"> 6 .k