<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>愛芳芳-jQuery仿苹果手机秒表计时器特效</title>
<style>
html,body{margin:0;padding:0;width: 100%;height: 100%;overflow: hidden;}
.box{margin:10px auto;width:400px;height: 100%;}
#showtime{margin:20px;margin-bottom: 20px;text-align: center;}
span{font-size: 60px;}
button{width:100px;height:100px;border-radius: 50px;border:0;outline:none ;margin:0 48px;font-size:24px;cursor: pointer;}
button:nth-of-type(1){
background: #287eff;
color: #FFFFFF;
}
button:nth-of-type(2){
background: #00ad00;
color: #FFFFFF;
}
#record{margin-top:20px;height: calc(100% - 240px);overflow: auto;}
#record div{width:340px;margin: 0 20px;height:30px;border-bottom:1px dotted #666;}
#record span{font-size:20px;}
.left{float:left;}
.right{float:right;}
::-webkit-scrollbar{
width: 7px;
height: 7px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(144,147,153,.3);
}
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
</style>
</head>
<body>
<div class="box">
<div id="showtime">
<span>00</span>
<span>:</span>
<span>00</span>
<span>:</span>
<span>00</span>
</div>
<div class="bnt">
<button>记次</button>
<button>启动</button>
</div>
<!--记录显示的次数-->
<div id="record">
<!---->
</div>
</div>
<script src=https://download.csdn.net/download/lucky_fang/"jquery-1.12.4.min.js"></script>
<script>
//添加事件
$(function(){
let min=0;
let sec=0;
let ms=0;
let timer=null;
let count=0;
//点击第一个按钮
$('.bnt button:eq(0)').click(function(){
if($(this).html()==='记次'){
if(!timer){
alert("没有开启定时器!");
return;
}
count++;
let right1="<span class='right'>"+$('#showtime').text()+"</span>";
let insertStr = "<div><span class='left'>记次"+count+"</span>" +right1+"</div>";
$("#record").prepend($(insertStr));
}else{
min=0;
sec=0;
ms=0;
count=0;
$('#showtime span:eq(0)').html('00');
$('#showtime span:eq(2)').html('00');
$('#showtime span:eq(4)').html('00');
$('#record').html('');
}
});
//点击第二个按钮
$('.bnt button:eq(1)').click(function(){
if($(this).html()==='启动'){
$(this).css({"background":"#f12e2e","color":"#ffffff"});
$(this).html('停止');
$('.bnt button:eq(0)').html('记次');
clearInterval(timer);
timer=setInterval(show,10)
}else{
$(this).css({"background":"#00ad00","color":"#ffffff"});
$(this).html('启动');
$('.bnt button:eq(0)').html('复位');
clearInterval(timer);
}
});
//生成时间
function show(){
ms++;
if(sec===60){
min++;sec=0;
}
if(ms===100){
sec++;ms=0;
}
let msStr=ms;
if(ms<10){
msStr="0"+ms;
}
let secStr=sec;
if(sec<10){
secStr="0"+sec;
}
let minStr=min;
if(min<10){
minStr="0"+min;
}
$('#showtime span:eq(0)').html(minStr);
$('#showtime span:eq(2)').html(secStr);
$('#showtime span:eq(4)').html(msStr);
}
})
</script>
</body>
本文地址：http://sjzytwl.xhstdz.com/news/13831.html
物流园资讯网 http://sjzytwl.xhstdz.com/ , 查看更多
