jquery计时器粘贴可用

来源：互联网发布：揭秘黑马程序员骗局编辑：程序博客网时间：2024/05/21 19:47

今天新学的计时器，粘出来装个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>

阅读全文

0 0