如何在执行时为HTML上与JavaScript代码行相对应的每个文本行设置颜色属性？

Question

所以说吧，我有一个这样的HTML页面：

<!DOCTYPE html>
<html>
    <head>
        <script src="script.js"/> <!--this calls my script-->
    </head>
    <body>
        <div>
            <ul>
                <li>var a = 1;</li>
                <li>var a = 2;</li>
                <li>var a = 3;</li>
                <li>var a = 4;</li>
                <li>var a = 5;</li>
            </ul>
        </div>
        <input type="submit" onclick="HighlightCode()" />
    </body>
</html>

我的script.js包含：

function HighlightCode()
{
    for(var i = 0; i < 5; i++)
    {
        var a = i + 1;
        var ul = document.getElementByTagName("ul");

        //get each <li> and set color attribute to red
        ul.children[i].style.color = "red";

        // reset previous line back to black
        if(i != 0)
            ul.children[i - 1].style.color = "black";

        // some kind of function that delay the loop 1000ms before increasing variable "i" 
        Sleep(1000); 
        //I have no idea what the function name is in Javascript, in C# I often use Thread.Sleep(1000);
    }
}

我想在每次循环执行时突出显示每个“ li”行！

希望有人能帮忙！ 谢谢！

Answer 1

使用CSS和JavaScript：

CSS：

@keyframes test{
    0%{color:black}
    50%{color:red}
    100%{color:black}
}

.blinkyNode{
    animation-name: test;
    animation-duration: 2s;
    animation-timing-function: steps(1,start);
}

javascript：

HighlightCode = function(){
    var ul = document.getElementsByTagName("ul")[0];
    for(var i = 0; i < ul.children.length;i++){        
      ul.children[i].className = "";    
      ul.children[i].style.animationDelay = "";
      ul.children[i].offsetWidth = ul.children[i].offsetWidth;
      ul.children[i].style.animationDelay = i+"s";
      ul.children[i].className = "blinkyNode";
    }
}

笔记：

getElementByTagName不存在。 它是getElementsByTagName并返回一个数组。
提交按钮仅适用于表单
offsetWidth = offsetWidth东西是必需的，因为否则浏览器不会意识到已经读取了该类。

测试jsfiddle

如何在执行时为HTML上与JavaScript代码行相对应的每个文本行设置颜色属性？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-24 13:21:46

如何在执行时为HTML上与JavaScript代码行相对应的每个文本行设置颜色属性？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-24 13:21:46

解决方案1
0 已采纳 2016-06-24 13:21:46