1

我想显示随机的文本，所以我偶然发现了这段代码：

<html>
<head>
    <script type="text/javascript">
    var textarray = [
       "hi",
       "hello there",
       "how r u",
       "where r u"
    ];

    function RndText() {
       var rannum= Math.floor(Math.random()*textarray.length);
       document.getElementById('ShowText').innerHTML=textarray[rannum];
    }

    onload = function() { RndText(); }

</script>
</head>
<body>
     <div id="ShowText"></div>
</body>

</html>

但是，我需要做的是在我的文本数组中有动态输入，让我们从无序列表的内容中说：

 <div id"textPool">
    <ul>
        <li>Hi</li>
        <li>hello</li>
    </ul>
 </div>

这怎么可能？

感谢任何帮助...

4

5 回答 5

0

我玩弄了你的问题，但我不知道结果是否符合你想要的。看看这个演示，让我知道。

  • inittextarray:根据实际的 HTML 列表填充，然后调用shuffle.
  • addInputtextarray：向then 调用添加一个新项目showList。
  • showList: 输出 的内容textarray。
  • shuffle：如果项目是随机的，则输出一个。

var textarray = [],
    input, list, result;

function init() {
    var items;
    input = document.getElementsByTagName('input')[0];
    list = document.getElementById('list');
    result = document.getElementById('result');
    items = list.getElementsByTagName('li');
    items = Array.prototype.slice.call(items, 0, items.length);
    while (items.length) {
        textarray.push(items.shift().innerHTML);
    }
    shuffle();
}
 
function addInput() {
    if (input.value) {
        textarray.push(input.value);
        input.value = '';
        showList();
    }
}
 
function showList() {
    list.innerHTML = 'textarray :';
    list.innerHTML += '<ul><li>' + textarray.join('</li><li>') + '</li></ul>';
}
 
function shuffle() {
    var rannum = Math.floor(Math.random() * textarray.length);
    result.innerHTML = textarray[rannum];
}

onload = init;
*{font-family:Consolas}
.panel{border:1px solid #ccc;padding:10px;margin-bottom:10px}
<div class="panel">
    <button onclick="shuffle()">Shuffle</button>
    <span>: "<span id="result"></span>"</span>
</div>
<div class="panel">
    <input type="text" />
    <button onclick="addInput()">Add</button>
</div>
<div class="panel" id="list">
    textarray :
    <ul>
        <li>hello</li>
        <li>world</li>
    </ul>
</div>

于 2013-10-23T18:17:15.490 回答
0

textarray使用以下代码（在功能上稍作更改RndText()）：

<html>
<head>
    <script type="text/javascript">
    var textarray = [];

    function RndText() {
        for(var i=0; i<document.getElementById('textPool').getElementsByTagName('li').length; i++)
            textarray.push(document.getElementById('textPool').getElementsByTagName('li')[i].innerHTML);
        var rannum= Math.floor(Math.random()*textarray.length);
        document.getElementById('ShowText').innerHTML=textarray[rannum];
    }

    onload = function() { RndText(); }

</script>
</head>
<body>
     <div id="ShowText"></div>
     <ul id="textPool">
        <li>hi
        <li>hello there
        <li>how r u
        <li>where r u
     </ul>
</body>

</html>

这是小提琴

于 2013-10-23T18:40:38.887 回答
0

你可以使用

var textArray = document.getElementById('somelistid').getElementsByTagName('li')

这会给你一个数组。然后您可以使用数组设置这样的文本。

document.getElementById('ShowText').innerHTML=textarray[rannum].innerHTML;

但是，您应该真正开始使用 jQuery。

var textArray = ('#somelistid').find('li');

当您稍后设置它时，您将使用 .text() 方法而不是 innerHTML。这应该运行得更快。

我实际上认为您应该开始研究 angularJS 之类的东西。

这是一些简单的例子http://www.tomharris.net/test/angularJS

并在这里进行了很好的培训 http://angularjs.org/

于 2013-10-23T17:56:42.227 回答
0

干得好。

function randomText() {
    var textPool = document.getElementById("textPool");
    var listItems = textPool.getElementsByTagName("li");
    var texts = [];

    for(var i = 0; i < listItems.length; i++ ) {
        texts.push(listItems[i].innerText);
    }

    var random = Math.floor(Math.random()*listItems.length);
    document.getElementById('ShowText').innerHTML = texts[random];
}

window.onload = randomText;

小提琴示例

于 2013-10-23T18:42:37.367 回答
-1

如果您愿意使用 jQuery，那么以下将起作用：

document.getElementById('ShowText').innerHTML=$('#textPool li:eq('+rannum+')').text();
于 2013-10-23T17:49:52.197 回答