今天新学的计时器,粘出来装个B
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>计时</title>
<script src="<?= base_url()?>/public/js/jquery-3.2.1.min.js"></script>
<style>
.end{width: 200px;height: 30px;background: yellow; border: none; margin-top: 40px;}
.big{width: 200px;height:auto; margin-bottom: 40px;}
</style>
</head>
<body>
<center>
<div class="big">
<p>骑行时间:</p>
<div class="time_sum">
<span class="hour">00</span>:<span class="minutes">00</span>:<span class="seconds">00</span>
</div>
<p>当前费用:</p>
<p class="cost"></p>
<button class="begin">结束行程</button>
<button class="end">结束行程</button>
</div>
</center>
</body>
</html>
<script>
var time = setInterval(function(){
var seconds = parseInt($('.seconds').html());
var minutes = parseInt($('.minutes').html());
var hour = parseInt($('.hour').html());
if(seconds+1>59){
seconds = 0;
minutes += 1;
}else{
seconds +=1;
}
if(minutes+1>59){
minutes = 0;
hour += 1;
}
if(minutes<=9){
minutes = "0"+minutes;
}
if(seconds<=9){
seconds = "0"+seconds;
}
if(hour<=9){
hour = "0"+hour;
}
$(".hour").html(hour);
$(".minutes").html(minutes);
$(".seconds").html(seconds);
hour = parseInt(hour);
cost = (hour+1)*1;
$(".cost").html("¥"+cost+"元");
},1000);
$(document).on("click",".end",function(){
clearInterval(time);
var time_sum = $(".time_sum").text();
alert("您一共骑行了"+time_sum+"花费了"+cost+"元");
})
</script>