当进度增加到60%时升级

时间:2019-05-11 01:54:42

标签: javascript jquery html css

$(document).ready(function($){
  var notcomplete = "https://www.w3schools.com/images/picture.jpg";
  var completed = "https://www.w3schools.com/images/lamp.jpg";	
  var progress = 40;
 var level = 1;
  var timer = setInterval(function() {
    
    if (progress >= (level * 60)) {
  // what goes in here
     level ++; $('level').html("Level "+ level);

     Swal.fire('Congratualation, You are in the next level')
      clearInterval(timer);
    } 
  }, 100);

 
  function changePic(source) {
    if (source == notcomplete) {
      return completed;
    } else {
      return notcomplete;
    }
  }

document.getElementById("btn").onclick = function() {  
  var imgSrc=document.getElementById("mark-complete").src;
  document.getElementById("mark-complete").src = changePic(imgSrc);	
}



  

    $("#pg1 input").on('change', function(){
       $(this).toggleClass('plus-button minus-button');
        if ($("#pg1 input").is(":checked") === true) {
        progress = progress+20;
        $('#blips > .xp-progress').attr("style","width:" + progress + "%");
         $('.xp-progress').text(progress + "/800");
        }
        else if ($("#pg1 input").is(":checked") === false) {
        progress = progress-20;
        $('#blips > .xp-progress').attr("style","width:" + progress + "%");
         $('.xp-progress').text(progress + "/800");
        }
    });
	
  
    
});
/* Styles go here */

.xp-progress { background-color: darkred;
    height: 16px;
    color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

   
        <div id="blips" class="xp-line">
          <div id="level">Level 1</div>
          <div  class="xp-progress" role="progressbar" style="width:40%">20/800
          </div>
        </div>
        

<img id="mark-complete" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<hr>
<p></p>
<label id="pg1" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Completed!
  <input type="checkbox" id="btn"  style="display:none;">
</label>

进度条达到60s时,会弹出警报并提高级别。警报正在工作,但级别没有增加。似乎该代码是正确的,但无法正常工作。我在这里做错了什么?我知道代码应该位于if(progress> =(level * 60){//这里有什么}

0 个答案:

没有答案