基于JavaScript实现自动更新倒计时效果


Posted in Javascript onDecember 19, 2016

实现倒计时效果需要掌握js中的两个知识点:
1、setTimeout函数 每隔1秒钟更新秒钟时间
2、Date对象 计算时间差

下面贴出 元旦倒计时代码

<!DOCTYPE html>
<html>
 <head>
 <title>example.html</title>

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="this is my page">
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <script>

 //定义计时器,每隔1秒钟调用timer函数
 var timerCount= window.setTimeout("timer()",1000);
 function timer(){
 var date=new Date("2017","1","1","0","0","0");
 var deadlineTime=date.getTime();
 var nowDate=new Date();
 var nowTime=nowDate.getTime();
 var distTime=deadlineTime-nowTime;
 //判断是否到达时间期限
 if(distTime>0){
 var d=Math.floor(distTime/1000/3600/24);
 var h=Math.floor(distTime/1000/3600%24);
 var m=Math.floor(distTime/1000/60%60);
 var s=Math.floor(distTime/1000%60);
 var str="距离2017年元旦还有"+d+"天"+h+"时"+m+"分"+s+"秒";
 document.getElementById("timeout").innerHTML=str;
 timerCount= window.setTimeout("timer()",1000); 
 }
 else{
 //到达时间期限的时候清楚计时器;
 window.clearTimeout(timerCount);
 alert("时间已到");
 }

 }
 </script>
 </head>

 <body>
 <p id="timeout"> </p>

</html>

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

Javascript 相关文章推荐
JS清空多文本框、文本域示例代码
Feb 24 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
理解JavaScript事件对象
Jan 25 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
微信小程序支付前端源码
Aug 29 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
Bootstrap的基本应用要点浅析
Dec 19 #Javascript
详解javascript获取url信息的常见方法
Dec 19 #Javascript
js封装tab标签页实例分享
Dec 19 #Javascript
jQuery焦点图轮播效果实现方法
Dec 19 #Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 #Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 #Javascript
jQuery网页定位导航特效实现方法
Dec 19 #Javascript
You might like
PHP文件与目录操作示例
2016/12/24 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
JAVASCRIPT HashTable
2007/01/22 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
javascript中的this详解
2014/12/08 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python实现百度关键词排名查询
2014/03/30 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
新浪网技术部笔试题
2016/08/26 面试题
师德演讲稿范文
2014/05/06 职场文书
小班上学期个人总结
2015/02/12 职场文书
工作简报范文
2015/07/21 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL