1

因此，由于堆栈溢出，我确定 document.write 每次运行时都会破坏我的网页/程序。我经常看到答案是使用 innerhtml 和 document.getElementById，但是，在以下情况下，我无法理解下面将如何使用它，因为您必须为它分配一个 id 来替换。我希望下面的整个内容在一个 div 中重绘。它所做的只是取出该数组，将其垂直吐出，并突出显示与变量“速度”匹配的数字。当您重新运行 speedcounter 函数时，该变量将发生变化，因此突出显示的数字也会发生变化。

有一个更好的方法吗？

并感谢您的关注。

function speedcounter() {

var spx;
var speed = 3;
var sp=["0","3","4","4","4","5","6","7","8"];

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="-">');    
 }
4

3 回答 3

1

有什么阻止你使用 jquery 吗？

以下链接使用 jquery 创建/附加 dom 元素。 如何将 DOM 节点创建为对象？

于 2012-06-12T21:26:11.820 回答
1

如果您出于某种原因不想使用 jQuery，这里有一个仅限 javascript 的解决方案。

我创建了一个 div

<div id="speed"></div>​

然后使用document.getElementById()andinnerHTML向其中添加 HTML。我保留了您的代码结构以说明如何完成。我+=用来添加到 div 中的现有 HTML。在函数的顶部，我清除它。如果你不这样做，每次调用函数时都会得到多个输出副本。

function speedcounter() {
document.getElementById('speed').innerHTML = "";
var spx;
var speed = 3;
var sp=["0","3","4","4","4","5","6","7","8"];

document.getElementById('speed').innerHTML += '<h2>Speed</h2></br>';
document.getElementById('speed').innerHTML += '<input type="button" onclick="addspeed();" value="+"><br />';

 for (spx=8; spx>=0; spx--) {
    if (spx == speed) { 
        document.getElementById('speed').innerHTML += '<span style="color:#00FF00">' + sp[spx] + '</span><br />';
    } else {
        document.getElementById('speed').innerHTML += sp[spx] + "<br />"; 
    }
 }
 document.getElementById('speed').innerHTML += '<input type="button" onclick="remspeed();" value="-">';    
}

speedcounter();

我还删除了您的font标签并将其替换为span内联 CSS 以设置颜色。

演示

于 2012-06-12T21:34:18.817 回答
0

可以innerHTML直接修改body的属性：

var body = document.getElementsByTagName('body')[0];
body.innerHTML += '<h2>Speed</h2></br>';

http://jsfiddle.net/YB8HU/

请记住，每次修改 时innerHTML，浏览器都会重新处理布局，因此请考虑将 HTML 字符串分配给变量，并在脚本末尾实际将其添加到正文中。

于 2012-06-12T21:33:38.647 回答