需要做一个功能,给特定的活动或者商品添加一个倒计时提示,在网上找了好些方法,总结了比较好的一些方法,以备后用:

1. 比较长时间的倒计时(如:距离2014年还有0年, 0月, 30天, 9小时, 41分, 17秒)

 <script type="text/javascript">
startclock();
var timerID = null;
var timerRunning = false;
function showtime() {
Today = new Date();
var year = Today.getFullYear();
document.getElementById("next_yeat").innerHTML = year + 1;
var NowHour = Today.getHours();
var NowMinute = Today.getMinutes();
var NowMonth = Today.getMonth();
var NowDate = Today.getDate();
var NowYear = Today.getYear();
var NowSecond = Today.getSeconds();
if (NowYear <2000)
NowYear=1900+NowYear;
Today = null;
Hourleft = 23 - NowHour
Minuteleft = 59 - NowMinute
Secondleft = 59 - NowSecond
Yearleft = year - NowYear
Monthleft = 12 - NowMonth - 1
Dateleft = 31 - NowDate
if (Secondleft<0)
{
Secondleft=60+Secondleft;
Minuteleft=Minuteleft-1;
}
if (Minuteleft<0)
{
Minuteleft=60+Minuteleft;
Hourleft=Hourleft-1;
}
if (Hourleft<0)
{
Hourleft=24+Hourleft;
Dateleft=Dateleft-1;
}
if (Dateleft<0)
{
Dateleft=31+Dateleft;
Monthleft=Monthleft-1;
}
if (Monthleft<0)
{
Monthleft=12+Monthleft;
Yearleft=Yearleft-1;
}
Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒';
document.form1.left.value=Temp;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
var timerID = null;
var timerRunning = false;
function stopclock () {
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () {
stopclock();
showtime();
}
// -->
</script>

2. 小时倒计时(如:距离结束还有 42 分 5 秒)

 <script type="text/javascript">
<!--
//一个小时,按秒计算,可以自己调整时间
var maxtime = 60*60
function CountDown()
{
if(maxtime>=0)
{
minutes = Math.floor(maxtime/60);
seconds = Math.floor(maxtime%60);
msg = "距离结束还有 "+minutes+" 分 "+seconds+" 秒";
document.all["timer"].innerHTML=msg;
if(maxtime == 5*60) alert('注意,还有5分钟!');
--maxtime;
}
else
{
clearInterval(timer);
alert("时间到,结束!");
}
}
timer = setInterval("CountDown()",1000);
//-->
</script>

3. 最简倒计时(如:现在离 2014 还有: 30 天)

 <script Language="JavaScript">
<!-- Begin
  var timedate= new Date("January 14,2012");
  var times="2012";
  var now = new Date();
  var date = timedate.getTime() - now.getTime();
  var time = Math.floor(date / (1000 * 60 * 60 * 24));
  if (time >= 0) ;
document.write("<p>现在离 "+times+" 还有: <b>"+time +"</b> 天</p>");
// End -->
</script>

4. 秒表功能(如:00:01:11:00)

 <script type="text/javascript">
var normalelapse = 100;
var nextelapse = normalelapse;
var counter;
var startTime;
var start = clock.innerText;
var finish = "00:00:00:00";
var timer = null;
// 开始运行
function run() {
startB.disabled = true;
endB.disabled = false;
counter = 0;
// 初始化开始时间
startTime = new Date().valueOf(); // nextelapse是定时时间, 初始时为100毫秒
// 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行
timer = window.setInterval("onTimer()", nextelapse);
}
// 停止运行
function stop() {
startB.disabled = false;
endB.disabled = true;
window.clearTimeout(timer);
}
window.onload = function() {
endB.disabled = true;
}
// 倒计时函数
function onTimer()
{
if (start == finish)
{
window.clearInterval(timer);
alert("time is up!");
return;
}
var hms = new String(start).split(":");
var ms = new Number(hms[3]);
var s = new Number(hms[2]);
var m = new Number(hms[1]);
var h = new Number(hms[0]);
ms -= 10;
if (ms < 0)
{
ms = 90;
s -= 1;
if (s < 0)
{
s = 59;
m -= 1;
}
if (m < 0)
{
m = 59;
h -= 1;
}
}
var ms = ms < 10 ? ("0" + ms) : ms;
var ss = s < 10 ? ("0" + s) : s;
var sm = m < 10 ? ("0" + m) : m;
var sh = h < 10 ? ("0" + h) : h;
start = sh + ":" + sm + ":" + ss + ":" + ms;
clock.innerText = start; // 清除上一次的定时器
window.clearInterval(timer);
// 自校验系统时间得到时间差, 并由此得到下次所启动的新定时器的时间nextelapse
counter++;
var counterSecs = counter * 100;
var elapseSecs = new Date().valueOf() - startTime;
var diffSecs = counterSecs - elapseSecs;
nextelapse = normalelapse + diffSecs;
diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;
next.value = "nextelapse = " + nextelapse;
if (nextelapse < 0) nextelapse = 0;
// 启动新的定时器
timer = window.setInterval("onTimer()", nextelapse);
}
</script>

原文网址:http://www.nowamagic.net/librarys/veda/detail/421

比较全的JavaScript倒计时脚本[xyytit]的更多相关文章

  1. 比较全的JavaScript倒计时脚本

    JavaScript倒计时在Web中用得非常广泛,比如常见的团购啊.还有什么值得期待的事情,都可以用到倒计时.现在举了四个例子,比如时间长的倒计时,小时倒计时,最简的倒计时,还有秒表等等,应该可以满足 ...

  2. JavaScript倒计时脚本

    JavaScript倒计时在Web中用得非常广泛,比如常见的团购啊.还有什么值得期待的事情,都可以用到倒计时.现在举了四个例子,比如时间长的倒计时,小时倒计时,最简的倒计时,还有秒表等等,应该可以满足 ...

  3. javascript ajax 脚本跨域调用全解析

    javascript ajax 脚本跨域调用全解析 今天终于有点时间研究了一下javsscript ajax 脚本跨域调用的问题,先在网上随便搜了一下找到一些解决的办法,但是都比较复杂.由是转到jqu ...

  4. 20个非常棒的jQuery倒计时脚本

    使用jQuery倒计时插件可能是最简单最好的方式添加动态和交互式倒数计时器到您的网站上.我相信你已经注意到了,例如倒计时功能运行网站,显示倒计时,直到一个大事件.当网站正在维护,告诉用户什么时候回来, ...

  5. javascript(脚本语言)

    javascript(脚本语言)一.注释语法:1.单行注释 //注释内容2.多行注释 /*注释内容*/二.输出语法js语言格式,尽量靠下写,属双标签<script type=”text/java ...

  6. 在C#中调用VBScript和JavaScript等脚本的实现

    在C#中调用VBScript.JavaScript等脚本的实现 作者:郑佐 2004-04-26 以前在做工作流(workflow)项目的时候,里面有一项就是在用户制定流程定义时可以编写脚本来控制活动 ...

  7. 什么是MEAN全堆栈javascript开发框架

    什么是MEAN全堆栈javascript开发框架 使用JavaScript能够完整迅速做出Web应用程序,目前一套工具包括MongoDB.ExpressJS,AngularJS和Node.js越来越受 ...

  8. JavaScript HTML5脚本编程——“历史状态管理”的注意要点

    历史状态管理是现代Web应用开发中的一个难点.在现代Web应用中,用户的每次操作不一定会打开一个全新的页面,因此"后退"和"前进"按钮也就失去了作用,导致用户很 ...

  9. Javascript倒计时页面跳转

    在js中实现页面定时跳转我们要使用setInterval或setTimeOut函数,还可以使用页面的meta实现. 例1: <script type="text/javascript& ...

随机推荐

  1. clang编译mysql(Ubuntu10 64位)

    编译安装mysql(Ubuntu10 64位) http://www.cnblogs.com/2018/p/3482259.html 这个介绍了gcc形式编译安装mysql 那我们使用clang进行编 ...

  2. ReflectUitls类的编写和对反射机制的解析

    ReflectUitls类的编写和对反射机制的解析 反射相关的类 反射相关的类,最基本的当然是Class类. 获取了Class对象之后,就可以接着生成对象实例.调用方法.查看字段等等. 字段(Fiel ...

  3. Android Testing学习02 HelloTesting 项目建立与执行

    Android Testing学习02 HelloTesting 项目建立与执行 Android测试,分为待测试的项目和测试项目,这两个项目会生成两个独立的apk,但是内部,它们会共享同一个进程. 下 ...

  4. Android 实现图片画画板

    本文主要讲述了Android 实现图片画画板 设计项目布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk ...

  5. ios 颜色转图片

    - (UIImage *)imageWithColor:(UIColor*) color{    CGRect rect=CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);    ...

  6. 利用听云Server和听云Network实测Kubernetes和Mesos在高并发下的网络性能

    文章出自:听云博客 随着公司业务的不断增长,我们的应用数量也有了爆发式增长.伴随着应用爆发式的增长,管理的难度也随之加大.如何在业务爆发增长的同时快速完成扩容成了很大的挑战.Docker的横空出世恰巧 ...

  7. JAVA IO 字节流与字符流

    文章出自:听云博客 题主将以三个章节的篇幅来讲解JAVA IO的内容 . 第一节JAVA IO包的框架体系和源码分析,第二节,序列化反序列化和IO的设计模块,第三节异步IO. 本文是第一节.     ...

  8. iOS---UISearchBar限制输入字数

    - (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText // called when text ...

  9. iOS开发之AFN的基本使用

    本篇将从四个方面对iOS开发中经常使用到的AFNetworking框架进行讲解: 一.什么是 AFN 二.为什么要使用 AFN 三.AFN 怎么用 三.AFN和ASI的区别 一.什么是 AFN AFN ...

  10. HTML5设计网页熔岩灯导航(navigation bar)插件 已经加上完整源代码

    导航栏(navigation bar): 1.指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用. 2.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...