Javascript实现时间倒计时效果


Posted in Javascript onJuly 15, 2017

本文实例为大家分享了js实现时间倒计时展示的具体代码,供大家参考,具体内容如下

这里使用的是Date日期类

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>日期类倒计时</title>
    <script type="text/javascript">
      window.onload=function(){
        var odiv=document.getElementById("time");
        var obtn=document.getElementById("btn");
        var omusic=document.getElementById("music");
        obtn.onclick=function(){//按钮点击 音乐停止播放
          omusic.pause();
        }
        function totwo(e){
          return e<10?"0"+e:""+e;//如果取得的数字为个数则在其前面增添一个0
        }
        function go(){//把获取时间的功能封装到函数内    注意 时间要向下取整避免小数
            var time1=new Date();//获取当前时间 获取的市1970年1年1月日到现在的毫秒数(必须写在函数或者定时器内 每一次变化都要重新获取当前时间)
            var time2=new Date(2017,9,27,17,20,10);//设置需要到达的时间 也是获取的毫秒数
            var conS=Math.floor((time2.getTime()-time1.getTime())/1000);//获得差值除以1000转为秒
            var day=totwo(Math.floor(conS/86400));// 差值/60/60/24获取天数
            var hour=totwo(Math.floor(conS%86400/3600)); //  取余/60/60获取时(取余是获取conS对应位置的小数位)
            var min=totwo(Math.floor(conS%86400%3600/60));// 取余/60获取分
            var s=totwo(Math.floor(conS%60)); //取总秒数的余数
            var html="倒计时"+day+"天"+hour+"时"+min+"分"+s+"秒"; 
            odiv.innerHTML=html;//把字符串添加进div中
            if(conS<0){//倒计时完成 执行功能,这里是播放MP3
              clearInterval(time);//执行功能时要清除时间函数
              omusic.play();
              odiv.innerHTML="春节快乐!";
            }          
        }
        go();//调用函数
        var time=setInterval(go,1000);//设置定时器 每一秒执行一次
      }
    </script>
  </head>
  <body>
    <button id="btn">停止</button>
    <audio src="music.mp3" id="music"></audio>
    <div id="time"></div>
  </body> 
</html>

效果图:

Javascript实现时间倒计时效果

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

Javascript 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
jquery append与appendTo方法比较
May 24 jQuery
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
jquery实现聊天机器人
Feb 08 jQuery
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 #Javascript
JavaScript实现时间表动态效果
Jul 15 #Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 #Javascript
JavaScript实现三级联动效果
Jul 15 #Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 #Javascript
backbone简介_动力节点Java学院整理
Jul 14 #Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 #Javascript
You might like
php 数组的指针操作实现代码
2011/02/08 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python清除字符串里非数字字符的方法
2015/07/02 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
深入理解python中的select模块
2017/04/23 Python
教你学会使用Python正则表达式
2017/09/07 Python
python3 拼接字符串的7种方法
2018/09/12 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
华为python面试题
2016/05/03 面试题
贸易跟单员英文求职信
2014/04/19 职场文书
文明村镇申报材料
2014/05/06 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
董事长开业致辞
2015/07/29 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript