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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
javascript回到顶部特效
Jul 30 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
vue地区选择组件教程详解
May 04 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
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
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php获取apk包信息的方法
2014/08/15 PHP
php自定文件保存session的方法
2014/12/10 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
php实现购物车功能(下)
2016/01/05 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
遗传算法之Python实现代码
2017/10/10 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
工地安全检查制度
2014/02/04 职场文书
大学社团活动总结
2014/04/26 职场文书
住宅质量保证书
2014/04/29 职场文书
小学假期安全广播稿
2014/09/28 职场文书
查摆剖析材料范文
2014/09/30 职场文书
初中作文评语
2014/12/25 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书