Javascript 变量未使用进度条更新
Javascript Variable Not Updating Using Progress Bar
我正在制作一个游戏,并使用进度条来帮助增加我的html页面上的一些值。但是,一旦条达到 100%,它就会更新成本和级别,但它只工作一次。之后,无论您单击多少次,它都不会更新硬盘驱动器级别。如何保持变量更新?
//stats
var cash = document.getElementById('cash');
var ram = document.getElementById('ram');
var internet = document.getElementById('internet');
var hd = document.getElementById('harddrive');
var level = document.getElementById('level');
//shop
function levelup(t){
var bar = document.getElementById('lvelprogress');
bar.value = bar.value + t;
t = 0
if(t == 100){
bar.value = 100;
};
};
function upgradehd(al) {
var hdc = document.getElementById('hdc');
var hdl = document.getElementById('hdl');
var levelhd = 1;
var nhd = 250
var to = level * 20;
var nhdc = Math.floor(2.5 * hdc.innerHTML);
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
status.innerHTML = al+"%";
bar.value = al;
document.getElementById('lvelprogress').max = 100;
al++
var sim = setTimeout("upgradehd("+al+")",to);
if(al == 100){
var xp = hdc.innerHTML / 4;
levelup(xp);
status.innerHTML = "100%";
hdl.innerHTML = levelhd + 1;
hdc.innerHTML = nhdc;
hd.innerHTML = nhd + 50;
al=0;
status.innerHTML = al+"%";
bar.value = 0;
clearTimeout(sim);
};
};
.upgrade{
background-color: #66ff33;
width: 200px;
}
.shop{
background-color: black;
color: #66ff33;
width: 200px;
border: 5px solid #cccccc
}
.stats{
float: right;
height: 175px;
width: 150px;
background-color: #000;
color: #66ff33;
margin-left: 2px;
text-align: center;
display: inline-block;
}
<div class="stats">
<p>Level: <span id="level">1</span></p>
<progress style="width:150px;background-color:#66ff33;" id="lvelprogress" value="0" max="100"></progress>
<p>Cash: $<span id="cash">50</span></p>
<p>R.A.M: <span id="ram">100</span>MB</p>
<p>Internet Speed: <span id="internet">25</span>MB/s</p>
<P>Hard Drive: <span id="harddrive" >250</span>GB</P>
</div>
<div id="shop" class="shop">
<button class="exit" onclick="hideshop()">X</button>
<p id="uram">Upgrade R.A.M: $<span id="urc">50</span> Level:<span id="url"> 1</span><button style="border:2px solid white;color:#66ff33;background-color:#000;" onclick="upgradehd(0);">Upgrade</button></p>
<p id="uis">Upgrade Internet Speed: $<span id="isc">200</span> Level:<span id="isl"> 1</span><button style="border:2px solid white;color:#66ff33;background-color:#000;" onclick="upgradehd(0);">Upgrade</button></p>
<p id="uhd">Upgrade Hard Drive: $<span id="hdc">100</span> Level:<span id="hdl"> 1</span><button style="border:2px solid white;color:#66ff33;background-color:#000;" onclick="upgradehd(0);">Upgrade</button></p>
<progress class="upgrade" id="progressBar" value="0" max="100"></progress>
<span id="status"></span>
</div>
始终将 LevelValue 设置为 1。 var levelhd = 1;
但是你必须使用HTML中的当前关卡,或者你把它保存到JavaScript的var
中。
我改了行:var levelhd = parseFloat(hdl.innerHTML);
//stats
var cash = document.getElementById('cash');
var ram = document.getElementById('ram');
var internet = document.getElementById('internet');
var hd = document.getElementById('harddrive');
var level = document.getElementById('level');
//shop
function levelup(t) {
var bar = document.getElementById('lvelprogress');
bar.value = bar.value + t;
t = 0
if (t == 100) {
bar.value = 100;
};
};
function upgradehd(al) {
var hdc = document.getElementById('hdc');
var hdl = document.getElementById('hdl');
var levelhd = parseFloat(hdl.innerHTML);
var nhd = 250
var to = level * 20;
var nhdc = Math.floor(2.5 * hdc.innerHTML);
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
status.innerHTML = al + "%";
bar.value = al;
document.getElementById('lvelprogress').max = 100;
al++
var sim = setTimeout("upgradehd(" + al + ")", to);
if (al == 100) {
var xp = hdc.innerHTML / 4;
levelup(xp);
status.innerHTML = "100%";
hdl.innerHTML = levelhd + 1;
hdc.innerHTML = nhdc;
hd.innerHTML = nhd + 50;
al = 0;
status.innerHTML = al + "%";
bar.value = 0;
clearTimeout(sim);
};
};
.upgrade {
background-color: #66ff33;
width: 200px;
}
.shop {
background-color: black;
color: #66ff33;
width: 200px;
border: 5px solid #cccccc
}
.stats {
float: right;
height: 175px;
width: 150px;
background-color: #000;
color: #66ff33;
margin-left: 2px;
text-align: center;
display: inline-block;
}
<div class="stats">
<p>Level: <span id="level">1</span>
</p>
<progress style="width:150px;background-color:#66ff33;" id="lvelprogress" value="0" max="100"></progress>
<p>Cash: $<span id="cash">50</span>
</p>
<p>R.A.M: <span id="ram">100</span>MB</p>
<p>Internet Speed: <span id="internet">25</span>MB/s</p>
<P>Hard Drive: <span id="harddrive">250</span>GB</P>
</div>
<div id="shop" class="shop">
<button class="exit" onclick="hideshop()">X</button>
<p id="uram">Upgrade R.A.M: $<span id="urc">50</span> Level:<span id="url"> 1</span>
<button style="border:2px solid white;color:#66ff33;background-color:#000;" onclick="upgradehd(0);">Upgrade</button>
</p>
<p id="uis">Upgrade Internet Speed: $<span id="isc">200</span> Level:<span id="isl"> 1</span>
<button style="border:2px solid white;color:#66ff33;background-color:#000;" onclick="upgradehd(0);">Upgrade</button>
</p>
<p id="uhd">Upgrade Hard Drive: $<span id="hdc">100</span> Level:<span id="hdl"> 1</span>
<button style="border:2px solid white;color:#66ff33;background-color:#000;" onclick="upgradehd(0);">Upgrade</button>
</p>
<progress class="upgrade" id="progressBar" value="0" max="100"></progress>
<span id="status"></span>
</div>
相关文章:
- Jquery-每个循环不更新变量
- 函数返回后更新变量
- 我无法通过angularjs中的指令更新变量
- 可以't在quizz页面范围问题上用最终分数更新变量
- 如何在AJAX会话之外更新变量?(Backbone JS/CoffeeScript)
- Javascript 对象方法不更新变量
- 当jquery中的输入发生更改时更新变量
- 无法使用AngularJS更新变量
- 在arr.splice()之后更新变量
- Javascript承诺并更新变量
- jQuery-在输入值更改时更新变量
- 使用数据属性通过 jquery 定位和更新变量
- 从数组中删除不会更新变量内的引用
- 冒泡 从嵌套函数更新变量
- 在 .click 上使用 $.ajax 更新变量
- Javascript - Bootstrap-Slider,如何根据滑块的值更新变量
- JavaScript Ajax 不按时更新变量
- 如何在 JS 中更新变量
- Javascript 没有更新变量
- 在函数中更新变量时,变量不会反映视图中的更新