前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >实用的JavaScript(持续添加)

实用的JavaScript(持续添加)

作者头像
Java架构师必看
发布2021-05-17 09:57:16
1.2K0
发布2021-05-17 09:57:16
举报
文章被收录于专栏:Java架构师必看

Checkbox类:

1.实现checkbox的全选功能

代码语言:javascript
复制
<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>
代码语言:javascript
复制
<td><!-- 全选checkbox -->
	<s:checkbox name="checkall" id="checkall" value="" cssClass="checkbox" οnclick="checkAll()"/>
</td>
<td><!-- 子checkbox -->
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" οnclick="changeCheckCount()"/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" οnclick="changeCheckCount()"/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" οnclick="changeCheckCount()"/>
   <s:checkbox name="ids"  fieldValue="" cssClass="checkbox" οnclick="changeCheckCount()"/>
</td>

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

代码语言:javascript
复制
<script type="text/javascript">
//1、获取checkbox选中的个数:count
//2、将选中的checkbox的值(此例子为id)组织成"id,id,id,..."类型的字符串,方便action获取:ids
function 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> 
代码语言:javascript
复制
<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实现下拉列表的联动,实现省份和城市的关联

代码语言:javascript
复制
<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>
代码语言:javascript
复制
<tr>
	<td>省份:</td>
	<td>
        <s:select list="#provinceList" name="province" id="province"  
                listKey="name" listValue="name" 
                headerKey="" headerValue="--------"
                cssStyle="width:90%" οnchange="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函数

代码语言:javascript
复制
/**	通过省份显示对应城市	
 * @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一个JsonConfig
		JsonConfig config=new JsonConfig();
		//设置不要获取的属性列,只取city表里的name属性,根据自己定义的city表进行定义,
		config.setExcludes(new String[]{"id","pycode","pid","postcode","areacode"});
		//将List转换为jsonArray
		JSONArray jsonArray=JSONArray.fromObject(cityList,config);
		response.setCharacterEncoding("utf-8");
		//将jsonArray转成字符串后发送给jsp页面
		response.getWriter().print(jsonArray.toString());
	}
	return null;
}

工具类

1.实现一个实时时钟

js文件:onclock.js

代码语言:javascript
复制
//此文件为:onclock.js
function 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页面代码如下:

代码语言:javascript
复制
<%@ 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文件中的配置,如:去掉年月日等等。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Checkbox类:
  • Select类
  • 工具类
相关产品与服务
云服务器
云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档