一些前台功能代码实现

1.checkbox全选多选以及获取选中项

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">


function hs(){  
  var s = document.getElementsByName("chkStudent"); 
  var s2 = "";
   for( var i = 0; i < s.length; i++ )
   { 
    if ( s[i].checked ){
     s2 += s[i].value+',';
    }
   } 
   s2 = s2.substr(0,s2.length-1);//去掉最后的逗号
   alert(s2); 
}

 $(function() {
        //全部选择
               $("#checkAll").click(function() {
                    $('input[name="chkStudent"]').attr("checked",this.checked);
                });
        //根据项目的选择判断全选是否选中
                var $subBox = $("input[name='chkStudent']");
                $subBox.click(function(){
                    $("#checkAll").attr("checked",$subBox.length == $("input[name='chkStudent']:checked").length ? true : false);
                });
            });
</script>
<style type="text/css">

</style>
</head>
<body>
<INPUT TYPE="checkbox" NAME="chkStudent" value=1>1<br>
<INPUT TYPE="checkbox" NAME="chkStudent" value=2>2<br>
<INPUT TYPE="checkbox" NAME="chkStudent" value=3>3<br>
<INPUT TYPE="checkbox" NAME="chkStudent" value=4>4<br>
<INPUT TYPE="checkbox" NAME="chkStudent" value=5>5<br>
<input id="checkAll" type="checkbox" />全选<br>
<INPUT TYPE="button" value='查看结果' onclick="hs()">
</body>
</html>

2.setTimeout与setinterval的区别：

setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束。如果运行的代码中再次运行同样的setTimeout命令，则可循环运行。
setinterval是循环运行的，即每到设定时间间隔就触发指定代码。这是真正的定时器。
setinterval使用简单，而setTimeout则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行，比如第一次1秒，第二次2秒，第三次3秒……

（1）用定时器实现简单的时钟

<html>
<head>
<script language=javascript>
var int=self.setInterval("clock()",50);
function clock()
  {
  var t=new Date();
  document.getElementById("clock").value=t;
  document.getElementById("clock2").innerHTML=t;
  }
</script>
</head>
<body>
<input type="text" id="clock" size="35" />
<div id="clock2"></div>
<button onclick="window.clearInterval(int)">
Stop interval</button>
</body>
</html>

（2）用setTimeout实现简单的时钟

<head> 

<title>页面动态时钟</title>

<script language="javascript">

function changeTime(){ 

var date = new Date();

var txt = date.getYear()+1900+"-"+chang((date.getMonth()+1)+"")+"-"+chang(date.getDate()+"")+" "+chang(date.getHours()+"")+":"+chang(date.getMinutes()+"")+":"+chang(date.getSeconds()+"");
switch(date.getDay()){
case 0:txt = txt+" 星期日";break;
case 1:txt = txt+" 星期一";break;
case 2:txt = txt+" 星期二";break;
case 3:txt = txt+" 星期三";break;
case 4:txt = txt+" 星期四";break;
case 5:txt = txt+" 星期五";break;
case 6:txt = txt+" 星期六";break;
}
document.getElementById("time").innerHTML=txt;
//document.write(txt);
setTimeout("changeTime()",1000);
}
function chang(txt){ //为一个数字时前面加0

if(txt.length==1){

return "0"+txt;
}
return txt;
}
</script> 

</head>

<body onload="changeTime();">

<div id="time"></div>

</body>

 

posted @ 2013-03-25 14:17  CalronLoveRonnie  阅读(297)  评论(0)  编辑  收藏  举报
AmazingCounters.com