工作中经常用到倒计时的功能，最近在整理之前做的项目的时候，发现自己写过一个倒计时的功能的效果，这里和大家分享下！实现这个功能是用原生js写的，不需要加载额外的库文件！功能比较简单，但是可以在此基础上扩展程序，得到想要的效果！

这里附上效果图先：

效果比较简单，只是简单的加了下样式！

代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>倒计时功能</title>

    <style type="text/css">

       #box{width:300px; height:60px; background:#000;margin:0 auto;}

       #box ul{margin:0; padding:0;width:300px; height:60px; clear:both;}

       #box ul li{list-style:none; float:left;width:100px; height:60px; text-align:center; font:40px/60px 微软雅黑; color:#fff;}

       .fr{float:right;}

    </style>

</head>

<body>

  <div id="box">

      <ul>

         <li id="hourseCon">00</li>

         <li id="minuteCon">00</li>

         <li id="secondCon">00</li>

      </ul>

  </div>

</body>

</html>

<script type="text/javascript">

window.onload = function(){

var timer;

function ShowCountDown(year,month,day,hourss)

{

    var now = new Date()

    var endDate = new Date(year, month-1, day ,hourss);

    var leftTime=parseInt(endDate.getTime())-parseInt(now.getTime());

    if(leftTime <= 0)

    {

      leftTime = 0;

    }

    var leftsecond = parseInt(leftTime/1000);

    var hour = Math.floor(leftsecond/3600).toString();

    var minute = Math.floor((leftsecond-hour*3600)/60).toString();

    var second = Math.floor(leftsecond-hour*3600-minute*60).toString();

    var getHourseC = document.getElementById("hourseCon");

    var getMinuteC = document.getElementById("minuteCon");

    var getSecongC = document.getElementById("secondCon");

    getHourseC.innerHTML = (hour.length < 2) ? '0'+ hour : hour;

    getMinuteC.innerHTML = (minute.length < 2) ? '0'+ minute : minute;

    getSecongC.innerHTML = (second.length < 2) ? '0'+ second : second;

}

//开启计时功能

//timestring 时间戳（这里传过来的是2014-9-25） hours是截止的时间（这里以小时为例）

function startCount(timestring,hours)

{

       var timef = timestring.toString();

       var ss = [];

       ss = timef.split("-");

       var year = ss[0];

       var month = ss[1];

       var day = ss[2];

       var hour = hours;

       timer = window.setInterval(function()

            {

               day = parseInt(ss[2]);

               ShowCountDown(year,month,day,hour);

               var hourhtml = document.getElementById("hourseCon").innerHTML;

               var minutehtml = document.getElementById("minuteCon").innerHTML;

               var secondhtml = document.getElementById("secondCon").innerHTML;

                //倒计时结束

                  if(hourhtml == '00' && minutehtml == '00' && secondhtml == '00')

                   {

                       window.clearInterval(timer);

                   }

            }, 1000);

    }

    startCount('2014-9-28',16);

}

</script>

上面的js做了一点简单的处理，当位数只有1位的时候会在前面自动补0!

js实现是倒计时功能的更多相关文章

  1. 模块：js实现一个倒计时功能

    1.给显示内容加样式 <style> #p1{font-size: large; color: red;} </style> 2.客户端页面 <div id=" ...

  2. js之验证码倒计时功能

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

  3. php和js一起实现倒计时功能

    里获取的php服务端的时间 纯JS是获取客服端时间! <?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set('PRC'); //date_ ...

  4. js 10秒倒计时 功能

    请等待<span id=</span>秒 <script type="text/javascript"> function run(){ var s ...

  5. 使用JS获取两个时间差(JS写一个倒计时功能)

    <body onload="myFunction()"> <p id="demo"></p> <script> ...

  6. JS实现为控件添加倒计时功能

    一.概述 在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个 ...

  7. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

  8. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  9. js 倒计时功能，获取当前时间的年月日，时分秒

    一.实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <bo ...

随机推荐

  1. hdu 3683 Gomoku （模拟、搜索）

    Gomoku Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  2. 新秀学习SSH（十四）——Spring集装箱AOP其原理——动态代理

    之前写了一篇文章IOC该博客--<Spring容器IOC解析及简单实现>,今天再来聊聊AOP.大家都知道Spring的两大特性是IOC和AOP. IOC负责将对象动态的注入到容器,从而达到 ...

  3. MBProgressHUD 问题

    1.MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithWindow:[UIApplication sharedApplication].keyWi ...

  4. JavaScript语言核心之词法结构

    编程语言的词法结构是一套基础性规则,用来描述如何使用这门语言来编写程序.作为语法的基础,它规定了诸如变量名是什么样的.怎么写注释,以及程序语句之间如何分割的等规则. 1.1字符集 JavaScript ...

  5. 【年终分享】彩票数据预测算法(一)：离散型马尔可夫链模型实现【附C#代码】

    原文:[年终分享]彩票数据预测算法(一):离散型马尔可夫链模型实现[附C#代码] 前言:彩票是一个坑,千万不要往里面跳.任何预测彩票的方法都不可能100%,都只能说比你盲目去买要多那么一些机会而已. ...

  6. java回调机制及其实现（转）

    1. 什么是回调函数 回调函数,顾名思义,用于回调的函数.回调函数只是一个功能片段,由用户按照回调函数调用约定来实现的一个函数.回调函数是一个工作流的一部分,由工作流来决定函数的调用(回调)时机.回调 ...

  7. Xcode-5.1.1更改文件盯作者

    原来的文件默认是用户开机时的username ,网上说什么改通讯录事实上都是不正确的. 1.首先打开偏好设置,选择用户群组 2.进入用户界面 改动全名.此时要求你输入用户的password才干改动us ...

  8. 使用 CodeIgniter 框架快速开发 PHP 应用(三)

    原文:使用 CodeIgniter 框架快速开发 PHP 应用(三) 分析网站结构既然我们已经安装 CI ,我们开始了解它如何工作.读者已经知道 CI 实现了MVC式样. 通过对目录和文件的内容进行分 ...

  9. MySQL定义和变量赋值

    变量可以在子程序(性能.存储过程.匿名块)声明和使用.这些变量的范围是在BEGIN...END规划. 变量的定义 语法格式: DECLARE var_name [, var_name]... data ...

  10. Instruments-Automation: 通过命令行执行测试用例

    为了实现该脚本的自己主动定时执行.我们需要开始在命令行和脚本,详细代码如下所示的: instruments -t /Applications/Xcode.app/Contents/Applicatio ...