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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
AngularJS表单验证功能
Oct 19 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
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页面防重复提交方法总结
2013/11/25 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
python opencv如何实现图片绘制
2020/01/19 Python
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
酒店副总岗位职责
2013/12/24 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
娱乐节目策划方案
2014/06/10 职场文书
工作作风承诺书
2014/08/30 职场文书
电影地道战观后感
2015/06/04 职场文书
四年级作文之植物
2019/09/20 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
golang生成并解析JSON
2022/04/14 Golang