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的更多相关文章

javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决
javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...
用Javascript 实现倒计时
用Javascript 实现倒计时<!DOCTYPE html> <html lang="en"> <head> <meta charse ...
javascript 时间倒计时
新加入一个项目的集中开发,遇到一个需要倒计时的需求,经过测试,有以下几种方案,分享出来: 方案一: 页面Html: <span style="font-size:18px;" ...
javascript实现倒计时
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
Javascript实现倒计时和根据某时间开始计算时间
JavaScript 代码 <script type="text/javascript"> var time_start = new Date('2018','7',' ...
javascript 时间倒计时效果
<div id="divdown1"></div> <script language="javascript" type=&quo ...
javascript - 活动倒计时(天、时、分、秒)
计数时: 结束时: 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
Javascript 实现倒计时效果
代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
JavaScript写倒计时
在网页中,特别是电商网站中,倒计时的出现频率很高,接下来给大家介绍一下怎么用JavaScript写一个倒计时.代码如下: 首先我们通过Date构造函数的方法创建一个倒计时的结束的时间.并将其转换为毫秒 ...

随机推荐

POJ 3040 Allowance 贪心
这题目的贪心思路还是有一点细节问题的. 还没有证明,据说是因为题目给的条件是每个价格是比它小的价格的倍数才能这么贪心的. 思路如下: 假设要给奶牛的钱为C 1)从大面值到小面值一次拿钱,能拿多少拿多少 ...
LeetCode——Search a 2D Matrix
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
achieve aop through xml
The main way to achive AOP is deploying a xml file. Now a xml file is presented to be a explanation ...
java多线程控制台聊天室(转)
用java多线程实现一个控制台聊天室,呵呵,好玩! 聊天室服务器端 package tf.thread; import java.io.BufferedReader; import java.io.I ...
为什么使用 React? Edit on GitHub
为什么使用 React? React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库.很人多认为 React 是 MVC 中的 V(视图). 我们创造 ...
birdnest是什么意思_birdnest在线翻译_英语_读音_用法_例句_海词词典
birdnest是什么意思_birdnest在线翻译_英语_读音_用法_例句_海词词典 birdnest
使用python向Redis批量导入数据
1.使用pipeline进行批量导入数据.包含先使用rpush插入数据,然后使用expire改动过期时间 class Redis_Handler(Handler): def connect(self) ...
从尾到头打印链表--《剑指offer》
题目:非常easy,就是题目,将链表从尾到头打印出来. 可能我们首先想到的是将链表进行遍历,将之前的訪问的数据进行保存,最后进行反向输出,但是保存数据的空间是个问题:或者是我们将整个链表进行反向操作, ...
Android 网络通信框架Volley基本介绍
Volley主页 https://android.googlesource.com/platform/frameworks/volley http://www.youtube.com/watch?v= ...
ServicePrvider实现揭秘
ServicePrvider实现揭秘到目前为止,我们定义的ServiceProvider已经实现了基本的服务提供和回收功能,但是依然漏掉了一些必需的细节特性.这些特性包括如何针对IServicePr ...

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

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

随机推荐

热门专题