简单实现js倒计时功能


Posted in Javascript onFebruary 13, 2017

本文实例为大家分享了js倒计时的具体代码,主要使用了JS的Date对象和定时器setInterval,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
 <head> 
 <title> 倒计时 </title> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta name="Generator" content="EditPlus"> 
 <meta name="Author" content=""> 
 <meta name="Keywords" content=""> 
 <meta name="Description" content=""> 
 </head> 
<script> 
var timstr= '2020-09-03'; 
var _timer; 
 
//页面加载完成之后执行 
window.onload = function() 
{ 
 timerfunc();//调用定时器 
 document.getElementById('timSpan').innerHTML = timstr; //将目标时间输出 
} 
 
//定时器方法 
timerfunc = function(){ 
 _timer = setInterval('tfunc()',1000);//生成定时器 
} 
 
//时间处理方法 
tfunc = function(){ 
 var ntim = new Date(); //当前时间戳 
 var _tm = timstr.replace(/-/g,'\/'); //目标时间字段串里的-替换成/,格式化的需要 
 var ftim = new Date(_tm); //格式化目标时间 
 var rs = timGap(ntim.getTime(),ftim.getTime()); //调用取时间差方法 
 var _str = rs.d+'天'+rs.h+'小时'+rs.m+'分钟'+rs.s+'秒'; //将返回的数据拼接字符串 
 document.getElementById('gap').innerHTML = _str; //输出 
} 
 
//取时间差方法 
timGap = function(ntim,ftim){ 
 var date3 = ftim - ntim; //时间差值毫秒数 
 
 var days = Math.floor(date3/(24*3600*1000)); //取天数 
 
 
 var level1 = date3%(24*3600*1000);//取天数后剩下的毫秒数 
 var hours = Math.floor(level1/(3600*1000)); //取小时数 
 
 var level2 = level1%(3600*1000);//取小时后剩下的毫秒数 
 var minutes = Math.floor(level2/(60*1000));//取分钟 
 
 var level3 = level2%(60*1000);//取分钟后剩下的毫秒数 
 var seconds = Math.floor(level3/1000);//取秒 
 
 //定义对象 
 var tim = {}; 
 //赋值 
 tim['d'] = days; 
 tim['h'] = hours; 
 tim['m'] = minutes; 
 tim['s'] = seconds; 
 //console.log(tim); 
 return tim; //返回数据 
} 
</script> 
 <body> 
 <div>距离<span id="timSpan"></span>还有 <span id="gap"></span></div> 
 </body> 
</html>

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
Vue实现购物车功能
Apr 27 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
使用vue构建一个上传图片表单
Jul 04 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
基于node.js依赖express解析post请求四种数据格式
Feb 13 #Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 #Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 #Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 #Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 #Javascript
Vue.js实现简单动态数据处理
Feb 13 #Javascript
JavaScript获取select中text值的方法
Feb 13 #Javascript
You might like
我的论坛源代码(十)
2006/10/09 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python多进程实现文件下载传输功能
2018/07/28 Python
对Python中plt的画图函数详解
2018/11/07 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
python+opencv实现车道线检测
2021/02/19 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
电话客服工作职责
2014/07/27 职场文书
大学生作弊检讨书
2014/09/11 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书