实用的JavaScript(持续添加)

Checkbox类：

1.实现checkbox的全选功能

<script type="text/javascript">//全选checkbox：1、当全选checkbox勾选，子checkbox(name为'ids'的checkbox)自动全部勾选//2、当全选checkbox取消勾选，子checkbox自动全部取消勾选function  checkAll(){      if($("#checkall")[0].checked){      $("input[type='checkbox'][name='ids']").attr("checked","checked");      }else{      $("input[type='checkbox'][name='ids']").attr("checked",null);      }}//子checkbox：1、当所有子checkbox全部勾选时，全选checkbox自动勾选//2、当有一个子checkbox没有勾选时，全选checkbox自动改为未勾选function changeCheckCount(){       var count=0;   $("input[type='checkbox'][name='ids']").each(function(index,data){            if(this.checked){            count++;              }   });       if(count== $("input[type='checkbox'][name='ids']").length){       $("#checkall").attr("checked","checked");       }else{       $("#checkall").attr("checked",null);       }}</script>

<td><!-- 全选checkbox --><s:checkbox name="checkall" id="checkall" value="" cssClass="checkbox" onclick="checkAll()"/></td><td><!-- 子checkbox -->   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/></td>

2.获取checkbox被选中的个数，并将checkbox的值组织成字符串

<script type="text/javascript">//1、获取checkbox选中的个数：count//2、将选中的checkbox的值(此例子为id)组织成"id,id,id,..."类型的字符串,方便action获取：idsfunction checkbox(){    var count=0;    var ids="";    $("input[type='checkbox'][name='ids']").each(function(index,data){       if(this.checked){          count++;          if(count==1){              ids=$(this).val();          }else{              ids=ids+","+$(this).val();          }       }   });}</script> 

<td>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox"  />   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/>   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" "/></td>

Select类

1.jQuery实现下拉列表的联动，实现省份和城市的关联

<script type="text/javascript">//实现省份和城市的二级联动/*jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求,[]为可选属性,此例子选了[data],[callback] 参数：url (String) : 发送请求的URL地址.data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等) */function showCity(value){//通过action里的showCity函数实现通过省份名字获取对应省份下的城市列表,并返回相应的数据//{name:value}：value为省份下拉列表传过来的省份名字    $.post("${pageContext.request.contextPath}/company_showCity.action",{name:value} ,function(data,textStatuts){            //alert(data);            var dataObj=eval("("+data+")");            //alert(dataObj);                        //先删除之前一次加载的城市            $("select[name='city'] option[value!='']").remove();                        //将城市封装成option后加到select里,格式如下            // <select name="city" style="width:90%">                //<option value="">--------</option>            //</select>            for(var i=0;i<dataObj.length;i++){                  var $option=$("<option></option>");                  $option.attr("value",dataObj[i].name);                  $option.text(dataObj[i].name);                  $("select[name='city']").append($option);            }     });}</script>

<tr><td>省份：</td><td>        <s:select list="#provinceList" name="province" id="province"                  listKey="name" listValue="name"                 headerKey="" headerValue="--------"                cssStyle="width:90%" onchange="showCity(this.value)">        </s:select></td><td>城市：</td><td>    <s:select list="{}" name="city" id="city"               headerKey="" headerValue="--------" cssStyle="width:90%" >    </s:select></td></tr>

company.action中的showCity函数

/**通过省份显示对应城市 * @throws IOException **/public String showCity() throws IOException{//拿到jsp中省份的名字String name=request.getParameter("name");if(StringUtils.isNotBlank(name)){//通过省份名字拿到对应省份实体(下面查询城市时,用来拿省份id)Province province=provinceService.findProvinceByName(name);//通过省份id查询该省份下的所有城市List<City> cityList=cityService.findCityByPid(province.getId());//New一个JsonConfigJsonConfig config=new JsonConfig();//设置不要获取的属性列,只取city表里的name属性,根据自己定义的city表进行定义,config.setExcludes(new String[]{"id","pycode","pid","postcode","areacode"});//将List转换为jsonArrayJSONArray jsonArray=JSONArray.fromObject(cityList,config);response.setCharacterEncoding("utf-8");//将jsonArray转成字符串后发送给jsp页面response.getWriter().print(jsonArray.toString());}return null;}

工具类

1.实现一个实时时钟

js文件：onclock.js

//此文件为:onclock.jsfunction clockon(bgclock){var now=new Date();var year=now.getYear();var month=now.getMonth();var date=now.getDate();var day=now.getDay();var hour=now.getHours();var minu=now.getMinutes();var sec=now.getSeconds();var week;month=month+1;if(month<10) month="0"+month;if(date<10) date="0"+date;if(hour<10) hour="0"+hour;if(minu<10) minu="0"+minu;if(sec<10) sec="0"+sec;var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");week=arr_week[day];var time="";time=year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minu+":"+sec;if(document.all){bgclock.innerHTML="<b>"+time+"</b>";}var timer=setTimeout("clockon(bgclock)",200);} 

jsp页面代码如下：

<%@ page language="java" pageEncoding="UTF-8"%><!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" /><!-- 引入js文件，根据自己放的路径修改 --><script src="${pageContext.request.contextPath}/script/onclock.js"></script><title>无标题文档</title></head><!-- 在body内加入onLoad="clockon(bgclock)" --><body onLoad="clockon(bgclock)"><!-- 在想要放时间的地方加入下面这行代码即可 --><div align="left" id="bgclock"></div></body></html>

可以根据需求修改onclock.js文件中的配置，如：去掉年月日等等。