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学习笔记(一) 编写高质量代码
Aug 09 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
JavaScript表单验证实现代码
May 22 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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中copy on write写时复制机制介绍
2014/05/13 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
Laravel 队列使用的实现
2019/01/08 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
python线程池的实现实例
2013/11/18 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
python类中super()和__init__()的区别
2016/10/18 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
我的中国心演讲稿
2014/09/04 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL