如何在设定的时间量(3秒间隔)内更改div中的文本内容
如何在设定的时间量(3秒间隔)内更改div中的文本内容
提问于 2015-10-28 01:47:34
我有一个div，其中的内容需要在3秒的时间间隔内更改。我希望"top-3“部分每3秒更新一次，增加3个名字。
<div class="grid-80 mobile-grid-100">
<section class="top-3">
<div class="grid-33 mobile-grid-100">
<p class="pwr-ranking-name">#1 Juan Pablo Montoya</p>
</div>
<div class="grid-33 mobile-grid-100">
<p class="pwr-ranking-name">#2 Tony Stewart</p>
</div>
<div class="grid-33 mobile-grid-100">
<p class="pwr-ranking-name">#3 Mark Martin</p>
</div>
</section>
</div>所以它将从上面开始，然后3秒后它将显示，
<div class="grid-80 mobile-grid-100">
<section class="top-3">
<div class="grid-33 mobile-grid-100">
<p class="pwr-ranking-name">#4 New Name</p>
</div>
<div class="grid-33 mobile-grid-100">
<p class="pwr-ranking-name">#5 New Name</p>
</div>
<div class="grid-33 mobile-grid-100">
<p class="pwr-ranking-name">#6 New Name</p>
</div>
</section>
</div>我知道必须有一种更轻量级的方式来做到这一点，而不是运行一个内容滑块插件。谢谢!
回答 1
Stack Overflow用户
发布于 2015-10-28 03:23:41
也许是这样的？
<html>
<head>
</head>
<body>
<div class="grid-80 mobile-grid-100">
<section class="top-3">
<div class="grid-33 mobile-grid-100">
<p class="pwr-ranking-name">#1 John</p>
</div>
<div class="grid-33 mobile-grid-100">
<p class="pwr-ranking-name">#2 Anna</p>
</div>
<div class="grid-33 mobile-grid-100">
<p class="pwr-ranking-name">#3 Marta</p>
</div>
</section>
</div>
<script type="text/javascript">
var count = 3;
var names = ['John', 'Anna', 'Marta', 'Mike', 'Alexandre', 'Olivier', 'Elisabeth', 'Angelina', 'Sophie'];
var namesContainer = document.getElementsByClassName('pwr-ranking-name');
setInterval(function(){
for(var i = 0; i<3; i++){
namesContainer[i].innerHTML = '#' + (count+1) + ' ' + names[count];
count++;
if(count == names.length){
count = 0;
};
}
}, 3000);
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33375050
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号