【澳门葡京】JS之简明秒表的炮制,天时分秒

<!–利用js制作简便的秒表(给出了思路、分析以及源代码)–>

HTML代码:
<div id=”times_wrap” class=”time_num”>
    距离结束时间:
    <div class=”time_w”>
        <b id=”times_d” class=”time”> </b>天
        <b id=”times_h” class=”time”> </b>时
        <b id=”times_m” class=”time”> </b>分
        <b id=”times_s” class=”time”> </b>秒
    </div>
</div>

一.用jquery达成时间沙漏,从从前的某些时间段到现在相差有些天微微时有个别分多少秒?

一.用jquery达成时间计时器,从前边的某部时刻段到未来距离有点天微微时有些分多少秒?

 

JavaScript代码:
<script type=”text/javascript”>
setTimeout(“show_time()”,1000);
var time_wrap = document.getElementByIdx_x(“times_wrap”);
var time_d = document.getElementByIdx_x(“times_d”);
var time_h = document.getElementByIdx_x(“times_h”);
var time_m = document.getElementByIdx_x(“times_m”);
var time_s = document.getElementByIdx_x(“times_s”);

html代码:

html代码:

那段时间刚接触js,想使用所学的知识自制1款简单的秒表。

var time_end = new Date(“二〇一二/10/2九 0八:00:00”);  // 设定甘休时间
time_end = time_end.getTime();

复制代码 代码如下:

复制代码 代码如下:

塑造秒表的笔触如下:

function show_time(){
    var time_now = new Date();  // 获取当前岁月
        time_now = time_now.getTime();
    var time_distance = time_end – time_now;  //
截至时间减去当前时刻
    var int_day, int_hour, int_minute, int_second;
    if(time_distance >= 0){
        // 天时分秒换算
        int_day = Math.floor(time_distance/86400000)
        time_【澳门葡京】JS之简明秒表的炮制,天时分秒。distance -= int_day * 86400000;
        int_hour = Math.floor(time_distance/3600000)
        time_distance -= int_hour * 3600000;
        int_minute = Math.floor(time_distance/60000)
        time_distance -= int_minute * 60000;
        int_second = Math.floor(time_distance/1000)
 
        // 时分秒为单数时、前面加零站位
        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.innerHTML = int_day;
        time_h.innerHTML = int_hour;
        time_m.innerHTML = int_minute;
        time_s.innerHTML = int_second;
        
        setTimeout(“show_time()”,1000);
    }else{
        time_d.innerHTML = time_d.innerHTML;
        time_h.innerHTML = time_h.innerHTML;
        time_m.innerHTML = time_m.innerHTML;
        time_s.innerHTML = time_s.innerHTML;
 
        // clearTimeout(timerID)
    }
};
</script>

<div id=”times_wrap” class=”time_num”>
相差今后光阴:
<div class=”time_w”>
<span id=”time_d” class=”time”> </span >天
<span id=”time_h” class=”time”> </span >时
<span id=”time_m” class=”time”> </span >分
<span id=”time_s” class=”time”> </span >秒
</div>
</div>

<div id=”times_wrap” class=”time_num”>
相至今后岁月:
<div class=”time_w”>
<span id=”time_d” class=”time”> </span >天
<span id=”time_h” class=”time”> </span >时
<span id=”time_m” class=”time”> </span >分
<span id=”time_s” class=”time”> </span >秒
</div>
</div>

一、首先定出效能以及分界面。

 

<script type=”text/javascript”>
$(function(){

<script type=”text/javascript”>
$(function(){

自己的指标是做最简便易行的秒表,由此只须求开始、甘休以及清零的功用。分界面如下图所示:

show_time();

show_time();

未开头运转:澳门葡京 1

});

});

运行中:  澳门葡京 2

