Question

如何在HTML页面中打印一系列具有不同颜色的数字？例如：1-10红色，11-20蓝色。我尝试过这个，但它没有用。

<html>
    <body>
        <script>
            for(i=0;i<=100;i++) {
               document.write(i);
               if(i>30 && i<50) {
                   document.write(i,'<FONT COLOR="red">');
               }
            }
        </script>
    </body>
</html>

Answer 1

我认为最好使用javascript的DOM（文档对象模型）和styles或classes，js看起来像：

var numbers = document.createElement('div');

for(i=0;i<=100;i++) {    
   var span = document.createElement('span');
   span.textContent = i;
   numbers.appendChild(span);
   if(i>30 && i<50) {
       span.style.color = 'red';
   }
}

document.body.appendChild(numbers);

Answer 2

您必须将document.write行更改为以下内容：

document.write("<span style='color: red'>" + String(i) + "</span>");

Answer 3

您可以使用<span>。试试这个：

    function color(thecolor, val) {
        return '<span style="color:' + thecolor + '"' + '>' + val + '</span>';
    }
    function func() {
        for (i = 0; i <= 100; i++) {
            if(i>30 && i<50)
            {
            document.write(color('green',i));
            }
           else
            {
               document.write(color('red',i));
            }
        }
    }

这是输出Screenshot

Answer 4

此函数的输出不会将（i）元素包含在块中。修改你的代码以将i括在html标签中应该可以做到这一点！

<HTML>
<body>
<script>
for(i=0;i<=100;i++) {
    if(i>30 && i<50) {
       document.write('<FONT COLOR="red">' + i + '</font>');
    } else {
       document.write('<Font Color="black">' + i + '</font>');
    }
}

<script>
<body>
<HTML>

您可以使用case语句，甚至可以遍历一系列颜色。我首选的方法是使用jquery选择器和css类。这是这种方法的JSFiddle。

在JavaScript中打印一系列具有不同颜色的数字

4 个答案: