基于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 相关文章推荐
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
jQuery技巧总结
Jan 01 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
vue地区选择组件教程详解
May 04 Javascript
js实现简单选项卡制作
Aug 05 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
桌面中心(三)修改数据库
2006/10/09 PHP
PHP 读取和编写 XML
2014/11/19 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
Javascript缓存API
2016/06/14 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python 对象中的数据类型
2017/05/13 Python
用python与文件进行交互的方法
2018/03/01 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
python通过实例讲解反射机制
2019/10/17 Python
python3.4中清屏的处理方法
2020/07/06 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
给客户的道歉信
2014/01/13 职场文书
在校生自我鉴定
2014/01/23 职场文书
遗失说明具结保证书
2015/02/26 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
汉语拼音教学反思
2016/02/22 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
python神经网络Xception模型
2022/05/06 Python
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技