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 相关文章推荐
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
javascript中setInterval的用法
Jul 19 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
JS图片懒加载技术实现过程解析
Jul 27 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
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php实现paypal 授权登录
2015/05/28 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
Node 代理访问的实现
2019/09/19 Javascript
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
python使用Matplotlib画饼图
2018/09/25 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
为什么需要版本控制?
2013/08/08 面试题
外语系大学生自荐信范文
2014/03/01 职场文书
安全生产月演讲稿
2014/05/09 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
中标通知书范本
2015/04/17 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python