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 相关文章推荐
JS实现简单的Canvas画图实例
Jul 04 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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
composer.lock文件的作用
2016/02/03 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP反射学习入门示例
2019/06/14 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python调用支付宝支付接口流程
2019/08/15 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
自主招生自荐信范文
2013/12/04 职场文书
大学校运会广播稿
2014/02/03 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
求职信名称怎么写
2014/05/26 职场文书
社区两委对照检查材料
2014/08/23 职场文书
与美同行演讲稿
2014/09/13 职场文书
简历自我评价模板
2015/03/11 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL