JavaScript倒计时

倒计时：  1.设置一个有效的结束日期  2.计算剩余时间  3.将时间转换成可用的格式  4.输出时钟数据作为一个可重用的对象  5.在页面上显示时钟，并在它到达0时停止

<div id="clock"><span id="days"></span>天<span id="hours"></span>时<span id="minutes"></span>分<span id="seconds"></span>秒
</div>

<script>/*计算剩余时间*/function getTimeReamin(endtime){//剩余的秒数var remainSec=(Date.parse(endtime)-Date.parse(new Date()))/1000;var days=Math.floor(remainSec/(3600*24));var hours=Math.floor(remainSec/3600%24);var minutes=Math.floor(remainSec/60%60);var seconds=Math.floor(remainSec%60);return{"remainSec":remainSec,"days":days,"hours":hours,"minutes":minutes,"seconds":seconds}}

var endtime="2016/10/10";
var clock=document.getElementById("clock");
//设置定时器
var timeid=setInterval(function () {var t=getTimeReamin(endtime);//判断时间格式days= t.days>=0&& t.days<10?"0"+t.days:t.days;hours= t.hours>=0&& t.hours<10?"0"+t.hours:t.hours;minutes=t.minutes>=0&&t.minutes<10?"0"+t.minutes:t.minutes;seconds=t.seconds>=0&&t.seconds<10?"0"+t.seconds:t.seconds;//设置时间document.getElementById("days").innerText= days;document.getElementById("hours").innerText= hours;document.getElementById("minutes").innerText= minutes;document.getElementById("seconds").innerText=seconds;//清除定时器if(t.remainSec<=0){clearInterval(timeid);}
});
<script>

转载于:https://www.cnblogs.com/lijinblogs/p/5722240.html

JavaScript倒计时相关推荐

Javascript倒计时页面跳转
Javascript倒计时页面跳转在js中实现页面定时跳转我们要使用setInterval或setTimeOut函数,还可以使用页面的meta实现. 例1: <script type=&quo ...
html自动刷新倒计时,javascript – 倒计时结束时刷新页面
我有一个javascript倒计时脚本,我希望我的页面在倒计时结束时刷新一次. 这是我的完整代码. //JavaScript code for countdown function getTimeRe ...
javascript 倒计时工具
JavaScript 倒计时工具由于setInterval自身的不稳定性.因此,该工具主要是以setTimeout 结合递归方法来实现的, <!--* @Description: * @A ...
JavaScript倒计时算法（计算剩余多少天）实现
描述: 使用JavaScript完成指定的日期的倒计时,例如距离活动还有多少时间结束算法: 1.使用时间对象的getTime()方法获取所有的毫秒数 2.将指定时间的毫秒数和当前时间的毫秒数相减得到 ...
javascript 倒计时
从事前端工作以来,经常用到很多牛人写的javascript的库和插件.很是羡慕他们的能力, 自己也是以他们这些能人为目标不断努力.自己一直以来都想写一个自己的js库,再封装一些自己常用插件,想法是美 ...
JavaScript倒计时及倒计时发送信息
1.js倒计时效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
JavaScript倒计时跳转到另一个页面
需求页面上显示一个倒计时5秒的数字,到了5秒以后跳转到另一个页面案例分析页面上创建一个span用于显示变化的数字,点返回链接直接跳转. 定义一个变量为5,每过1秒调用1次刷新refresh()函 ...
html加js倒计时代码,分享最简单的JavaScript倒计时代码（附完整代码）
工作中经常需要在页面中设置倒计时,那你知道JS倒计时代码怎么写吗?这篇文章就给大家分享一个最简单的JS倒计时代码,以及详细的倒计时JS代码的思路,,有一定的参考价值,感兴趣的朋友可以看看. 举例:设定 ...
JavaScript 倒计时动态效果（附带小天使）
倒计时动态效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...

JavaScript倒计时

JavaScript倒计时相关推荐

最新文章

热门文章