js通过Date对象实现倒计时动画效果


Posted in Javascript onOctober 27, 2017

js通过Date对象实现倒计时效果,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时动画</title>
  <style>
    div{
      text-align:center;
      height:100px;
      line-height:100px;
    }
  </style>
  <script>
    window.onload = function(){
      setInterval(FreeTime,1000);
    }
    function FreeTime(){
      var curTime = Date.now();
      var endTime = new Date("2017-10-26 16:00:00");
      var allFreeSeconds = (endTime-curTime)/1000;
      if(allFreeSeconds>0){
        var freeDay = Math.floor(allFreeSeconds/(24*60*60));
        var freeHour = Math.floor(allFreeSeconds/(60*60) % 24);
        var freeMinute = Math.floor(allFreeSeconds/60 % 60);
        var freeSecond = Math.floor(allFreeSeconds%60);
        document.getElementById("nowTime").innerHTML = "剩余"+freeDay+"天"+freeHour+"时"+freeMinute+"分"+freeSecond+"秒";
      }
      else{
        document.getElementById("nowTime").innerHTML = "已结束";
      }
    }
  </script>
</head>
<body>
<div>
  <span id="nowTime"></span>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
JavaScript类库D
Oct 24 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 #Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 #Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 #Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 #Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 #Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 #Javascript
vue-resource拦截器设置头信息的实例
Oct 27 #Javascript
You might like
phpwind中的数据库操作类
2007/01/02 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python下os模块强大的重命名方法renames详解
2017/03/07 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python画微信表情符的实例代码
2019/10/09 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
PHP笔试题
2012/02/22 面试题
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
家长意见书
2015/06/04 职场文书
个人收入证明范本
2015/06/12 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS