编程 Javascript

基于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实现倒计时功能

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery ReferenceError: $ is not defined 错误的处理办法

May 10 Javascript

javascript 对象数组根据对象object key的值排序

Mar 09 Javascript

js实现透明度渐变效果的方法

Apr 10 Javascript

jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介

Dec 03 Javascript

jQuery实现按钮点击遮罩加载及处理完后恢复的效果

Jun 07 Javascript

jQuery插件zTree实现的多选树效果示例

Mar 08 Javascript

JS实现的点击表头排序功能示例

Mar 27 Javascript

vue2.0结合Element实现select动态控制input禁用实例

May 12 Javascript

使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

Jul 24 Javascript

JavaScript使用小插件实现倒计时的方法讲解

Mar 11 Javascript

关于AOP在JS中的实现与应用详解

May 06 Javascript

浅谈vue2的$refs在vue3组合式API中的替代方法

Apr 18 Vue.js

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