Question

所以，我希望做的是每隔半秒改变一组<p>标签内的文字。有问题的标签集在我体内的这段代码中：

<div class="outerdiv" id="col2">
    <p id="matrixText"></p>
</div>

在上面的代码下面，我有一个应该每半秒调用一次函数的JavaScript：

<script type="text/javascript">
    setInterval("changeMatrixText()", 500);
</script>

我的脑中定义了函数changeMatrixText：

function changeMatrixText()
{
    var newtext = "";
    for (var i = 0; i < 1000; i++)
        newtext += Math.floor((Math.random()*10)+1) % 2 ? "0" : "1";
    document.getElementById("matrixText").value = newtext;
}

如您所见，应该将文本设置为0和1的随机字符串。但它不起作用。知道为什么吗？

以防您需要查看我的整个代码.....

<html>

<head>
    <title>Simple encrypt/decrypt</title>

    <style type="text/css">

        body 
        {
            background-color: #A9F5F2;
            width: 900px;
            padding: 0px;
        }
        .outerdiv
        {
            margin: 5px;
            border: 2px solid #FF8000;
            background-color: #FFFFFF;
        }
        .outerdiv > p
        {
            margin: 5px;
            word-wrap:break-word
        }
        .outerdiv > h1
        {
            margin: 5px;
        }
        #col1
        {
            width: 500x;
            height: 800px;
            float: left;
        }
        #col2
        {
            width: 295px;
            height: 1500px;
            float: right;
            font-family: Courier New;
            overflow: hidden;
        }
        #title1div
        {
            font-family: Arial;
            width: 100%;
        }
        #insctdiv
        {
            font-family: Arial;
            width: 100%;
        }
        #iptdiv
        {
            height: 400px;
            width: 100%;
        }
        #buttonsdiv
        {
            text-align: center;
            width: 100%;
        }
        #inputText
        {
            width: 100%;
            height: 100%;
            resize: none;
        }

    </style>


    <script type="text/javascript">

        function encrypt()
        {
            var text = document.getElementById("inputText").value;
            newstring = "";
            /* Make newstring a string of the bit representations of 
               the ASCII values of its thisCharacters in order.
            */
            for (var i = 0, j = text.length; i < j; i++) 
            { 
                bits = text.charCodeAt(i).toString(2);
                newstring += new Array(8-bits.length+1).join('0') + bits;
            }
            /* Compress newstring by taking each substring of 3, 4, ..., 9 
               consecutive 1's or 0's and it by the number of such consecutive
               thisCharacters followed by the thisCharacter. 
               EXAMPLES:
                    "10101000010111" --> "10101401031"
                    "001100011111111111111" --> "0011319151"
            */
            newstring = newstring.replace(/([01])\1{2,8}/g, function($0, $1) { return ($0.length + $1);});      
            document.getElementById("inputText").value = newstring;
        }

        function decrypt()
        {
            var text = document.getElementById("inputText").value;
            text = text.trim();
            text.replace(/([2-9])([01])/g,
            function (all, replacementCount, bit) {
                return Array(+replacementCount + 1).join(bit);
            }).split(/(.{8})/g).reduce(function (str, byte) {
                return str + String.fromCharCode(parseInt(byte, 2));
            }, "");
            document.getElementById("inputText").value = text;
        }


        function changeMatrixText()
        {
            var newtext = "";
            for (var i = 0; i < 1000; i++)
                newtext += Math.floor((Math.random()*10)+1) % 2 ? "0" : "1";
            document.getElementById("matrixText").value = newtext;
        }

    </script>

</head>

<body>
    <div id="col1">
        <div class="outerdiv" id="title1div">
            <h1>Reversible text encryption algorithm</h1>
        </div>
        <div class="outerdiv" id="insctdiv">
            <p>Type in or paste text below, then click <b>Encrypt</b> or <b>Decrypt</b></p>
        </div>
        <div class="outerdiv" id="iptdiv">
            <textarea id="inputText" scrolling="yes"></textarea>
        </div>
        <div class="outerdiv" id="buttonsdiv">
            <button onclick="encrypt()"><b>Encrypt</b></button>
            <button onclick="decrypt()"><b>Decrypt</b></button>
        </div>
    </div>
    <div class="outerdiv" id="col2">
        <p id="matrixText"></p>
    </div>
    <script type="text/javascript">
        setInterval("changeMatrixText()", 500);
    </script>
</body>

</html>

从本质上讲，我试图让我的页面的右栏在每半秒钟内在一个0和1的新字符串中打印，有点像在计算机屏幕上电影 The Matrix ，如果你抓住了我的漂移。

Answer 1

document.getElementById("matrixText").value = newtext;

.value用于表单字段，而不是使用

document.getElementById("matrixText").innerHTML = newtext;

你的changeMatrixText函数中的

Answer 2

根据MDN，具有值属性的元素包括<button>，<option>，<input>，<li>，<meter>，{{ 1}}和<progress>。您需要设置<param>。

innerHTML

到

document.getElementById("matrixText").value = newtext;

和

document.getElementById("matrixText").innerHTML = newtext;

到

setInterval("changeMatrixText()", 500);

<强> Working Demo

Answer 3

您是否尝试更改setInterval方法以接受第一个参数作为函数本身（名称，减去括号），而不是字符串......

Answer 4

以下是如何执行此操作的示例：

http://jsfiddle.net/35W4Z/

主要区别在于<p>元素没有.value属性。而是使用innerHTML属性（如JSFiddle示例中所示）

希望这有帮助！

Answer 5

为了好玩，我把它放在一个小提琴中：http://jsfiddle.net/jdmA5/1/

所以有两件事，主要是：

1）您无法设置＆＃34;值＆＃34;一个div元素。您必须设置.innerHTML：

document.getElementById("matrixText").innerHTML = newtext;

2）这可能是因为我在小提琴中构建了这个，但是setInterval因为没有像你期望的那样运行而臭名昭着，除非你给每个迭代都有自己的内存空间。我通过在匿名函数中包含对changeMatrix的调用来完成此操作：

setInterval(function() {changeMatrixText();}, 500);

查看jsfiddle链接以查看其实际效果。

使用JavaScript每隔半秒更改页面上的文本

5 个答案: