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 相关文章推荐
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
js中的this关键字详解
Sep 25 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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下10件你也许并不了解的事情
2008/09/11 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python列表切片操作实例总结
2019/02/19 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
金鑫耀Java笔试题
2014/09/06 面试题
设计毕业生简历中的自我评价
2013/10/01 职场文书
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
大学生职业生涯规划范文
2013/12/31 职场文书
一句话工作感言
2014/03/01 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
安全员岗位职责
2015/02/10 职场文书
车间质检员岗位职责
2015/04/08 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers