<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> </style> </head> <body> <div> <span id="id_H">00</span> <span>:</span> <span id="id_M">00</span> <span>:</span> <span id="id_S">00</span> <input id="start" type="button" value="开始"> <input id="pause" type="button" value="暂停"> <input id="stop" type="button" value="停止"> </div> <script src="http://www.h5al.cn/js/jquery-1.11.3.min.js"></script> <script> //可以将查找标签节点的操作进行简化 var btn = getElementById('btn') // function $(id) { // return document.getElementById(id) // } //点击开始建 开始计数 var count = 654 var timer = null //timer变量记录定时器setInterval的返回值 $("#start").click(function() { timer = setInterval(function() { count++; console.log(count) // 需要改变页面上时分秒的值 console.log($("id_S")) $("#id_S").html(showNum(count % 60)) $("#id_M").html(showNum(parseInt(count / 60) % 60)) $("#id_H").html(showNum(parseInt(count / 60 / 60))) }, 1000) }) $("#pause").click(function() { //取消定时器 clearInterval(timer) }) //停止记数 数据清零 页面展示数据清零 $("#stop").click(function() { //取消定时器 $("#pause").click() // clearInterval(timer) //数据清零 总秒数清零 count = 0 //页面展示数据清零 $("#id_S").html("00") $("#id_M").html("00") $("#id_H").html("00") }) //封装一个处理单位数字的函数 function showNum(num) { if (num < 10) { return '0' + num } return num } </script> </body> </html>