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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
JavaScript cookie原理及使用实例
May 08 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笔记 字符串处理
2010/10/19 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
详解如何使用Python编写vim插件
2017/11/28 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
八一建军节部队活动方案
2014/02/04 职场文书
班班通项目实施方案
2014/02/25 职场文书
市场营销方案范文
2014/03/11 职场文书
物业保安员岗位职责
2014/03/14 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
毕业设计致谢词
2015/05/14 职场文书
法定代表人资格证明书
2015/06/18 职场文书
家电创业计划书
2019/08/05 职场文书
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技