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获取flash加载的百分比的实现代码
May 25 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
Vue动态组件实例解析
Aug 20 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php判断linux下程序问题实例
2015/07/09 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
javascript数组排序汇总
2015/07/07 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
JS实现横向轮播图(初级版)
2020/06/24 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
python万年历实现代码 含运行结果
2017/05/20 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
python和opencv实现抠图
2018/07/18 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
Python3中的bytes和str类型详解
2019/05/02 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
django框架两个使用模板实例
2019/12/11 Python
python关于倒排列的知识点总结
2020/10/13 Python
武汉高蓝德国际.net机试
2016/06/24 面试题
现金会计岗位职责
2013/12/05 职场文书
低碳环保倡议书
2014/04/14 职场文书
英语专业自荐书
2014/06/13 职场文书
课外活动总结范文
2014/07/09 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
Win11软件图标固定到任务栏
2022/04/19 数码科技