zoukankan      html  css  js  c++  java
  • 一些前台功能代码实现

    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>
  • 相关阅读:
    Atitit. 查找linux 项目源码位置
    Atitit.用户权限服务 登录退出功能
    Atitit.js javascript的rpc框架选型
    Atitit.php  nginx页面空白 并返回500的解决
    Atitit .linux 取回root 密码q99
    Atitit.报名模块的管理
    Atitit.基于时间戳的农历日历历法日期计算
    Atitit.excel导出 功能解决方案 php java C#.net版总集合.doc
    我的博客开通了
    (转)列举ASP.NET 页面之间传递值的几种方式
  • 原文地址:https://www.cnblogs.com/cuiyf/p/2980695.html
Copyright © 2011-2022 走看看