首页猿问如何使用 JavaScript...

如何使用 JavaScript 更新进度条的值？

Html5

阿波罗的战车 2023-10-24 15:58:37

所以我想做的是根据某些条件使用进度条在视觉上降低生命值。const bgURLs = { "Air": "https://media1.giphy.com/media/RK7pdHVS4N7he/source.gif", "Fire": "https://i.gifer.com/5NOX.gif", "Water": "https://steamuserimages-a.akamaihd.net/ugc/947328402825377319/20625B881E545FF98AF1A48BAC52D4CBD207101B/", };let options = document.getElementById("Options")let computerChoice = getComputerChoice()let playerChoice = '' let updatePlayerChoice = Options.addEventListener("click", function(e) { playerChoice = e.target.id; return playerChoice})function getComputerChoice() { const keys = Object.keys(bgURLs); const randomIndex = [Math.floor(Math.random() * keys.length)] const compChoice = keys[randomIndex] return compChoice }// image shows up after clicked functionOptions.addEventListener("click", function(e) { let tgt = e.target; let player = document.getElementById("Player") let computer = document.getElementById("Computer") if (tgt.classList.contains("element")) { player.style.backgroundImage = 'url(' + bgURLs[tgt.id] + ')'; computer.style.backgroundImage = 'url(' + bgURLs[computerChoice] + ')'; }}) let playerHealth = document.getElementById("player-health").getAttribute("value")let computerHealth = document.getElementById("computer-health").getAttribute("value");function compareChoices() { if (playerChoice === "Fire" & computerChoice === "Water") { playerHealth -= 25 } else if (playerChoice === "Fire" & computerChoice === "Air") { playerHealth -= 25 } else if (playerChoice === "Fire" & computerChoice === "Fire") { playerHealth -= 25 }}我认为主要问题是我对最后一个函数的逻辑。我的代码所做的是使用事件监听器监听playerChoice，然后它给我返回值，我可以用它来将答案与计算机选择进行比较。这部分代码肯定有效。但我似乎无法根据这些条件之一来定位值属性来更新它。当我尝试 console.log playerHealth 或 computerHealth 查看是否发生任何情况时，它仍然保持在 100，这是我设置的最大值。我的代码不应该根据我的条件在视觉上降低进度条吗？https://jsfiddle.net/Jbautista1056/bLs0tyef/

查看完整描述

2 回答

繁星点点滴滴

TA贡献1803条经验获得超3个赞

您遇到了几个问题，从引用错误的变量（Options，而不是options）到评估猜测后没有实际更新进度条值。

您还有很多不必要的代码。

由于我不确定你的游戏中什么打败了什么，你必须调整这组条件，if/else if并为计算机失去/获得分数添加更多。但是，现在，如果您重复单击fire或water，您会看到一些操作。您添加的条件和分数调整越简洁，进度条的响应速度就越快。

有关详细信息，请参阅下面的内联评论：

const bgURLs = {

"Air": "https://media1.giphy.com/media/RK7pdHVS4N7he/source.gif",

"Fire": "https://media2.giphy.com/media/AHeTfHgVFPHgs/source.gif",

"Water": "https://steamuserimages-a.akamaihd.net/ugc/947328402825377319/20625B881E545FF98AF1A48BAC52D4CBD207101B/"

};

// Don't set variables equal to DOM element properties directly

// because every time you want a different property, you have to

// query the DOM for the same element over and over. Just get a

// reference to the element and when you want a property, just

// get it from that element reference.

let player = document.getElementById("Player");

let computer = document.getElementById("Computer");

let playerProg = document.getElementById("player-health");

let computerProg = document.getElementById("computer-health");

let options = document.getElementById("Options");

// These need to be declared so they can be accessed throughout

// the game, but their values won't be known until an event happens

let playerChoice = null;

let computerChoice = null;

let playerHealth = 100;

let computerHealth = 100;

function getComputerChoice() {

let random = Math.floor(Math.random() * Object.keys(bgURLs).length);

computerChoice = Object.keys(bgURLs)[random];

return computerChoice;

}

// You had Options here, but your variable is options

options.addEventListener("click", function(e) {

if (e.target.classList.contains("element")) {

// Set the player choices

playerChoice = e.target.id;

player.style.backgroundImage = 'url(' + bgURLs[playerChoice] + ')';

computer.style.backgroundImage = 'url(' + bgURLs[getComputerChoice()] + ')';

// Test the results:

console.clear();

console.log(playerChoice, computerChoice);

// Now update the progress bars

compareChoices();

}

})

function compareChoices() {

// Use && for logical AND short-circuiting

// Ensure that scores don't go below 0 or above 100

// Not sure what beats what so you'll have to adjust as needed.

if (playerChoice === "Air" && computerChoice === "Fire") {

playerHealth = (playerHealth += 25) > 100 ? 100 : playerHealth;

computerHealth = (computerHealth -= 25) < 0 ? 0 : computerHealth;

} else if (playerChoice === "Air" && computerChoice === "Water") {

playerHealth = (playerHealth += 25) > 100 ? 100 : playerHealth;

computerHealth = (computerHealth -= 25) < 0 ? 0 : computerHealth;

} else if (playerChoice === "Fire" && computerChoice === "Air") {

playerHealth = (playerHealth -= 25) < 0 ? 0 : playerHealth;

computerHealth = (computerHealth += 25) > 100 ? 100 : computerHealth;

} else if (playerChoice === "Fire" && computerChoice === "Water") {

playerHealth = (playerHealth -= 25) < 0 ? 0 : playerHealth;

computerHealth = (computerHealth += 25) > 100 ? 100 : computerHealth;

} else if (playerChoice === "Water" && computerChoice === "Air") {

playerHealth = (playerHealth -= 25) < 0 ? 0 : playerHealth;

computerHealth = (computerHealth += 25) > 100 ? 100 : computerHealth;

} else if (playerChoice === "Water" && computerChoice === "Fire") {

playerHealth = (playerHealth += 25) > 100 ? 100 : playerHealth;

computerHealth = (computerHealth -= 25) < 0 ? 0 : computerHealth;

}

// You must update the progress bars from within the function

// that changes their values.

playerProg.value = playerHealth;

computerProg.value = computerHealth;

}

#Player, #Computer {

width:100px;

height:50px;

background-size:contain;

background-repeat:no-repeat;

margin:5px 0;

}

.element { cursor:pointer; display:inline; font-weight:bold; }

#Play-Area { clear:both; }

#Play-Area div { display:inline-block; }

#PlayerBar, #ComputerBar {

margin:10px 10px; float:left;

}

<p>Choose Your Element</p>

<div id="Water" class="element">Water</div>

</div>

<div>Player Health</div>

</div>

<div>Computer Health</div>

</div>

</div>

反对回复 2023-10-24

沧海一幻觉

TA贡献1824条经验获得超5个赞

我不久前就这样做了，并显示了不同的栏，基本上就是您的目标。计算在那里，并且条形图以不同的颜色显示（内联 CSS）。

