动态显示时间

<div class="container">
		<span id="hours">00</span> :
		<span id="minute">00</span> :
		<span id="second">00</span> 
	</div>
	<div class="btngroup">
		<button id="start">开始</button>
		<button id="stop">暂停</button>
	</div>

这里是HTML的源代码div包裹的3个span标签，这3个span标签分别代表着，时、分、秒，这三个时间点，
下面的div包裹着是两个button标签，开始时间和暂停时间。

var timer=null;
$(function(){
	$("#start").click(function(){
		timer=setInterval(function(){
			showTime();
		},1000);
	});
	$("#stop").click(function(){
		clearInterval(timer);
	})
})
function showTime(){
	var date=new Date();
	var hours=date.getHours();
	var minute=date.getMinutes();
	var second=date.getSeconds();
	hours=hours<=9?"0"+hours:hours;
	minute=minute<=9?"0"+minute:minute;
	second=second<=9?"0"+second:second;
	$("#hours").text(hours);
	$("#minute").text(minute);
	$("#second").text(second);
}

这些是用jQuery插件写出来的时间表我来简答一下吧。
首先声明一个变量为null，中间暂不管，其次就是在下面定义一个方法，在这个方法里面通过一个构造函数Date去创建一个构造对象，这个构造对象包含着时、分、秒这三个时间点，之后再通过三目运算去判断这三个变量的值，然后把三个span标签的id获取到再通过text这个方法添加文本内容，最后回到中间获取到两个button标签的开始和暂停按钮的ID设置他们的点击事件，给开始键设置定时器让时间运动，给暂停键设置停止。

插件版本：jquery-3.2.1.min.js