1

这里只是一个业余爱好者/爱好者 - 这应该是我和朋友一起玩棋盘游戏的工具。游戏使用的塑料滑块太松而不可靠，因此我想将该功能复制为网页，以便在玩游戏时在智能手机上使用。

它从表单（在另一页上）中获取角色的名称并将其提供给下面的表单。根据名称，它从 switch 语句中选择正确的属性集（为了简单起见，我删除了所有情况，除了两种情况），运行一个 for 循环以在列表中显示属性并将“当前”值突出显示为绿色。两个按钮应该增加或减少数组计数器（“速度”），并重新运行使用新突出显示值绘制数组的函数。innerHTML 旨在用新结果重绘 div（“speeddiv”）。

现在 chrome 中的 javascript 控制台告诉我 speedcounter() 和字符是未定义的。我怀疑这与我正在使用的函数的范围和变量通过 innerhtml 丢失有关。我想要做的就是找到一种方法来轻松重绘/替换统计计数器，这样当您在 div 中按下 + 或 - 按钮时，突出显示的数字似乎会上下移动。我只处理下面的“速度”属性，所以我可以先让它工作。

<!DOCTYPE html>
<html>
<body>
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; }
#dossier {height: 10%; text-align: center; background: #808080}
#container {height: 90%; width: 100%; background: #000000; overflow: hidden; float: left}
#stats {height: 100%; width: 100%; float: left; position: relative}
#speeddiv, #mightdiv, #sanitydiv, #knowledgediv {width: 25%; height: 100%; text-align: center; float: left; position: relative; overflow: hidden}
#speeddiv {background: #0000FF}
#mightdiv {background: #FF0000}
#sanitydiv {background: #FFFF00}
#knowledgediv {background: #00FF00}
</style>

<?php $character = $_GET["character"]; ?>

<script type="text/javascript">

 var character = "<?php echo $character ?>";
 var sp;
 var speed;

 function speedcounter() {
  var spx;
  document.write('   <h2>Speed</h2></br>');
  document.write('<input type="button" onclick="addspeed();" value="+"><br />');   

  for (spx=8; spx>=0; spx--) {
   if (spx == speed) { 
   document.write('<font color=#00FF00>');
   }
   document.write(sp[spx]); 
   document.write('<font color=#000000><br />');
  }
  document.write ('<input type="button" onclick="remspeed();" value="-">'); 
 }

function addspeed() {
 if (speed < 8) {
  speed++;
  document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
 }
}

function remspeed() {
 if (speed > 0) {
  speed--;
  document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
 }
}

switch (character) {
 case "brandon":

 sp=["0","3","4","4","4","5","6","7","8"];
 mt=["0","2","3","3","4","5","6","6","7"];
 sn=["0","3","3","3","4","5","6","7","8"];
 kn=["0","1","3","3","5","5","6","6","7"];

 speed=3;
 might=4;
 sanity=4;
 knowledge=3;

 break;

 case "flash":

 sp=["0","4","4","4","5","6","7","7","8"];
 mt=["0","2","3","3","4","5","6","6","7"];
 sn=["0","1","2","3","4","5","5","5","7"];
 kn=["0","2","3","3","4","5","5","5","7"];

 speed=5;
 might=3;
 sanity=3;
 knowledge=3;

 break;
 }

</script>

<div id="dossier">
 <script type="text/javascript">
  document.write(character);
 </script>
</div>
<div id="container">
 <div id="stats">
  <div id="speeddiv">
   <script type="text/javascript">
    speedcounter();
   </script>
  </div>
  <div id="mightdiv">
   <h2>Might</h2></br></br>
  </div>
  <div id="sanitydiv">
   <h2>Sanity</h2></br></br>
  </div>
  <div id="knowledgediv">
   <h2>Knowledge</h2></br></br>
  </div>
 </div>
</div>

</script>

</body>
</html>
4

1 回答 1

1

我已经根据您发布的代码创建了一个 jsfiddle http://jsfiddle.net/amelvin/bwwce/ - 在那里以交互方式处理它可能会有所帮助。

我认为您的问题是 document.write 发生了什么；关于 document.write 的部分解释说 document.write 的作用不是很可预测。

使用 jquery 之类的 javascript 库将元素插入网页而不是 document.write - jquery 中的 html() 方法（以及其他方法）允许您根据按钮按下、添加或删除等事件动态且可预测地操作页面的任何方面按钮或 div。

于 2012-06-07T22:52:40.900 回答