脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现倒计时功能

基于Javascript实现倒计时功能

 更新时间：2016年02月22日 08:44:47   投稿：lijiao  
这篇文章主要为大家详细介绍了基于Javascript实现倒计时功能的相关资料，感兴趣的小伙伴们可以参考一下

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

代码名称

<!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验证电子邮箱的函数

    本文主要是javascript使用正则来验证电子邮箱的一个函数分享，很简单，但也很使用，在很多地方都可以用的到。
    2014-08-08
  • js 巧妙去除数组中的重复项

    js 巧妙去除数组中的重复项

    最近, 我在看YAHOO.util.YUILoader类的源码, 其中有个排除数组重复项的方法, 让我觉得甚为巧妙, 这里分享下…
    2010-01-01
  • 一次围绕setTimeout的前端面试经验分享

    一次围绕setTimeout的前端面试经验分享

    这篇文章主要跟大家分享了一次围绕setTimeout展开的前端面试经验，是一篇有意思的围绕setTimeout展开的前端开发考题，考察了for循环、定时器setTimeout()、JavaScript闭包、匿名函数和Promise等，一不小心你可能就会做错，快来看看你有没有掌握了上面的知识。
    2017-06-06
  • 详解TypeScript的基础类型

    详解TypeScript的基础类型

    这篇文章主要为大家介绍了TypeScript的基础类型，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01
  • 判断在css加载完毕后执行后续代码示例

    判断在css加载完毕后执行后续代码示例

    这篇文章主要介绍了在css加载完毕后执行后续代码的方法,需要的朋友可以参考下
    2014-09-09
  • javascript操作向表格中动态加载数据

    javascript操作向表格中动态加载数据

    这篇文章主要为大家详细介绍了javascript操作向表格中动态加载数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Jquery 常用方法一览表(集合)

    Jquery 常用方法一览表(集合)

    之前脚本之家发过相关的文章，这里又是一篇关于jquery常用方法的收集整理，我们给放到一起，学习jquery的朋友可以参考下。
    2010-03-03
  • javascript 补零 函数集合

    javascript 补零 函数集合

    有时候我们需要对日期不足两位进行补零操作，或对一些数字不足多少位就补零。下面的函数就非常实用了，大家可以根据需要选择。
    2009-03-03
  • javascript去除字符串中所有标点符号和提取纯文本的正则

    javascript去除字符串中所有标点符号和提取纯文本的正则

    这篇文章主要介绍了javascript去除字符串中所有标点符号和提取纯文本的正则,需要的朋友可以参考下
    2014-06-06
  • JavaScript 报表展示实现代码

    JavaScript 报表展示实现代码

    以下是从网上找到的一段JavaScript实现图形报表的代码，对于想客户端显示报表的朋友可以参考下。
    2009-12-12

最新评论