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 相关文章推荐
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
JavaScript极简入门教程(一):基础篇
Oct 25 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
javascript实现在线客服效果
Jul 15 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
JS高级程序设计之class继承重点详解
Jul 07 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
计数器详细设计
2006/10/09 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python中append实例用法总结
2019/07/30 Python
Pytorch之parameters的使用
2019/12/31 Python
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
建筑施工实习自我鉴定
2013/09/19 职场文书
项目开发计划书
2014/01/09 职场文书
小学教师听课制度
2014/02/01 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
具结保证书
2015/01/17 职场文书
留学推荐信英文范文
2015/03/26 职场文书
创业计划书之美容店
2019/09/16 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL