编程 Javascript

基于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实现自动更新倒计时效果

- Author -

zxz32384

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript全局变量封装模块实现代码

Nov 28 Javascript

js触发asp.net的Button的Onclick事件应用

Feb 02 Javascript

在Google 地图上实现做的标记相连接

Jan 05 Javascript

JavaScript学习小结(一)——JavaScript入门基础

Sep 02 Javascript

jQuery深拷贝Json对象简单示例

Jul 06 Javascript

Bootstrap笔记—折叠实例代码

Mar 13 Javascript

js实现网页的两个input标签内的数值加减(示例代码)

Aug 15 Javascript

vue实现图片加载完成前的loading组件方法

Feb 05 Javascript

在vue项目中使用element-ui的Upload上传组件的示例

Feb 08 Javascript

原生JS实现自定义下拉单选选择框功能

Oct 12 Javascript

微信小程序 JS动态修改样式的实现方法

Dec 16 Javascript

layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法

Sep 24 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