【JavaScript】练习三

最新推荐文章于 2026-01-07 00:05:42 发布

原创最新推荐文章于 2026-01-07 00:05:42 发布 · 279 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

作业专栏收录该内容

14 篇文章

订阅专栏

1、实现全选反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body ><center>
		全选<input type="checkbox" name="controller"  onclick="fun();"/>
		反选<input type="checkbox" id="controller2"  onclick="fun2();"/>
		<div>
			 <input type="checkbox" name="goodsid" value="1" />1
			 <input type="checkbox" name="goodsid" value="2" />2
			 <input type="checkbox" name="goodsid" value="3" />3
			 <input type="checkbox" name="goodsid" value="4" />4
			 <input type="checkbox" name="goodsid" value="5" />5 
		</div></center>
	</body>
</html>

jsp片段：

<script>
			 function  fun(){
			  var  chEle =	document.getElementsByName("controller")[0];
			  var eleCol = document.getElementsByName("goodsid");
			  for(var i=0;i<eleCol.length;i++){
			  	  eleCol[i].checked=chEle.checked;
			  }
			 }
			 
			 function fun2(){
			 	   
			   	    var eleCol = document.getElementsByName("goodsid");
			   	    for(var i=0;i<eleCol.length;i++){
			  	     
			  	        if(eleCol[i].checked){
			  	        	eleCol[i].checked=false;
			  	        }else{
			  	        	eleCol[i].checked=true;
			  	        }
			       }
			  
			 }
			 
		</script>

2、实现抽奖
html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>抽奖</title>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box">
				<span id="show">
					奖品
				</span>
			</div>
			<button id="start" onclick="start()">开始抽奖</button>
		</div>
	</body>
</html>

css：

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.container {
				width: 800px;
				height: 800px;
				border: 1px dashed red;
				position: absolute;
				left: 50%;
				margin-left: -400px;
				text-align: center;
				line-height: 100px;
			}
			.container .box, .box2 {
				width: 300px;
				height: 300px;
				background: red;
				border-radius: 50%;
				margin: auto;
				margin-top: 50px;
				text-align: center;
				line-height: 300px;
			}
			.box2 {
				background: deepskyblue;
			}
			#show {
				font-size: 30px;
				color: white;
				font-weight: bold;
			}
			#start {
				width: 300px;
				height: 50px;
				background: palevioletred;
			}
		</style>

jsp：

<script type="text/javascript">
				var goods= ["A", "B", "C", "D", "E", 
                         "X", "S", "H"];
                var showspan = document.getElementById("show"); 
                var btn = document.getElementById("start");
                var timer;
                function start(){
                    var btnText = btn.innerText;                
                    if(btnText=='开始抽奖'){
                    	 btn.innerText='暂停';
                    	timer = setInterval(function(){
                     	 var  index=	Math.floor(Math.random()*goods.length);//0-1,不包含1
                
                        showspan.innerText =  goods[index];
                        },100);
                    }else{                   	
                     	  clearInterval(timer);
                    	  btn.innerText='开始抽奖';
                    }
                }
		</script>

3、实现购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				width: 500px;
			}
		</style>
	</head>
	<body><center>
		<table border="1">
			<tr>
				<td>序号</td>
				<td>商品信息</td>
				<td>单价</td>
				<td>数量</td>
				<td>总价</td>
			</tr>
			<tr>
				<td>1</td>
				<td>
					iphone 8
				</td>
				<td>
					￥<span class="price">5899</span>
				</td>
				<td>
					<input type="button" value="-" onclick="minus(this)"/><input type="text" value="1" class="count"/><input type="button" value="+" onclick="add(this)"/>
				</td>
				<td>
					￥<span class="sumPrice"></span>
				</td>
			</tr>
			<tr>
				<td>2</td>
				<td>
					iphone xs
				</td>
				<td>
					￥<span class="price">8999</span>
				</td>
				<td>
					<input type="button" value="-" onclick="minus(this)"/><input type="text" value="1" class="count"/><input type="button" value="+" onclick="add(this)"/>
				</td>
				<td>
					￥<span class="sumPrice"></span>
				</td>
			</tr>
			<tr>
				<td colspan="3">￥<span id="totalPrice"></span></td>
				<td>结算</td>
			</tr>
		</table>
	</center>
	</body>
</html>

<script>
	function minus(ele){
		 var inputEle = ele.nextSibling;
		 var val = inputEle.value;
		 if(val==1){
		 	alert('不能再减');
		 }else{
		 	inputEle.value=parseInt(val)-1;
		 }
		 cal();
	}
	function add(ele){
		var inputEle=ele.previousSibling;
		 var val = inputEle.value;
		 
		 inputEle.value=parseInt(val)+1;
		cal();
	}
	function cal(){
		
		var spanEles = document.getElementsByClassName("sumPrice");
		var priceEles = document.getElementsByClassName("price");
		var countEles = document.getElementsByClassName("count");
		var all=0;
		for(var i=0;i<spanEles.length;i++){
			
			var spanEle = spanEles[i];
			var price = priceEles[i].innerText;//对应的单价
			var count = countEles[i].value;
		 
			spanEle.innerText=parseFloat(price)*parseInt(count);
			all+=parseFloat(price)*parseInt(count);
		}
		document.getElementById("totalPrice").innerText=all;
	}
	cal();
</script>

4、实现图片轮播
html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body >
		<input type="button" onclick="show();" value="点击"/>
		<div id="adList">
			<img src="img/a1.jpg" id="a"/ >
			<ul>
				<li><a href="#" onmouseover="doOver(0)" class="a_hover" onmouseout="doOut()" id="num0">1</a></li>
				<li><a href="#"  onmouseover="doOver(1)" onmouseout="doOut()" id="num1">2</a></li>
				<li><a href="#"  onmouseover="doOver(2)" onmouseout="doOut()" id="num2">3</a></li>
				<li><a href="#"  onmouseover="doOver(3)" onmouseout="doOut()" id="num3">4</a></li>
			</ul>
		</div>
	
	</body>
</html>

CSS:

<style>
			*{
				margin: 0;
				padding: 0;
			}
			#adList{
				position: relative;
				width: 300px;
				
				border: 1px solid green;
			}
			#adList img{
				width: 300px;height:300px ;
				vertical-align: middle;
			}
			#adList ul{
				overflow: hidden;
				position: absolute;
				right: 10px;
				bottom:10px;
			}
			#adList li{
				float: left;
				list-style: none;
			}
			#adList li a{
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 10px;
				background: #fff;
				text-align: center;
				line-height: 20px;	
				margin-right: 10px;	
				text-decoration: none;	
				color: black;	
			}
			/*#adList li a:hover{
				background: red;
				color: #fff;
			}*/
			#adList li .a_nomal{
				background: #fff;
				color: #000;
			}
			#adList li .a_hover{
				background: red;
				color: #fff;
			}
		</style>

jsp：

<script>
	var index=0;
	var timer;
	function doOut(){
		timer = setInterval(show,2000);
	}

	function show(){
		showPic(index);
		index++;
		if(index==3){
			index=0;
		}
	}
	function showPic(n){
		index=n;
		var pn = n+1;
		var imgEle = document.getElementById("a");
		imgEle.src="img/a"+pn+".jpg";
	    var liEles =	document.getElementsByTagName("li");
	    for(var i=0;i<liEles.length;i++){
	    	if(i==n){
	    		liEles[i].firstChild.className="a_hover";
	    	}else{
	    		liEles[i].firstChild.className="a_normal";
	    	}
	    }
	}
	timer = setInterval(show,1000);
	function doOver(n){		
		showPic(n);
		clearInterval(timer);
	}
</script>