function myMax() {

document.myform.num1.value=document.myform.number1.value;

document.myform.num3.value=document.myform.number2.value;

document.myform.num2.value=document.myform.number3.value;

document.myform.num4.value=document.myform.number4.value;

document.myform.max1y2.value=Math.max(document.myform.num1.value,document.myform.num2.value);

document.myform.max3y4.value=Math.max(document.myform.num3.value,document.myform.num4.value);

document.myform.maxAll.value=Math.max(document.myform.max1y2.value,document.myform.max3y4.value);

if(isNaN(document.myform.maxAll.value)){alert("Error in page, Probably Not A Number in a Value");return false;}

else

document.myform.pct1.value=Math.floor((document.myform.num1.value / document.myform.maxAll.value) * 100);

document.getElementById("bar1").style.width = document.myform.pct1.value+'%';

document.myform.pct2.value=Math.floor((document.myform.num2.value / document.myform.maxAll.value) * 100);

document.getElementById("bar2").style.width = document.myform.pct2.value+'%';

document.myform.pct3.value=Math.floor((document.myform.num3.value / document.myform.maxAll.value) * 100);

document.getElementById("bar3").style.width = document.myform.pct3.value+'%';

document.myform.pct4.value=Math.floor((document.myform.num4.value / document.myform.maxAll.value) * 100);

document.getElementById("bar4").style.width = document.myform.pct4.value+'%';

}

function checkIt(evt) {

evt = (evt) ? evt : window.event

var charCode = (evt.which) ? evt.which : evt.keyCode

if (charCode > 31 && (charCode < 48 || charCode > 57) && (charCode < 46 || charCode > 46 )) {//set for 46 dot. For dash = (charCode < 45 || charCode > 45 )

status = "This field accepts numbers only."

return false

}

status = ""

return true

}

<h3 style="width: 50%;background-color:navy;color:white;position:relative;top: -28px;"> VALUES:

</h3>

<b style="position:relative;top: -38px;">Please fill only 3 Values out of 4:

</b>

<tbody>

<tr><th>[Column A]</th>

</tr><tr>

<td>

<div align="left"><font color="olive"> Value 1 <input name="number1" size="8" maxlength="" tabindex="1" onblur="myMax()" onkeypress="return checkIt(event)" autofocus="" type="tel"><input name="unitA" size="4" value="Unit A" readonly="readonly" type="text"></font></div><font color="olive">

</font></td>

</tr>

<tr>

<td>

<div align="left"><font color="orange">Value 3 </font><input name="number2" size="8" maxlength="" tabindex="3" onblur="myMax()" onkeypress="return checkIt(event)" type="tel"><input name="unitA" size="4" value="Unit A" readonly="readonly" type="text">

</div>

</td>

</tr>

</tbody></table>

<tbody>

<tr>

<td>

</td>

</tr>

</tbody></table>

<tbody>

<tr><th>[Column B]</th>

</tr><tr>

<td>

<div align="left"><font color="green">Value 2 </font> <input name="number3" size="8" maxlength="" tabindex="2" onblur="myMax()" onkeypress="return checkIt(event)" type="tel">

</td>

</tr>

<tr>

<td>

<div align="left"><font color="red">Value 4 <input name="number4" size="8" maxlength="" tabindex="4" onblur="num4.value=this.value;myMax()" onkeypress="return checkIt(event)" type="tel">

</font></div><font color="red">

</font></td>

</tr>

</tbody></table>

<font color=olive>Value 1 </font><input name=num1 maxlength="" type="text" readonly><input name=pct1 maxlength="" size="4" type="text" readonly>%

</div>

<font color=green>Value 2 </font><input name=num2 maxlength="" type="text" readonly><input name=pct2 maxlength="" size="4" type="text" readonly>%

</div></div>

Max from 1&2 = <input name=max1y2 maxlength="" type="text" readonly>

</div>

<font color=orange>Value 3 </font><input name=num3 maxlength="" type="text" readonly><input name=pct3 maxlength="" size="4" type="text" readonly>%

</div>

<font color=red>Value 4 </font><input name=num4 maxlength="" type="text" readonly><input name=pct4 maxlength="" size="4" type="text" readonly>%

</div></div>

Max from 3&4 = <input name=max3y4 maxlength="" type="text" readonly>

<br>

Max from All <input name=maxAll maxlength="" type="text" readonly></div>

<br>

反对回复 2023-10-24

2 回答
0 关注
93 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

如何使用 JavaScript 更新进度条的值？

如何使用 JavaScript 更新进度条的值？

2 回答

添加回答