- <style>
- .dahe {
- width: 300px;
- height: 400px;
- margin: auto;
- background-color: pink;
- }
-
- .shijian {
- color: white;
- font-size: 40px;
- text-align: center;
- line-height: 80px;
- }
-
- .anniu {
- width: 250px;
- margin: auto;
- }
-
- button {
- width: 250px;
- font-size: 30px;
- margin-top: 20px;
- }
- style>
- <body>
- <div class="dahe">
- <div class="shijian">
- <span id="shi">00span>
- <span id="fen">00span>
- <span id="miao">00span>
- div>
- <div class="anniu">
- <button id="kai">开始button>
- <button id="zan">暂停button>
- <button id="jie">结束button>
- div>
- div>
- body>
- function $(id) {
- return document.getElementById(id)
- }
- var shi = $('shi'),
- fen = $('fen'),
- miao = $('miao'),
- kai = $('kai'),
- zan = $('zan'),
- jie = $('jie')
- var i = 0;
- var time;
- kai.onclick = function () {
- kai.disabled = true
- zan.disabled = false
- jie.disabled = false
- time = setInterval(shijian, 100)
- }
- zan.onclick = function () {
- kai.disabled = false
- zan.disabled = true
- jie.disabled = false
- clearInterval(time)
- }
- jie.onclick = function () {
- kai.disabled = false
- jie.disabled = true
- clearInterval(time)
- i=0
- moveTime()
- }
- function shijian() {
- i++;
- moveTime()
- }
- function moveTime() {
- miao.innerText = formTime(i%60)
- fen.innerText = formTime(parseInt(i/60)%60)
- shi.innerText = formTime(parseInt(i/60/60)%60)
- }
- function formTime(j) {
- return j < 10 ? "0" + j : j
- }
-