用JavaScript打印一系列不同颜色的数字

print a range of numbers with different colors in JavaScript

本文关键字：颜色 数字 JavaScript 打印 一系列      更新时间：2023-09-26

应该如何在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>

我认为最好将javascript的DOM（文档对象模型）与样式或类一起使用，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);

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

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

您可以使用<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));
            }
        }
    }

这是输出屏幕截图

此函数的输出不会将（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。

相关文章：