脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js自动更新倒计时效果

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

 更新时间：2016年12月19日 13:58:48   作者：zxz32384  
这篇文章主要为大家详细介绍了基于JavaScript实现自动更新倒计时效果，元旦倒计时代码分享，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

实现倒计时效果需要掌握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优化图片懒加载的性能技巧

    JavaScript优化图片懒加载的性能技巧

    前端发展过程中有许多性能优化的操作,比如防抖、节流和图片懒加载等,在这里我们首先聊聊图片懒加载操作,我们会经常逛像淘宝和京东等购物平台,一次性全部加载会导致加载时间长、网络资源消耗大,所以本文给大家介绍了JavaScript优化图片懒加载的性能技巧
    2024-06-06
  • 微信小程序 腾讯地图SDK 获取当前地址实现解析

    微信小程序 腾讯地图SDK 获取当前地址实现解析

    这篇文章主要介绍了微信小程序 腾讯地图SDK 获取当前地址实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • webpack打包并将文件加载到指定的位置方法

    webpack打包并将文件加载到指定的位置方法

    下面小编就为大家分享一篇webpack打包并将文件加载到指定的位置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • JavaScript实现的Tween算法及缓冲特效实例代码

    JavaScript实现的Tween算法及缓冲特效实例代码

    这篇文章主要介绍了JavaScript实现的Tween算法及缓冲特效,涉及JavaScript通过数学运算及样式属性操作实现缓动、弹性运动等效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • ES2020系列之空值合并运算符 ''??''

    ES2020系列之空值合并运算符 ''??''

    这篇文章主要介绍了ES2020系列之空值合并运算符 '??'，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 打印Proxy对象和ref对象的包实现详解

    打印Proxy对象和ref对象的包实现详解

    这篇文章主要为大家介绍了打印Proxy对象和ref对象的包实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • JavaScript DOMContentLoaded事件案例详解

    JavaScript DOMContentLoaded事件案例详解

    这篇文章主要介绍了JavaScript DOMContentLoaded事件案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • js实现转盘抽奖功能

    js实现转盘抽奖功能

    这篇文章主要为大家详细介绍了js实现转盘抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Node.js API详解之 zlib模块用法分析

    Node.js API详解之 zlib模块用法分析

    这篇文章主要介绍了Node.js API详解之 zlib模块用法,结合实例形式分析了Node.js API中zlib模块基本功能、函数使用方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 基于JavaScript实现图片剪切效果

    基于JavaScript实现图片剪切效果

    这篇文章主要介绍了用JavaScript实现图片剪切效果,本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03

最新评论