Question

我有一个脚本可以更改背景颜色并根据用户输入播放声音。声音和颜色变化基于输入的长度而发生。我还有一个div，我想显示正在进行更改的字母，我来自for-loop。所以div内容，i，也会随着每次点击和颜色变化而变化。如果用户输入为＆＃34; hello＆＃34;，则div内容应逐一从h更改为e，更改为l，更改为l，更改为o。我有这个，但当然它只显示输入多长时间。我将不胜感激任何帮助。

document.getElementById('icard').innerHTML = i;

jsBin

Answer 1

list3包含您的角色数组。所以你需要选择循环索引处的字符：

 document.getElementById('icard').innerHTML = list3[i];

Answer 2

这是您的最终代码。我修好了它。快乐编码!!

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body{background:#ccc;}
    </style>
</head>

<body>  

        <form name="name1" method="post" id="name1">
        <select class="select1" id="selectid" name="selectuser" onChange='Choice();'>
        <option>Your text</option>
        <option value="1">English</option>
        <option value="2">French</option>
        <option value="3">German</option>
        <option value="4">Turkish</option>
        <option value="5">Slovak</option>
        <option value="6">Spanish</option>
        </select>
        <input class="input1" id="ids" name="id" onkeyup="getVal()" type="text"  o>
        <input type="button" value="Submit" name="B1" onclick="getText()">
        </form>  

    <div id="icard" class="drag" style="left: 0px; top: 0px; width:10%;  height:10%;"></div>
    <audio id="audio">
    <source src='http://www.mediacollege.com/downloads/sound-effects/hit/hit-01.wav' type="audio/mpeg" />
    </audio>
    <audio id="audio2">
    <source src='http://www.mediacollege.com/downloads/sound-effects/hit/hit-pipe.wav' type="audio/mpeg" />
    </audio>



    <script language="JavaScript">

    function getText() {
    var myString = document.name1.ids.value.toLowerCase();
    var list3 = myString.split('')
    var list1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
    var list2 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', "ı", 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];


    for (var i = 0; i < list3.length; i++) {

       setTimeout(playOne.bind(null, list3[i]), i*550,j=i);
        //document.getElementById('icard').innerHTML = i;
        //document.body.style.backgroundColor = '#' + //Math.random().toString(16).slice(2, 8);


    }

    function playOne(entry,j) {

        if (list1.indexOf(entry) >= 0) {
           setTimeout(audio.play(null, list1[i]), i*550);
            document.getElementById('icard').innerHTML = j+1;
            document.body.style.backgroundColor = '#' + Math.random().toString(16).slice(2, 8);


        } else if (list2.indexOf(entry) >= 0) {
           setTimeout(audio2.play(null, list2[i]), i*550);
            document.getElementById('icard').innerHTML = j+1;
            document.body.style.backgroundColor = '#' + Math.random().toString(16).slice(2, 8);
        }
    }
}

    </script> 

    <script>
    var ids = new Array();
    ids[0] = "";
    ids[1] = "hello";
    ids[2] = "salut";
    ids[3] = "hallo";
    ids[4] = "merhaba";
    ids[5] = "ahoy";
    ids[6] = "ola";
            function Choice() {
                y = document.getElementById("selectid");
                  document.getElementById("ids").value = ids[y.selectedIndex];
             }
    </script>

    <script>
    var audio = document.getElementById('audio');
    var audio2 = document.getElementById('audio2');
    </script>
</body>
</html>

总的来说，我只是通过迭代索引来运行并捕获相同的内容。那就是

在div中放置for-loop i

2 个答案: