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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
javascript获取元素的计算样式
May 24 Javascript
JS如何把字符串转换成json
Feb 21 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
如何开始收听短波广播
2021/03/01 无线电
简单易用的计数器(数据库)
2006/10/09 PHP
支持oicq头像的留言簿(一)
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
python线程中同步锁详解
2018/04/27 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
python画图的函数用法以及技巧
2019/06/28 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Python 创建守护进程的示例
2020/09/29 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
什么造成了Java里面的异常
2016/04/24 面试题
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis