知識點
1.setTimeout(函數,時間)單次定時器
var a = 0
setTimeout(function () {
a++;
},1000);
//本實例意思爲變量a一秒後加1（一秒等於一千毫秒）只執行一次
2.setInterval(函數,時間)多次定時器
var a = 0
setInterval(function () {
a++;
},1000);
//本實例意思爲變量a每秒加1（一秒等於一千毫秒）一直執行
3. window.clearInterval()用來結束setInterval()
4.手機網頁開發頭文件
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5.刪除手機點擊按鈕後留下的邊框
outline: none;
項目演示
![在這裏插入圖片描述]()
代碼展示
css代碼
<style>
*{
text-align: center;
}
.show{
margin: auto;
width: 300px;
height: 550px;
font-size: 50px;
line-height: 100px;
}
.bg{
background: red;
}
button{
height: 40px;
width: 30%;
border-radius: 30px;
background: #6FBD9F;
outline: none;
}
#count{
float: left;
width: 50%;
height: 300px;
font-size: 20px;
line-height: 20px;
}
.start{
background:#FF6B4E;
}
td{
height: 20px;
}
</style>
html代碼
<body>
<div class="show">
<div id="time"><span>00</span>:<span>00</span>.<span>00</span></div>
<hr>
<div id="count">
</div>
<button class="start">開始</button>
<button>復位</button>
<button>計次</button>
</div>
</body>
jQuery代碼
<script>
var time;//存放定時器
var s=00;//存放秒
var m=00;//存放分
var h=00;//存放時
var flag=1;//記錄點擊開始或停止按鈕的次數
var sign = 1;//記錄”計次“的次數
$(function () {
$('button').eq(0).on('click',function () {//爲開始按鈕添加事件
window.clearInterval(time);//每次點擊此按鈕都將定時器清掉
flag++;//每點擊一次加1
if(flag%2==0){//如果點擊次數被2取餘爲零添加開始事件並且將按鈕名字改爲"停止"
$(this).text("停止");
time = setInterval(function () {
if(s===100){
m+=1;
if(m<10){
$('span').eq(1).text('0'+m);
}else{
$('span').eq(1).text(m);
}
s=0;
}
if(m===60){
h+=1;
if(h<10){
$('span').eq(0).text('0'+h);
}else{
$('span').eq(0).text(h);
}
m=0;
}
if(s<10){
$('span').eq(2).text('0'+s).css("color","#F47048");
}else{
$('span').eq(2).text(s).css("color","#F47048");
}
s+=1;
},10);
}else{//如果點擊次數被2取餘爲1將按鈕名字改爲"開始"
$(this).text("開始");
}
});
$('button').eq(1).on('click',function () {//復位 將所有值初始化
window.clearInterval(time);
$('span').text('00');
$('p').remove();
s=00;
m=00;
h=00;
flag=1;
sign=1;
$('button').eq(0).text("開始");
});
$('button').eq(2).on('click',function () {//計次 將點擊時的時間按顯示到屏幕上
var h = $('span').eq(0).text();
var m = $('span').eq(1).text();
var s = $('span').eq(2).text();
var a=sign<10?'0'+sign:sign;
var q = "<p>"+a+"---"+h+":"+m+"."+s+"</p>"
$('#count').prepend(q);
sign++;
});
})
</script>
