javascript - 用纯 Js 在每个 li 上应用函数

标签 javascript loops

我已经完成了一个使用语音 API 读出元素内容的函数,我有一个这样的新闻列表

<ul id="news">
    <li>
How Instagram Is Winning Gold at the 2012 Olympics [INFOGRAPHIC]
   </li><li>
      Flickr Photo of Insect Identified As Never-Before-Seen Species [VIDEO]
   </li><li>
      The Upside to the End of the Olympics [COMIC]
   </li><li>
      40 Digital Media Resources You May Have Missed
   </li><li>
      19 Resources to Improve Your Photo and Video Skills
   </li><li>
      Top 10 Twitter Pics of the Week
   </li><li>
      Can Employees Be Trusted to Work From Home? [INFOGRAPHIC]
   </li><li>
      Capture Ghosts at Foursquare Spots With ‘Ghostbusters’ iOS Game
   </li><li>
      Dog Is Terrified of Low-Fat Lamb Jerky [VIDEO]
   </li><li>
      5 Tips to Take Food Photos Good Enough to Eat
   </li><li>
      The 10 Most Stunning Images of Mars in History
   </li><li>
      The Many Looks of Spiderman Over the Past 50 Years [INFOGRAPHIC]
   </li><li>
      Top Ten GIFs of the Week
   </li><li>
      Romney and Obama Both Called Their Veeps the ‘Next President’ [VIDEO]
   </li><li>
      Paul Ryan Visited Facebook, Met Zuckerberg [PICS]
   </li><li>
      Romney’s Logo Looks Like Toothpaste [PICS]
   </li><li>
      Paul Ryan, Romney’s VP Pick, Has Sizable Online Presence
   </li><li>
      Get Back in Kitchen With This Specialized Recipe Site
   </li>

</ul>

现在正在使用此功能朗读文本。

function speak() {
    //speechapi.speak(document.getElementById('start').innerHTML,"male");
    speechapi.speak(document.getElementById('start').innerHTML,"male");

}

如何让它读取每个 li 之间的间隔很小?我不想使用 jquery 之类的。 但我做不到。

最佳答案

这是一种实现方法,每行之间延迟 2 秒:

var news = document.getElementById('news').getElementsByTagName('li');

var newsItem = 0;
var speechInterval = setInterval(function(){
    speechapi.speak(news[newsItem].innerHTML, "male");
    if (++newsItem === news.length){
        window.clearInterval(speechInterval);
    }
}​, 2000);

DEMO, inserting text in a <p> tag instead of speaking it

关于javascript - 用纯 Js 在每个 li 上应用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11919548/

相关文章:

c# - 我如何总结每 5 个数字而不是所有数字?

c# - 循环迭代父节点,直到找到特定标签

javascript - 正则表达式 : How to exclude whitespace

javascript - 如何按顺序执行 Node JS 函数

javascript - 正则表达式修改与替换模式的匹配

MYSQL - 想要迭代位于 1 个表中的日期,并计算另一个表中的记录数

PHP循环几个月,从12月开始

javascript - react Material 用户界面 : How to disable typing in Autocomplete text field?

javascript - 在 nginx 后面部署 deepstream.io

java - 针对 : while (true) 的优化