Форумы портала PHP.SU :: Подчёркивание следующей буквы при условии, что прежняя набрана в соответствии с вышеуказанным шаблоном.

Задаются две равные по идентичности строки (всё что вводится в <input> данной строке - должно быть тождественно). По мере продвижения курсор, реализованый в виде стиля нижнего подчёркивания .style.textDecoration = "underline", движется до excercise_results() - завершение конца набора.

Содержимое каждого заданного текста дополнительно содержит в себе завершающую точку и пробел в конце (то есть два дополнительно).
Это можно видеть в трёх моментах:
length - 2
[i + 2]
второй:
extraNodes > 2
[pos + 2]
и третий:
(k - 1)
&
(k - 2)

var xp = 0 - начальная позиция со старта набора.

CODE (htmlphp):
скопировать код в буфер обмена

 
<body>
    <p id="isdivNode"><span>Staff. </span>
    </p>
    <form>
        <input size="55" onkeypress="compare(event)">
    </form>
    <script>
        var strtest = "Staff. ";
        divNode = document.getElementById("isdivNode");
        var xp = 0;
        deep = true;
        divNode.childNodes[0].style.textDecoration = "none";
        for (i = 0; i < strtest.length; i++) {
            if (i < divNode.childNodes.length - 2) {
                if (divNode.childNodes[i + 2].nodeType == 1) {
                    divNode.childNodes[i + 2].firstChild.data = strtest.charAt(i);
                }
            } else {
                myNode = divNode.firstChild.cloneNode(deep);
                myNode.firstChild.data = strtest.charAt(i);
                divNode.appendChild(myNode);
            }
        }
        extraNodes = divNode.childNodes.length - strtest.length;
        pos = strtest.length;
        while (extraNodes > 2) {
            divNode.childNodes[pos + 2].firstChild.data = "";
            pos++;
            extraNodes--;
        }
        divNode.childNodes[0].style.color = "white";
        document.forms[0].elements[0].value = "";
 
        function compare(e) {
            var k = strtest.length;
            if (xp < (k - 1)) {
                var keyChar = String.fromCharCode(e.which);
                if (strtest.charAt(xp) == keyChar) {
                    divNode.childNodes[xp + 2].style.textDecoration = "none";
                    xp += 1;
                    if (xp > (k - 2)) excercise_results();
                    divNode.childNodes[xp + 2].style.textDecoration = "underline";
                }
            }
        }
 
        function excercise_results() {
            confirm("fin");
        }
    </script>
</body>
 

(Отредактировано автором: 16 Октября, 2014 - 17:29:25)