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继承的实现
Oct 24 Javascript
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
openlayers4实现点动态扩散
Aug 17 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 Try Catch异常测试
2009/03/01 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
Python写的服务监控程序实例
2015/01/31 Python
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
Python random模块用法解析及简单示例
2017/12/18 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
华为的Java面试题
2014/03/07 面试题
大学新生欢迎词
2014/01/10 职场文书
海飞丝的广告词
2014/03/20 职场文书
高中同学会活动方案
2014/08/14 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript