学习javaee第四天的小练习

于 2016-07-09 20:07:13 发布
阅读量383 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javaee 文章标签： java ee
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/css1223mjf/article/details/51867144
本文通过四个实战案例介绍了JavaScript的基本操作，包括全选反选、图片轮播、表格增删及二级选择联动等实用功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、这个练习是关于全选和反选的事件

<!DOCTYPE html>
<html>
  <head>
    <title>JS_four.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		
		
		
		function uncheckAll(element){
			//遍历item元素，然后让选中的item变成没有被选中
			var itemList = document.getElementsByName("item");
			for(var i=0;i<itemList.length;i++){
				if(itemList[i].checked==true){
					itemList[i].checked =false;
				}else{
					itemList[i].checked = true;
				}
			}
		
		}
		
		function checkAll(element){
			//得到当前元素的checked的值
			var statue = element.checked;
		
			var itemList = document.getElementsByName("item");
			//遍历item的元素，然后让他们的checked的值都变成选中的该状态的值
			for(var i=0;i<itemList.length;i++){
				itemList[i].checked = statue;
			}
			/*这个方式是可以，不过有点弊端,就是当点了其他的按钮之后，有些按钮会反选
			for(var i=0;i<itemList.length;i++){
				if(itemList[i].checked == true){
					itemList[i].checked = false;
				}else{
					itemList[i].checked = true;
				}
			}
			*/
		}
		function cal(){
			var sum = 0;
			var itemList = document.getElementsByName("item");
			//循环遍历item的属性，然后得到选中的按钮的value，加上sum，返回
			for(var i=0;i<itemList.length;i++){
				if(itemList[i].checked == true){
					var u = parseInt(itemList[i].value);
					sum +=u;
				}
			}
			var span = document.getElementById("span");
			span.innerHTML = sum;
		}
	</script>

  </head>
  
  <body>
    	
    	<table border="1px" align="center" style="text-align: center; width: 300px;height: 100px;">
    		<tr>
    			<td><input type="checkbox" name="all" onclick="checkAll(this)" />全选</td>
    			<td><input type="checkbox" name="all" onclick="uncheckAll(this)" />反选</td>   			
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="item" value="3000" /></td>
    			<td>电视机</td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="item" value="3000" /></td>
    			<td>电冰箱</td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" name="item" value="3000" /></td>
    			<td>DVD</td>
    		</tr>
    		<tr>
    			<td><input type="button" value="结算" onclick="cal()" /></td>
    			<td><span id="span"></span></td>
    		</tr>
    	</table>
  </body>
</html>



二、这个练习是关于图片的轮播小功能

<!DOCTYPE html>
<html>
  <head>
    <title>JS_four.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		window.setInterval("fun1()", 3000);
		
		function fun1(){
			//1、先获取到图片
			var sr = Math.ceil(Math.random()*3)
			var str = sr + ".jpg";
			
			//2、其次得到img元素
			var image = document.getElementById("image");
			image.setAttribute("src", str);
		}
	</script>

  </head>
  
  <body>
    	<img src="1.jpg" id="image" width="100px" height="100px" />
  </body>
</html>

三、关于表格的创建和删除的案例 

<!DOCTYPE html>
<html>
  <head>
    <title>JS_four.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		
		
		var count = 1;
		
		function add(){
			
			
		
			var tdelement1 = document.createElement("td");
			var inelement1 = document.createElement("input");
			var inelement2 = document.createElement("input");
			var tdelement2 = document.createElement("td");
			var trelement1 = document.createElement("tr");
			
			inelement1.setAttribute("type", "text");
			inelement1.setAttribute("name", "username");
			
			inelement2.setAttribute("type", "password");
			inelement2.setAttribute("name", "userpwd");
			
			tdelement1.appendChild(inelement1);
			trelement1.appendChild(tdelement1);
			
			tdelement2.appendChild(inelement2);
			trelement1.appendChild(tdelement2);
			
			var tb = document.getElementById("tb");
			tb.appendChild(trelement1);
			
			count++;
		}
		
		function del(){
			if(count>1){
				var tb = document.getElementById("tb");
				tb.removeChild(tb.lastChild);
				//alert(tb.lastChild);
				count--;
			}
		}
		
	</script>

  </head>
  
  <body>
    	
    	<table align="center" border="1px">
    		<tr>
    			<th>用户</th>
    			<th>密码</th>
    		</tr>
    		<tbody id="tb">
    			<tr>
    				<td><input type="text" name="username" /></td>	
    				<td><input type="password" name="userpwd" /></td>	
    			</tr>
    		</tbody>
    		<tfoot>
    			<tr>
    				<td>
    					<input type="button" value="添加" onclick="add()"  />
    					<input type="button" value="删除" onclick="del()" />
    				</td>
    			</tr>
    		</tfoot>
    	</table>
  </body>
</html>

四、关于二级选择链表的
<!DOCTYPE html>
<html>
  <head>
    <title>JS_four.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		
		}
		
		
			
			function changed(){
				var date=[["韶关","东莞","珠海"],["桂林","南宁","神盾"],["方式","长沙","邵阳"]];
				var province  = document.getElementById("province");
				var index = province.selectedIndex;
				
				var citys = date[index];
				
				var city = document.getElementById("city");
				
				city.options.length = 0;
				
				for(var i=0;i<citys.length;i++){
					var opt = document.createElement("option");
					opt.innerHTML = citys[i];
					city.appendChild(opt);
					
				}
				
			}
			
		
	</script>

  </head>
  
  <body>
    	
    	
    	
    	<select id="province" onchange="changed()">
    		<option>广东</option>
    		<option>广西</option>
    		<option>湖南</option>
    	</select>
    	<select id="city"></select>
  </body>
</html>

通过这几个案例，我能中学习到了一些js的基本方法和功能

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值