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+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
JS数组的常见用法实例
Feb 10 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
基于Vue CSR的微前端实现方案实践
May 27 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
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
详解Python中break语句的用法
2015/05/14 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Python实现弹球小游戏
2020/08/01 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
初三学生个人自我评定
2014/04/06 职场文书
信息管理专业自荐书
2014/06/05 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
项目安全员岗位职责
2015/02/15 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python