Skip to content

Commit 99b5fa7

Browse files
bjtqtibjtqti
committed
add stopwatch
1 parent aa26e8c commit 99b5fa7

File tree

7 files changed

+318
-3
lines changed

7 files changed

+318
-3
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,7 @@ study
8181

8282
## loading
8383
* 忙碌光标
84-
* 进度条
84+
* 进度条
85+
86+
## stopwatch
87+
* 秒表

‎dialog/loading.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
.spinner {
1111
width: 60px;
1212
height: 60px;
13-
1413
position: relative;
1514
margin: 100px auto;
1615
}

‎modcode/debounce.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ function debounce(func, wait){
44
// 首先是清空定时器
55
clearTimeout(timeID);
66
// 延迟 wait ms后执行真正的事件处理函数
7-
timeID = setTimeOut(func, wait);
7+
timeID = setTimeout(func, wait);
88
}
99
}
1010
function hanlder(){

‎stopwatch/css/style.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
2+
3+
body {
4+
font-family: Microsoft YaHei,Arial,Helvetica,sans-serif;
5+
}
6+
7+
ul {
8+
list-style: none;
9+
padding: 0;
10+
}
11+
12+
button {
13+
outline: none;
14+
}
15+
16+
.container {
17+
width: 320px;
18+
height: 500px;
19+
margin: 10px auto;
20+
background-color: #020527;
21+
color: white;
22+
overflow: hidden;
23+
}
24+
25+
.title {
26+
height: 50px;
27+
line-height: 50px;
28+
text-align: center;
29+
font-size: 16px;
30+
border-bottom: 1px solid #ddd;
31+
}
32+
33+
.time {
34+
margin: 30px auto 10px;
35+
text-align: center;
36+
}
37+
38+
.time span {
39+
display: inline-block;
40+
width: 100px;
41+
text-align: center;
42+
font-size: 68px;
43+
}
44+
45+
.time span:last-child {
46+
width: 80px;
47+
}
48+
49+
50+
.time span:nth-child(1)::after {
51+
content:':';
52+
font-size: 60px;
53+
}
54+
55+
.time span:nth-child(2)::after {
56+
content:'.';
57+
font-size: 60px;
58+
}
59+
60+
.menu {
61+
margin: 20px auto;
62+
padding: 0 20px;
63+
overflow: hidden;
64+
}
65+
66+
.menu button {
67+
width: 48px;
68+
height: 48px;
69+
border-radius: 50%;
70+
text-align: center;
71+
font-size: 14px;
72+
}
73+
74+
.reset {
75+
float: left;
76+
color: #dfdfdf;
77+
border: 2px double #666;
78+
background-color: gray;
79+
}
80+
81+
.reset.active {
82+
color: black;
83+
background-color: #dfdfdf;
84+
}
85+
86+
.start {
87+
float: right;
88+
color: #9ce89c;
89+
background-color: #2c522c;
90+
border: 2px double #9ce89c;
91+
}
92+
93+
.starting {
94+
float: right;
95+
color: red;
96+
background-color: pink;
97+
border: 2px double red;
98+
}
99+
100+
.watch-list {
101+
margin: 40px 10px 0;
102+
height: 200px;
103+
overflow: auto;
104+
}
105+
106+
.watch-list li {
107+
width: 100%;
108+
height: 32px;
109+
line-height: 32px;
110+
border-top: 1px dashed #ddd;
111+
}
112+
113+
.watch-list li:last-child {
114+
border-bottom: 1px dashed #ddd;
115+
}
116+
117+
.watch-list li span {
118+
float: left;
119+
}
120+
.watch-list li b {
121+
float: right;
122+
}
123+
124+
.watch-list li:nth-child(1){
125+
color: red;
126+
}
127+
128+
.watch-list li:nth-child(2){
129+
color: green;
130+
}
131+
.watch-list li:nth-child(3){
132+
color: blue;
133+
}
134+
135+

‎stopwatch/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
6+
<title>用Javascript开发简单的秒表/计时器</title>
7+
<link rel="stylesheet" href="./css/style.css">
8+
<script src="./js/main.js"></script>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<header class="title">秒表</header>
13+
<section class="time">
14+
<span>00</span><span>00</span><span>00</span>
15+
</section>
16+
<div class="menu">
17+
<button class="reset">计次</button>
18+
<button class="start">启动</button>
19+
</div>
20+
<ul class="watch-list">
21+
<li></li>
22+
<li></li>
23+
<li></li>
24+
</ul>
25+
</div>
26+
</body>
27+
</html>

‎stopwatch/js/main.js‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/**
2+
* 秒表
3+
*/
4+
5+
function Stopwatch(node,list){
6+
var elemetns = node.children;
7+
this.elemetns = elemetns;
8+
this.listNode = list;
9+
this.reset();
10+
}
11+
12+
13+
Stopwatch.prototype = {
14+
15+
/**
16+
* 开始
17+
*/
18+
start:function(){
19+
//console.log('start...')
20+
if(this.status === 'START'){
21+
return false;
22+
}
23+
var it = this;
24+
this.status = 'START';
25+
this.time = 0;
26+
this.timerID = setInterval(function(){
27+
it.time++;
28+
var data = it.update();
29+
it.recordList[0] = data;
30+
it.renderList()
31+
},10)
32+
},
33+
34+
/**
35+
* 停止
36+
*/
37+
stop:function(){
38+
// console.log('stop...')
39+
if(this.status === 'STOP'){
40+
return false;
41+
}
42+
this.status = 'STOP';
43+
clearInterval(this.timerID);
44+
},
45+
46+
/**
47+
* 复位
48+
*/
49+
reset:function(){
50+
// console.log('reset...')
51+
this.status = 'STOP';
52+
this.time = 0;
53+
this.recordList = [];
54+
this.timerID && clearInterval(this.timerID);
55+
this.update();
56+
this.renderList()
57+
},
58+
59+
/**
60+
* 计次
61+
*/
62+
count:function(){
63+
var data = this.format();
64+
this.recordList.push(data);
65+
this.time = 0;
66+
},
67+
68+
/**
69+
* 更新数据
70+
*/
71+
update:function(){
72+
var data = this.format();
73+
var elemetns = this.elemetns;
74+
for(var i = 0;i<3;i++){
75+
elemetns[i].innerText = data[i];
76+
}
77+
return data;
78+
},
79+
80+
/**
81+
* 数据格式化
82+
*/
83+
format:function(){
84+
var msecond = this.time % 100;
85+
var second = parseInt(this.time / 100);
86+
var minute = parseInt(second / 60 )
87+
var arr = [minute,second,msecond];
88+
for(var i=0;i<3;i++){
89+
arr[i] = arr[i] < 10 ? '0'+arr[i] : arr[i]
90+
}
91+
return arr;
92+
},
93+
/**
94+
* 显示记录
95+
*/
96+
renderList:function(){
97+
var node = this.listNode;
98+
var list = this.recordList;
99+
var li = '',i=0,length = list.length;
100+
for(;i<length;i++){
101+
var time = list[i][0]+':'+list[i][1]+'.'+list[i][2]
102+
var html = '<span>记次'+(length-i)+'</span><b>'+time+'</b>';
103+
li += '<li>'+html+'</li>';
104+
}
105+
for(i;i<3;i++){
106+
li += '<li></li>';
107+
}
108+
node.innerHTML = li;
109+
}
110+
}
111+
112+
113+
function bootstrap (){
114+
var time = document.getElementsByTagName('section')[0];
115+
var start = document.querySelector('.start');
116+
var reset = document.querySelector('.reset');
117+
var list = document.querySelector('.watch-list');
118+
var watch = new Stopwatch(time,list);
119+
120+
start.addEventListener('click',function(){
121+
if(watch.status==='STOP'){
122+
watch.start();
123+
start.className = 'starting';
124+
start.innerText = '停止';
125+
reset.className += ' active';
126+
reset.innerText = '计次';
127+
}else{
128+
watch.stop();
129+
start.innerText = '启动';
130+
start.className = 'start';
131+
reset.innerText = '复位';
132+
//reset.className = 'reset';
133+
}
134+
},false);
135+
136+
reset.addEventListener('click',function(){
137+
if(watch.status === 'START'){
138+
watch.count();
139+
}else if(watch.status === 'STOP'){
140+
watch.reset();
141+
}
142+
},false)
143+
}
144+
145+
146+
if(typeof window.addEventListener){
147+
window.addEventListener("DOMContentLoaded",bootstrap);
148+
}else{
149+
window.attachEvent('onload',bootstrap);
150+
}
151+

0 commit comments

Comments
 (0)