function show_time(){
var time_start = new Date(“20一3/10/0100:00:00”).getTime();//设定伊始时间
var time_end = new Date().getTime(); //设定结束时间(等于系统当下光阴)
//总计时间差
var time_distance = time_end – time_start;
if(time_distance > 0){
// 天时分秒换算
var int_day = Math.floor(time_distance/86400000)
time_distance -= int_day * 86400000;

function show_time(){
var time_start = new Date(“201十分三/0十0:00:00”).getTime();//设定开端时间
var time_end = new Date().getTime(); //设定甘休时间(等于系统当下日子)
//总括时间差
var time_distance = time_end – time_start;
if(time_distance > 0){
// 天时分秒换算
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_hour = Math.floor(time_distance/3600000)
time_distance -= int_hour * 3600000;

首先,宗旨措施明确是 setInterval()
方法,用于周期性地展现时间。 因为自身要正确到十ms, 所以设置时间间隔为10。

var int_minute = Math.floor(time_distance/60000)
time_distance -= int_minute * 60000;

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”).html(int_day);
$(“#time_h”).html(int_hour);
$(“#time_m”).html(int_minute);
$(“#time_s”).html(int_second);

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”).html(int_day);
$(“#time_h”).html(int_hour);
$(“#time_m”).html(int_minute);
$(“#time_s”).html(int_second);

 

setTimeout(“show_time()”,1000);

setTimeout(“show_time()”,1000);

A . 小编起来想到的是安装变量
milliSeconds、seconds、minutes 以及 hours 。milliSeconds每十ms递增1, 当
milliSeconds >= 100 时,用milliSeconds模拾0,同时seconds增1。同理,seconds 满60时 minutes 递增一 ,minutes 满 60 时 hours 递增一。

}else{
$(“#time_d”).html(’00’);
$(“#time_h”).html(’00’);
$(“#time_m”).html(’00’);
$(“#time_s”).html(’00’);

}else{
$(“#time_d”).html(’00’);
$(“#time_h”).html(’00’);
$(“#time_m”).html(’00’);
$(“#time_s”).html(’00’);

唯独,为了保障格式的统一性(笔者想要显示 02:0一:二四:0六,而不是显得
二:壹:二4:陆),于是又将多个变量变为几个变量,观念同上。(代码参见本页最后“有延时的秒表”)。

}
}
</script>

}
}
</script>

可是,在运转的时候出现了延期难点,并且该延迟还会举行加多。在时间十分的短时还是能相比较确切地运作,时间壹长,秒表上的光阴就能够和正规时间标称误差非常的大。

html代码: 复制代码 代码如下: div id=”times_wrap” class=”ti…

你恐怕感兴趣的小说:

  • 动用jquery读取html五localstorage的值的办法
  • jQuery访问浏览器本地存款和储蓄cookie、localStorage和sessionStorage的为主用法
  • jQuery
    timers电火花计时器简单利用评释
  • 依靠JQuery.timer插件达成三个计时器
  • 据他们说jquery插件编写countdown沙漏
  • jQuery达成轻易的反应计时器功用实例分析
  • sliderToggle在写jquery的机械漏刻setTimeouter中不见效
  • jQuery完结倒计时成效jQuery达成沙漏效用
  • jquery达成三个大局放大计时器(市四可用)
  • 选择jQuery+localStorage完毕一个简约的机械漏刻示例代码

 

B .
为了让延迟减小,小编又陈设了其余一种艺术(实际上那种情势延迟比上1种更加高)。此时只用八个time变量,来记录触发
start
开关之后所经过的皮秒数(time以十ms为单位,上面包车型大巴a/b/c/d表示飞秒(10ms)、秒、分、时)。为了追求格式的统一性,作者投入了
if 语句,当a/b/c/d小于10时,前边增添 0 占位。

                var a=time%100;
                var b=time%6000/100;
                var c=time%360000/6000;
                var d=time%8640000/360000;

将方案A与B比较。由于A用了嵌套的格局来计量时间,在岁月很短时,方案A决断的次数较少,作用较高;而对此方案B来讲,每便循环必然要经过7回总计,由此,在时光比较短时,
成效以至比A还低。

 

C .
为了与诚实时间共同,不发生其余标称误差,作者又想到了另壹种格局。在JS的Date对象里面,有四个主意叫做
getTime(), 用于再次回到 一9七零 年 一 月 1七日到现在的微秒数。在点击start时,触发 getTime() ,以此时间作为条件,每十飞秒实行二回  getTime()
,让后人减去前者获得绝对时间。那样一来,就全盘化解了与真正时间一齐的标题。

 

下边附上三段代码:

代码A

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>有延迟的秒表</title>
 5         <style type="text/css"></style>        
 6     </head>
 7     <body>
 8         <div id="div1">
 9             00 :
10             00 :
11             00 :
12             00
13         </div>
14         <input id="input1" type="button" value="start" onclick="whenClick();">
15         <input id="input2" type="button" value="clear" onclick="clear1();">
16         <script  type="text/javascript">
17             var milliSeconds1 = document.getElementById("span41");
18             var milliSeconds0 = document.getElementById("span40");
19             var seconds1 = document.getElementById("span31");
20             var seconds0 = document.getElementById("span30");
21             var minutes1 = document.getElementById("span21");
22             var minutes0 = document.getElementById("span20");
23             var hours1 = document.getElementById("span11");
24             var hours0 = document.getElementById("span10");
25             var flag;
26 
27             function whenClick(){//  开始/暂停
28                 var inputValue = document.getElementById("input1");
29                 if(inputValue.value=="start"||inputValue.value=="continue"){
30                     inputValue.value=" stop";
31                     start1();
32                 }
33                 else {
34                     inputValue.value="continue";
35                     stop1();
36                 }
37             }
38             
39             function clear1(){//  清零
40                 stop1();
41                 milliSeconds1.innerHTML = milliSeconds0.innerHTML = 
42                 seconds1.innerHTML = seconds0.innerHTML = minutes1.innerHTML = 
43                 minutes0.innerHTML = hours1.innerHTML = hours0.innerHTML = 0;
44                 document.getElementById("input1").value = "start";
45             }
46 
47             function start1(){//  开始/继续
48                 flag = setInterval("timeIncrement();",10);
49             }
50 
51             function timeIncrement(){
52                 milliSeconds1.innerHTML++;
53                 if(milliSeconds1.innerHTML>=10){
54                     milliSeconds1.innerHTML%=10;
55                     milliSeconds0.innerHTML++;
56                     if(milliSeconds0.innerHTML>=10){
57                         milliSeconds0.innerHTML%=10;
58                         seconds1.innerHTML++;
59                         if(seconds1.innerHTML>=10){
60                             seconds1.innerHTML%=10;
61                             seconds0.innerHTML++;
62                             if(seconds0.innerHTML>=6){
63                                 seconds0.innerHTML%=6
64                                 minutes1.innerHTML++;
65                                 if(minutes1.innerHTML>=10){
66                                     minutes1.innerHTML%=10;
67                                     minutes0.innerHTML++;
68                                     if(minutes0.innerHTML>=6){
69                                         minute0.innerHTML%=6;
70                                         hours1.innerHTML++;
71                                         if(hours1.innerHTML>=10){
72                                             hours1.innerHTML%=10;
73                                             hours0.innerHTML++;
74                                         }
75                                     }
76                                 }
77                             }
78                         }
79                     }
80                 }
81             }
82 
83             function stop1(){//  暂停/停止
84                 clearInterval(flag);
85             }
86 
87         </script>
88     </body>
89 </html>

代码B

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>仍然有延迟的秒表</title>
 5         <style type="text/css"></style>        
 6     </head>
 7     <body>
 8         <div id="div1">
 9             00 :
10             00 :
11             00 :
12             00
13         </div>
14         <input id="input1" type="button" value="start" onclick="whenClick();">
15         <input id="input2" type="button" value="clear" onclick="clear1();">
16         <script  type="text/javascript">
17             var milliSeconds1 = document.getElementById("span4");
18             var seconds1 = document.getElementById("span3");
19             var minutes1 = document.getElementById("span2");
20             var hours1 = document.getElementById("span1");
21             var time = 0;
22             var flag;
23 
24             function whenClick(){//  开始/暂停
25                 var inputValue = document.getElementById("input1");
26                 if(inputValue.value=="start"||inputValue.value=="continue"){
27                     inputValue.value=" stop";
28                     start1();
29                 }
30                 else {
31                     inputValue.value="continue";
32                     stop1();
33                 }
34             }
35             
36             function clear1(){//  清零
37                 stop1();
38                 milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";
39                 time=0;
40                 document.getElementById("input1").value = "start";
41             }
42 
43             function start1(){//  开始/继续
44                 flag = setInterval("timeIncrement();",10);
45             }
46 
47             function timeIncrement(){
48                 time++;
49                 var a=time%100;
50                 var b=time%6000/100;
51                 var c=time%360000/6000;
52                 var d=time%8640000/360000;
53                 milliSeconds1.innerHTML=(a<10)?('0'+a):a;
54                 seconds1.innerHTML=(b<10)?('0'+Math.floor(b)):(Math.floor(b));
55                 minutes1.innerHTML=(c<10)?('0'+Math.floor(c)):(Math.floor(c));
56                 hours1.innerHTML=(d<10)?('0'+Math.floor(d)):(Math.floor(d));
57             }
58 
59             function stop1(){//  暂停/停止
60                 clearInterval(flag);
61             }
62 
63         </script>
64     </body>
65 </html>

代码C(与时间同步的代码)

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>秒表</title>
 5         <style type="text/css"></style>        
 6     </head>
 7     <body>
 8         <div id="div1">
 9             00 :
10             00 :
11             00 :
12             00
13         </div>
14         <input id="input1" type="button" value="start" onclick="whenClick();">
15         <input id="input2" type="button" value="clear" onclick="clear1();">
16         <script  type="text/javascript">
17             var milliSeconds1 = document.getElementById("span4");
18             var seconds1 = document.getElementById("span3");
19             var minutes1 = document.getElementById("span2");
20             var hours1 = document.getElementById("span1");
21             var time=0;
22             var pre_time=0;
23             var intervals=0;
24             var pre_intervals=0;
25             var flag;
26 
27             function whenClick(){//  开始/暂停
28                 var inputValue = document.getElementById("input1");
29                 if(inputValue.value=="start"||inputValue.value=="continue"){
30                     var date= new Date();
31                     time = date.getTime();
32                     pre_time=time;
33                     inputValue.value="stop ";
34                     start1();
35                 }
36                 else {
37                     inputValue.value="continue";
38                     stop1();
39                 }
40             }
41             
42             function clear1(){//  清零
43                 stop1();
44                 milliSeconds1.innerHTML = seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";
45                 time=0;
46                 pre_time=0;
47                 intervals=0;
48                 pre_intervals=0;
49                 document.getElementById("input1").value = "start";
50             }
51 
52             function start1(){//  开始/继续
53                 flag = setInterval("timeIncrement();",10);
54             }
55             
56             function timeIncrement(){
57                 date = new Date();
58                 intervals=date.getTime()-time+pre_intervals;
59                 var a=intervals%1000/10;
60                 var b=intervals%60000/1000;
61                 var c=intervals%3600000/60000;
62                 var d=intervals/3600000;
63                 milliSeconds1.innerHTML=(a<10)?('0'+Math.floor(a)):(Math.floor(a));
64                 seconds1.innerHTML=(b<10)?('0'+Math.floor(b)):(Math.floor(b));
65                 minutes1.innerHTML=(c<10)?('0'+Math.floor(c)):(Math.floor(c));
66                 hours1.innerHTML=(d<10)?('0'+Math.floor(d)):(Math.floor(d));
67             }
68 
69             function stop1(){//  暂停/停止
70                 date = new Date();
71                 pre_intervals += date.getTime()-pre_time;
72                 clearInterval(flag);
73             }
74 
75         </script>
76     </body>
77 </html>

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website