问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为什么第二次重启结束后，图标会闪动？

头像
Eleven
    1
    新手上路，请多包涵
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>计时器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  <style>
    .clocker {
      margin:5cm;
    }
    .clocker .time {
      font-size: 23pt;
    }
  .clocker .clocker-btns  .fa-undo{
          margin-right: 40px;
    }
    .clocker .out{
      display:inline;
    }
    .clocker .hidden {
      display:none;
    }
    </style>
</head>
<body>




<div class="clocker">
  <div class="time">
      <span class="hour">00</span>
      <span>:</span>
      <span class="minute">2</span>
          <span>:</span>
      <span class="second">0</span>
    </div>
  <div class="clocker-btns">
    <i class="fa fa-undo fa-3x" aria-hidden="true"></i>
    <span class='open-pause'>
      <i class="fa fa-play fa-3x out" data-act="play" aria-hidden="true"></i>
      <i class="fa fa-pause fa-3x hidden" data-act="pause" aria-hidden="true"></i>
    </span>
  </div>
</div>


<script>


var clocker=function(default_time){
  
    let hour=default_time.hour;
    let minute=default_time.minute;
    let second=default_time.second;
    
    $(".clocker .hour").html('00');
    $(".clocker .minute").html(minute);
    $(".clocker .second").html(second);
  
   clocker.myVar=null;
$("body").on("click",".open-pause .fa",function(){
  
  let act=$(this).attr("data-act");
  let outNode=$(this).parent().find("i.out");
  let hiddenNode=$(this).parent().find("i.hidden");
  
  if(act=='pause'){
   clocker.myStopFunction();
  
  }
  else {
   clocker.myVar = setInterval('clocker.myTimer()', 1000);
  }

    $(outNode).removeClass("out");
    $(outNode).addClass("hidden");
    
    $(hiddenNode).removeClass("hidden");
    $(hiddenNode).addClass("out");
    
    
});

clocker.myTimer=function() {
    
    let str=$(".clocker .second").html();
    let second=parseInt(str);
    let next_second=second-1;
    
    if(next_second>-1){
    
    $(".clocker .second").html(next_second);
  }
  else {
      
            let str=$(".clocker .minute").html();
            let minute=parseInt(str);
            let next_minute=minute-1;
            if(next_minute>-1){
              $(".clocker .minute").html(next_minute);
              $(".clocker .second").html(59);
            
          }
          else {
        let aoo=clocker.myVar;
         clearInterval(aoo);
         
               let outNode=$(this).find("i.out");
               let hiddenNode=$(this).find("i.hidden");
               
               $(outNode).removeClass("out");
               $(outNode).addClass("hidden");
               
               $(hiddenNode).removeClass("hidden");
               $(hiddenNode).addClass("out");
         
          }
  }
    
};





clocker.myStopFunction=function() {
  let aoo=clocker.myVar;
   clearInterval(aoo);
};



$("body").on("click",".clocker i.fa-undo",function(){
  
    let hour=default_time.hour;
    let minute=default_time.minute;
    let second=default_time.second;
    
    $(".clocker .hour").html('00');
    $(".clocker .minute").html(minute);
    $(".clocker .second").html(second);
});


};

</script>
<script>
let default_time={
  hour:0,
  minute:0,
  second:7
};
clocker(default_time);
</script>
</body>
</html>
    javascript前端htmlhtml5jquery
    阅读 764
    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题