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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
详解javascript中的Error对象
Apr 25 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python3匿名函数用法示例
2018/07/25 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
护理专业自荐信
2013/12/03 职场文书
办理生育手续介绍信
2014/01/14 职场文书
初中英语课后反思
2014/04/25 职场文书
村安全生产责任书
2014/08/25 职场文书
七一建党日演讲稿
2014/09/05 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
社区节水倡议书
2015/04/29 职场文书
离婚协议书范文2016
2016/03/18 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
zabbix配置nginx监控的实现
2022/05/25 Servers