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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
jquery 插件学习(二)
Aug 06 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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 保留字列表
2012/10/04 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
某公司C#程序员面试题笔试题
2014/05/26 面试题
金融专业应届生求职信
2013/11/02 职场文书
社会实践活动总结范文
2014/07/03 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
辞职信如何写
2015/02/27 职场文书
大学生十八大感想
2015/08/11 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
MySQL 数据库范式化设计理论
2022/04/22 MySQL