$(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){//这里有什么}