当前位置：首页 → 问答吧 → 求助，JQUERY遍历元素

求助，JQUERY遍历元素

时间：2010-04-11

来源：互联网

一个页面有多个span，我把ID分别定义成： time_left_0，time_left_1…… span的数量与从数据库取出的数据有关，不定数的。现在我想每秒改变一下每个SPAN的值，实现倒记时功能，请问怎么做？
谢谢~~

作者: baiyuxiong 发布时间: 2010-04-11

我在CI论坛见过你吧？？？
你设个定时器就好了呢，js的setInterval函数

作者: ywqbestever 发布时间: 2010-04-11

我写了个例子，你看看吧。

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
font-size:12px;line-height:20px;
}
span {
width:30px;height:20px;padding:1em;background:#FF0000;margin:2px;display:block;float:left;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js" ></script>
<script type="text/javascript">
//<![CDATA[
var spans,timer,flag;
flag = false ;
function my_start(){
if(!flag){
timer = setInterval("countDown()",1000);
spans.css("background","#ccc");
flag = !flag;
}else{
alert("已经开始了");
}
}
function my_stop(){
if(flag){
clearInterval(timer);
spans.css("background","red");
flag = !flag;
}else{
alert("已经暂停了");
}
}
function countDown(){
spans.each(function(){
$(this).text(parseInt($(this).text())+1);
});
}
$(function(){
span = "";
for(i = 0 ; i <= 100 ; i ++) //循环生成的span
span += "<span id=\"time_left_" + i + "\">" + i + "</span>";
$(document.body).append(span);
spans = $("span[id*='time_left_']");
});
//]]>
</script>
</head>
<body>
<input type="button" value="开始" onclick="my_start();" />
<input type="button" value="暂停" onclick="my_stop();" />
<div style="clear:both"></div>
</body>
</html>