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 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
javascript实现数独解法
Mar 14 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
JS实现购物车基本功能
Nov 08 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
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
javascript实现数独解法
2015/03/14 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
js实现缓动动画
2020/11/25 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python中执行shell命令的几个方法小结
2014/09/18 Python
Python logging模块handlers用法详解
2020/08/14 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
《狐假虎威》教学反思
2014/02/07 职场文书
协议书的格式
2014/04/23 职场文书
学前班语言教学计划
2015/01/20 职场文书
优秀大学生自荐信
2015/03/26 职场文书
化妆品促销活动总结
2015/05/07 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL