jquery代码实现秒表（js实现秒表）

本篇文章给大家谈谈jquery代码实现秒表，以及js实现秒表对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、jquery实现倒计时效果
• 2、用js或jquery怎么实现一个数字随时间随机增加？
• 3、jquery如何实现倒计时效果

jquery实现倒计时效果

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

html

head

title/title

script type="text/javascript"

window.onload = Watch;//加载时调用Watch()函数

function Watch() {

var span = document.createElement("sapn");

span.innerHTML = "0:01";

var s = 1;//用来记录秒,因为需求是从1开始的。

var m = 0;//用来记录分钟

var w = setInterval(function () {

s++;

if (s == 60) {//当秒跑到60时，分钟加1，秒钟从0开始。

m++;

s = 0;

}

span.innerHTML = m + ":" + (s 10 ? "0" + s : s); //显示时间(秒小于10时，前补0)

if (m == 5) { clearInterval(w); } //到过5分钟时停止

}, 1000); //每1000毫秒即1秒执行一次此函数

document.getElementById("Show").appendChild(span);//显示到页面上

}

/script

/head

body

div id="Show" style="text-align:center"/div

/body

/html

用js或jquery怎么实现一个数字随时间随机增加？

在后台部署定时任务吧，前台计时器不实际：

页面刷新意味着重新计时（计时器被重置）

没有人会在一个页面停留那么长时间（2小时）

用计时器显得有点……，当然了，一定要前台使用JQuery的话，部署一个函数来计算就好：

加载的时候读取数值基数，然后根据当前时间直接计算出最终变动的值，最后显示即可。

最好的做法还是后台处理，前台请求的数据就是变动后的数值（不管是谁，何时请求？结果都是一样的）。

jquery如何实现倒计时效果

首先获取当前时间与目标时间的时间差，然后通过定时器更新这个时间差，就实现了倒计时效果。实现上述过程需要以下两个函数：

getTime()       // 返回距1970年1月1日之间的毫秒数，这样将时间差（毫秒数）÷3600÷24即为天数，时分秒类似

setTimeout(code,millisec);    // 在指定的毫秒数后调用函数

实例演示如下

创建Html元素

div class="box"

span距离2015年国庆节还剩：/spanbr

div class="content"

input type="text" id="time_d"天input type="text" id="time_h"时input type="text" id="time_m"分input type="text" id="time_s"秒

/div

/div

设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

div.boxspan{color:#999;font-style:italic;}

div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

input[type='text']{width:45px;height:35px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}

编写jquery代码

$(function(){ 

show_time();

}); 

function show_time(){ 

var time_start = new Date().getTime(); //设定当前时间

var time_end =  new Date("2015/10/01 00:00:00").getTime(); //设定目标时间

// 计算时间差 

var time_distance = time_end - time_start; 

// 天

var int_day = Math.floor(time_distance/86400000) 

time_distance -= int_day * 86400000; 

// 时

var int_hour = Math.floor(time_distance/3600000) 

time_distance -= int_hour * 3600000; 

// 分

var int_minute = Math.floor(time_distance/60000) 

time_distance -= int_minute * 60000; 

// 秒 

var int_second = Math.floor(time_distance/1000) 

// 时分秒为单数时、前面加零 

if(int_day  10){ 

int_day = "0" + int_day; 

} 

if(int_hour  10){ 

int_hour = "0" + int_hour; 

} 

if(int_minute  10){ 

int_minute = "0" + int_minute; 

} 

if(int_second  10){

int_second = "0" + int_second; 

} 

// 显示时间 

$("#time_d").val(int_day); 

$("#time_h").val(int_hour); 

$("#time_m").val(int_minute); 

$("#time_s").val(int_second); 

// 设置定时器

setTimeout("show_time()",1000); 

}

观察效果

某个时刻的截图

几秒后的截图

关于jquery代码实现秒表和js实现秒表的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。