[英]Using Vanilla JS to update page content dynamically
大家好
因此,我正在一个项目上,该项目本质上是一个从聊天室运行的老式笔和纸rpg。 我之所以碰壁,是因为每个角色的技能和属性都是基于他们的属性,并且在初始值确定后,我需要找到一种方法来使属性和属性在调整这些属性时动态更新。 我知道这对Angular来说可能是一个麻烦,但是我认为运动部件越少,失败的可能性就越小。
本质上,目标是设置JS,以便在属性更新时技能和统计信息也随之更新。 到目前为止,这是属性的代码:
<td colspan="2">MEMORY</td>
<td colspan="2">
<button onclick="decMem();" class="modButton" type="button">-</button>
<input type="text" id="MEM" class="trait" readonly /><script>document.getElementById("MEM").setAttribute('value', Mem);</script>
<button onclick="incMem();" class="modButton" type="button">+</button>
</td>
function incMem(){
if (traitPts > 0 && Mem < 20){
traitMod += 1;
Mem += 1;
traitPts -= 1;
document.getElementById("MEM").setAttribute('value', Mem);
document.getElementById("traitPts").setAttribute('value', traitPts);
} else { alert("CAN'T INCREASE FURTHER");}}
function decMem(){
if (traitMod > 0 && Mem > mem){
traitMod -= 1;
Mem -= 1;
traitPts += 1;
document.getElementById("MEM").setAttribute('value', Mem);
document.getElementById("traitPts").setAttribute('value', traitPts);
} else { alert("CAN'T REDUCE FURTHER");}}
然后,每个统计数据或技能都由变量确定,如下所示:
//COMBAT STATS
var seq = Math.floor((Per + Spd) / 2);
var act = Math.floor(Spd / 2);
var block = Math.floor((Dex + Spd) / 2);
var dodge = Math.floor((Dex + Spd) / 4);
//UNIVERSAL SKILLS
var stealth = (Per * 3) + Dex;
var climb = (Dex * 3) + Str;
var negot = Cha * 4;
var navig = (Log * 2) + Per + Mem;
并发送到这样的页面:
<td>STEALTH</td>
<td><input type="text" id="stealth" readonly/><script>document.getElementById("stealth").setAttribute('value', stealth);</script></td>
<td>CLIMBING</td>
<td><input type="text" id="climb" readonly /><script>document.getElementById("climb").setAttribute('value', climb);</script></td>
问题是,如果我重新加载页面,则所有属性都会随着其设置以模拟骰子掷骰而改变,因此我在这里茫然无措。 但这是一个PHP页面,所以也许有一种方法可以临时存储数据? 请帮忙!
您可以使用多种方法来使用Javascript,并在整个刷新过程中维护变量。 如果您希望在浏览会话结束时清除信息,则可以使用sessionStorage
,但是如果您希望它无限期地对您的应用程序可用,则可以使用localStorage
。 有关文档,请参见MDN 。
基本上,您将在浏览器中“保存”数据的方法是:
localStorage.setItem('myCat', 'Tom');
// or
sessionStorage.setItem('myCat', 'Tom');
然后,要稍后取出数据,您将使用
var cat = localStorage.getItem('myCat');
在这种情况下,它将返回值'Tom'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.