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代码
Dec 01 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 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
239军机修复记
2021/03/02 无线电
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
python实现解数独程序代码
2017/04/12 Python
python url 参数修改方法
2018/12/26 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
典型事迹材料范文
2014/12/29 职场文书
开幕式邀请函
2015/01/31 职场文书