Javascript实现时间倒计时功能


Posted in Javascript onNovember 17, 2018

本文实例为大家分享了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 相关文章推荐
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
js和jquery中获取非行间样式
May 05 jQuery
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
JavaScript迭代器的含义及用法
Jun 21 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
Javascript实现秒表倒计时功能
Nov 17 #Javascript
js实现简单模态框实例
Nov 16 #Javascript
js实现搜索栏效果
Nov 16 #Javascript
JavaScript实现简单音乐播放器
Apr 17 #Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 #Javascript
微信小程序自定义toast的实现代码
Nov 16 #Javascript
vue实现简单的星级评分组件源码
Nov 16 #Javascript
You might like
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
如何理解委托
2012/01/06 面试题
语文教育专业求职信
2014/06/28 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
青岛海底世界导游词
2015/02/11 职场文书
大学生求职自荐信
2015/03/24 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
使用Redis实现实时排行榜功能
2021/07/02 Redis