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 获得选中文本内容的方法
Feb 15 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
基于vue中的scoped坑点解说
Sep 04 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中使用Oracle数据库(2)
2006/10/09 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
AJAX的使用方法详解
2017/04/29 PHP
JavaScript静态的动态
2006/09/18 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
wxpython布局的实现方法
2019/11/01 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python range与enumerate函数区别解析
2020/02/28 Python
python 实现逻辑回归
2020/12/30 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
男方父母证婚词
2014/01/12 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS