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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
Javascript进制转换实例分析
May 14 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
SVG实现时钟效果
Jul 17 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
js实现九宫格布局效果
May 28 Javascript
js简单实现自动生成表格功能示例
Jun 02 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
Laravel 的数据库迁移的方法
2017/07/31 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
python3对接mysql数据库实例详解
2019/04/30 Python
python实现门限回归方式
2020/02/29 Python
增大python字体的方法步骤
2020/07/05 Python
建筑院校毕业生求职信
2014/06/13 职场文书
村委会贫困证明范文
2014/09/21 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
认错检讨书
2014/10/02 职场文书
党小组鉴定意见
2015/06/02 职场文书
导游词之桂林
2019/08/20 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
导游词之麻姑仙境
2019/11/18 职场文书