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 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 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中explode与split的区别介绍
2012/10/03 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
js中开关变量使用实例
2017/02/24 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
各个系统下的Python解释器相关安装方法
2015/10/12 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
pyqt5实现登录界面的模板
2020/05/30 Python
python的依赖管理的实现
2019/05/14 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
香港交友网站:be2香港
2018/07/22 全球购物
运动会致辞稿50字
2014/02/04 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
合同协议书格式
2014/04/18 职场文书
人力资源职位说明书
2014/07/29 职场文书
员工辞职信范文
2015/03/02 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
Mysql中常用的join连接方式
2022/05/11 MySQL