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 多浏览器分别判断代码
Apr 01 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
PHP教程 预定义变量
2009/10/23 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
JS location几个方法小姐
2008/07/09 Javascript
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
JavaScript基础心法 数据类型
2018/03/05 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python函数学习笔记
2008/10/07 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python实现大转盘抽奖效果
2019/01/22 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
python爬虫---requests库的用法详解
2020/09/28 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
求职简历自我评价范例
2014/03/12 职场文书
霸王洗发水广告词
2014/03/14 职场文书
社团个人总结范文
2015/03/05 职场文书
会计试用期工作总结2015
2015/05/28 职场文书