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 相关文章推荐
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
详解Vue的options
May 15 Vue.js
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 如何向 MySQL 发送数据
2006/10/09 PHP
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
Python获取linux主机ip的简单实现方法
2016/04/18 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
给我一面国旗 python帮你实现
2019/09/30 Python
基于python plotly交互式图表大全
2019/12/07 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
20年同学聚会邀请函
2014/02/04 职场文书
英文感谢信格式
2015/01/21 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers