基于Javascript实现倒计时功能


Posted in Javascript onFebruary 22, 2016

本文实例实现一个倒计时功能. 倒计时功能, 用在项目的发布时间, 或者某个活动做倒计时等等的突出时间功能的方面.
界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~).

基于Javascript实现倒计时功能

代码名称

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时实现</title>
  <style>
    ul, li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #countdown {
      font-size: 50px;;
      width: 350px;
      margin: 0 auto;
      background-image: none;
      color: #fff;
      padding: 100px;
      font-weight: bolder;
    }
    #countdown ul {
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }
    #countdown ul li{
      display: inline-block;
      margin-left: 10px;
    }
    #countdown ul li:last-child {
      margin-right: 10px;
    }

    #countdown ul li strong {
      text-shadow: 5px 5px 5px #000;
    }
    #countdown ul li strong, #countdown ul li span {
      display: block;
      text-align: center;
    }
    #sec {
      color: #ff0000;
      text-shadow: 5px 5px 2px #ff0000;
    }
  </style>
</head>
<body>
  <div id="countdown">
    <ul>
      <li>
        <strong id="day">00</strong>
        <span>天</span>
      </li>
      <li>:</li>
      <li>
        <strong id="hour">00</strong>
        <span>时</span>
      </li>
      <li>:</li>
      <li>
        <strong id="min">00</strong>
        <span>分</span>
      </li>
      <li>:</li>
      <li>
        <strong id="sec">00</strong>
        <span>秒</span>
      </li>
    </ul>
  </div>
</body>
</html>

下面做Javascript的讲解了.

首先设定一个结束时间,时间通过new Date()来进行创建. 这样才能够计算倒计时的时间.

//结束时间
var t_endtime = new Date("2016-05-22 00:00:00");

然后就是换算规则,规则的换算是常理了.

// 时间换算规则
var t_day = 60 * 60 * 24;
var t_hour = 60 * 60;
var t_min = 60;

再次就是通过setInterval来计算当前时间的对比, 因为时间在一秒一秒的过去, 当前时间的获取就在setInterval中进行计算. 当然还得将计算出的结果显示到界面上.

var ele_day = document.getElementById("day");
var ele_hour = document.getElementById("hour");
var ele_min = document.getElementById("min");
var ele_sec = document.getElementById("sec");

setInterval(function () {
  //获取当前时间
  var t_currenttime = new Date();
  //结束时间 - 当前时间 = 剩余时间
  var t_result = t_endtime.getTime() - t_currenttime.getTime();

  //剩余时间换算
  var t_time = Math.floor( t_result / 1000 );
  var t_result_day = Math.floor( t_time / t_day );
  var t_result_hour = Math.floor( t_time % t_day / t_hour);
  var t_result_min = Math.floor(t_time % t_day % t_hour/ t_min);
  var t_result_sec = Math.floor( t_time % t_day % t_hour % t_min);

  // 将时间小于10的,在值前面加入0;
  if ( t_result_day < 10) {
    t_result_day = "0" + t_result_day;
  }

  if ( t_result_hour < 10) {
    t_result_hour = "0" + t_result_hour;
  }

  if ( t_result_min < 10) {
    t_result_min = "0" + t_result_min;
  }

  if ( t_result_sec < 10) {
    t_result_sec = "0" + t_result_sec;
  }

  //显示到页面上
  ele_day.textContent = t_result_day;
  ele_hour.textContent = t_result_hour;
  ele_min.textContent = t_result_min;
  ele_sec.textContent = t_result_sec;

}, 1000);

很简单, 一个倒计时功能就完成了.

基于Javascript实现倒计时功能

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery 模式对话框终极版实现代码
Sep 28 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
TypeOf这些知识点你了解吗
Feb 21 #Javascript
详谈javascript异步编程
Feb 21 #Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 #Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 #Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 #Javascript
JavaScript编程学习技巧汇总
Feb 21 #Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 #Javascript
You might like
php 获取客户端的真实ip
2009/11/30 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
Redis构建分布式锁
2017/03/28 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
对vue生命周期的深入理解
2020/12/03 Vue.js
Python对象类型及其运算方法(详解)
2017/07/05 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
用python对excel查重
2020/12/07 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
承办会议欢迎词
2014/01/17 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
股权转让意向书
2014/04/01 职场文书
委托书模板
2014/04/04 职场文书
项目合作协议书
2014/09/23 职场文书
2014年新教师工作总结
2014/11/08 职场文书
公司管理建议书
2015/09/14 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电