jquery秒表代码（js 秒表）

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

本文目录一览：

• 1、求一款jquery的计时代码
• 2、jquery实现倒计时效果
• 3、jquery倒计时代码是怎么写的

求一款jquery的计时代码

$('.alarm-button').click(function(){

    // Show the dialog

    dialog.trigger('show');

});

dialog.find('.close').click(function(){

    dialog.trigger('hide')

});

dialog.click(function(e){

    // When the overlay is clicked, 

    // hide the dialog.

    if($(e.target).is('.overlay')){

        // This check is need to prevent

        // bubbled up events from hiding the dialog

        dialog.trigger('hide');

    }

});

alarm_set.click(function(){

    var valid = true, after = 0,

        to_seconds = [3600, 60, 1];

   dialog.find('input').each(function(i){

       // Using the validity property in HTML5-enabled browsers:

        if(this.validity  !this.validity.valid){

            // The input field contains something other than a digit,            // or a number less than the min value

            valid = false;

            this.focus();

            return false;

        }

        after += to_seconds[i] * parseInt(parseInt(this.value));

    });

    if(!valid){

        alert('Please enter a valid number!');

        return;

    }

    if(after  1){

        alert('Please choose a time in the future!');

        return; 

    }

    alarm_counter = after;

    dialog.trigger('hide');

});

alarm_clear.click(function(){

    alarm_counter = -1;

    dialog.trigger('hide');

});

// Custom events to keep the code clean

dialog.on('hide',function(){

    dialog.fadeOut();

}).on('show',function(){

    // Calculate how much time is left for the alarm to go off.

    var hours = 0, minutes = 0, seconds = 0, tmp = 0;

    if(alarm_counter  0){

        // There is an alarm set, calculate the remaining time

        tmp = alarm_counter;

        hours = Math.floor(tmp/3600);

        tmp = tmp%3600;

        minutes = Math.floor(tmp/60);

        tmp = tmp%60;

        seconds = tmp;

    }

    // Update the input fields

    dialog.find('input').eq(0).val(hours).end().eq(1).val(minutes).end().eq(2).val(seconds);

    dialog.fadeIn();

});

time_is_up.click(function(){

    time_is_up.fadeOut();

});

实现效果：

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

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 秒表、jquery秒表代码的信息别忘了在本站进行查找喔。