timer.html
4.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>yugi</title>
<script src="../src/js/jquery-1.7.1.js"></script>
<!-- <script language="javascript">
var se, m = 0,
h = 0,
s = 0,
ss = 1;
function second() {
if ((ss % 100) == 0) {
s += 1;
ss = 1;
}
if (s > 0 && (s % 60) == 0) {
m += 1;
s = 0;
}
if (m > 0 && (m % 60) == 0) {
h += 1;
m = 0;
}
t = h + "时" + m + "分" + s + "秒" + ss + "毫秒"; //时分秒运算
document.getElementById("showtime").value = t; //这有一个给id为showtime的input赋值的语句，可以实现动态计时。
//其实所谓的动态计时，就是在很短的时间里不停给显示时间的地方更新数值，由于速度很快，这样计时器看起来时刻都在变化。但其实不是的，它从本质上还是静态的，这跟js的伪多线程原理是一样的。
ss += 1;
}
function startclock() {
se = setInterval("second()", 1);
} //这个函数是要放到按钮的click事件上的
function pauseclock() {
clearInterval(se);
} //这个函数是要放到按钮的click事件上的
function stopclock() {
clearInterval(se);
ss = 1;
m = h = s = 0;
} //这个函数是要放到按钮的click事件上的
</script>
-->
<script>
$(function(){
var timer = {
options: {
timer: null,
dom: null
},
init: function(dom){
this.options.dom = dom;
this.startTimer();
},
getTimer: function(){
var _dom = this.options.dom;
var t = 1,
h = 0,
m = 0,
s = 1;
return function(){
console.log(_dom);
if (s > 0 && s % 60 == 0) {
m += 1;
s = 0;
}
if (m > 0 && m % 60 == 0) {
h += 1;
m = 0;
}
t = (h < 10 ? '0' + h : h) + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s);
_dom.html(t);
s += 1;
}
},
startTimer: function(){
var _getTimer = this.getTimer();
this.options.timer = setInterval(_getTimer, 1000);
},
stopTimer: function(){
clearInterval(this.options.timer);
this.options.timer = null;
}
}
var dom = $('#timer')
timer.init(dom);
$('.stopTimer').click(function(){
timer.stopTimer();
})
// var t = 1,
// h = 0,
// m = 0,
// s = 1,
// timer;
// var dom = $('#timer')
// function second(dom){
// var _dom = dom;
// return function(){
// console.log(dom);
// if (s > 0 && s % 60 == 0) {
// m += 1;
// s = 0;
// }
// if (m > 0 && m % 60 == 0) {
// h += 1;
// m = 0;
// }
// t = (h < 10 ? '0' + h : h) + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s);
// _dom.html(t);
// s += 1;
// }
// }
// var _second=second(dom);
// function startTimer() {
// timer = setInterval(_second, 1000);
// }
// function stopTimer() {
// clearInterval(timer);
// s = 1;
// m = h = 0;
// }
// // alert(dom)
// startTimer()
})
</script>
</head>
<body>
<h1 id="timer"></h1>
<button class="stopTimer">暂停</button>
<input name="s" type="button" value="开始计时" onClick="startclock()">
<input name="s" type="button" value="暂停计时" onClick="pauseclock()">
<input name="s" type="button" value="停止计时" onClick="stopclock()">
<input name="showtime" style="color:#ff0000;width:200px;" id="showtime" type="text" value="0时0分0秒">
</body>
</html>