计时器与时间截取功能实现-优快云博客

在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>方法</title>
		<style type="text/css">
			body,head{
				margin:  0 auto;
				
			}
			.container {
    padding: 8px 0 0;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
			#div1{
                width: 100%;
				height: 100%;
			    margin: 0 auto;
			}
			#div1>button{
				width: 80px;
				height: 40px;
				border-radius: 8px;
				background: rgba(33,145,255,0.5);
			}
			#time{				
				font-size: 400px;
			}
		table {
	border: :1px solid #e9e9e9;
	border-collapse:collapse ;
	border-spacing:0 ;
	empty-cells: show;
}
th{
	background: #f7f7f7;
	color: #5c6b77;
	font-weight: 600;
	white-space: nowrap;
	border: :1px solid #eee;
	padding: 8px 16px;
	text-align: center;
	border: 1px solid white;
	background: #EEEEEE;
}
td{
	padding: 8px 16px;
	text-align: center;
	border: 1px solid #eee;
	background: rgba(33,145,255,0.5);
}
		</style>
		<script type="text/javascript">
			var b=0;
			function Start(){
				if(b == 0){
					timeObj = document.getElementById("time");
					time = setInterval(changeTime,10);
					b = 1;
					btn1 = document.getElementById("bt1");
					btn1.innerText = "暂停";
				}
				else if(b == 1){
					btn1.innerText = "继续";
					clearInterval(time);
					b = 0;
				}
			}
				num = 0;
			function changeTime(){
				num++;  //num每加1,运行10s
				var minute =  Math.floor(num%360000/6000); 
				var second = Math.floor(num%6000/100);
				var millisecond=Math.floor(num%100);
				t = ((minute<=9)?"0"+minute:minute)+":"+((second<=9)?"0"+second:second)+":"+((millisecond<=9)?"0"+millisecond:millisecond);			
				timeObj.innerText = t;
			}
			function Reset(){
				clearInterval(time);
				document.getElementById("bt1").innerText = "开始计时";
				document.getElementById("thead").style.display="none";
				num = 0;				
				t = "00:00:00";
				document.getElementById("time").innerText = t;				
				b = 0;
				j =0;
				var tbody=document.getElementById("tbody");
				tbody.innerText="";
				intervalTime=0;
			}
			 j=0;
            intervalTime=0;
			function Intercept(){
				j++;
				document.getElementById("thead").style.display="";
				var timeShow =document.getElementById("time").innerText;
				var tbody=document.getElementById("tbody");
				var showTr=document.createElement('tr');
				var showTd1=document.createElement('td')
				var showTd2=document.createElement('td')
				var showTd3=document.createElement('td')
				showTd1.innerText=j;
				showTd2.innerText=timeShow;				
				showTd3.innerHTML=subtractionDate(timeShow,intervalTime);
				intervalTime=timeShow;
				showTr.appendChild(showTd1);
				showTr.appendChild(showTd2);
				showTr.appendChild(showTd3);
				tbody.appendChild(showTr);
			}
			function subtractionDate(fdate,sdate){
				var farray=fdate.split(":");
				var minute=farray[0]*1,
				    second=farray[1]*1,
				    millisecond=farray[2]*1;				    
				if(sdate!=0){
					var sarray=sdate.split(":");
					minute=minute-sarray[0]*1;
					second=second-sarray[1]*1;
					if(second<0){
						minute=minute-1>0?minute-1:0;
						second=60+second;
					}
					millisecond=millisecond-sarray[2]*1;					
					if(millisecond<0){
						second=second-1>0?second-1:0;
						millisecond=100+millisecond;
					}
				}
			    return t = ((minute<=9)?"0"+minute:minute)+":"+((second<=9)?"0"+second:second)+":"+((millisecond<=9)?"0"+millisecond:millisecond);		
			}
	     
		</script>

	</head>
	<body>
		<div id="div1" class="container">
			<div id="time" class="container" style=" text-align: center;">00:00:00</div>
			<br />	<br />
			<button id="bt1" onclick="Start()" style="margin-left: 30px;">开始计时</button>
			<button id="bt2" onclick="Reset()">复位</button>
			<button id="bt3" onclick="Intercept()">截取时间</button>
			<div style="margin: 30px;max-height: 500px; overflow-y: scroll">
				<table cellspacing="0" cellpadding="0" border="0" style="width: 499px;">
					<thead id="thead" style="display: none;">
						<th>截取顺序</th>
						<th>截取时间</th>
						<th>截取时间差</th>
					</thead>
					<tbody id="tbody" 
					</tbody>
				</table>
			</div>
		</div>
	</body>

</html>
js 秒表
