事件和几个JavaScript实例

最新推荐文章于 2022-03-12 10:56:37 发布

原创最新推荐文章于 2022-03-12 10:56:37 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript例子集合

本文深入解析JavaScript在实际应用中的多种场景，包括时间动态显示、图片的显示与隐藏、广告定时弹窗、轮播图实现、表格隔行变色、商品左右选择功能及省市二级联动等，每个案例都附带详细代码，帮助读者快速掌握JS编程技巧。

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

一： js：
ECMAScript：语法语句
BOM：
DOM：文档对象模型：

事件：
onclick：鼠标点击事件：
ondblclick：鼠标双击事件：
onchange：值改变事件：
onsubmit：必须要有返回值：
onfocus：获得焦点事件：　
onblur：失去焦点事件：
鼠标悬浮： onmouseover
鼠标移开：　onmouseout：
onkeyup：键盘弹起事件：
oninput：输入框值改变事件：

下面几个小例子：
动态显示时间：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
	</head>
	<body>
		<span id="span">
			
		</span>
		<input type="button" name="" id="" value="" onclick="getTimeFun();" />
		<script type="text/javascript">
				//获得当前的时间： 
			window.onload= function(){
				
				
			    window.setInterval("getTimeFun()",1000);
			}
			  
			  
			function getTimeFun(){
					var date= new Date();
					var strDate = date.toLocaleString();
				   // document.write(strDate);
				   var spanEle = document.getElementById("span"); 
				   spanEle.innerHTML= strDate; 
			}
			   
			
		</script>
		<label id="ab"></label>
	</body>
</html>

图片的隐藏和显示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
	
		<input type="button" name="" id="" value="showFun" onclick="showFun()";/>
		<input type="button" name="" id="" value="showFun" onclick="hiddenFun()";/>
		<img id="img1" src="../img/10.jpg" style="display: none;"  />
		
		
		
		<script type="text/javascript">
			var imgEle = document.getElementById("img1"); 
			function showFun(){
				imgEle.style.display = "block"; 
			}
			
			function hiddenFun(){
//				var imgEle = document.getElementById("img1"); 
					imgEle.style.display = "none"; 
			}
		</script>	
	</body>
</html>

广告的定时弹出和隐藏：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" style="display: none;" />
	
	    <script type="text/javascript">
	    	var imgEle = document.getElementById("img1"); 
			function showFun(){
				imgEle.style.display = "block"; 
				
				window.setTimeout("hiddenFun();",3000);
			}
			function hiddenFun(){
//				var imgEle = document.getElementById("img1"); 
				imgEle.style.display = "none"; 
			}
			window.onload= function (){
					//定时器： 
	    	window.setTimeout("showFun()",4000);
			}
	    
	    </script>
	</body>
</html>

轮播图:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="" value="btn" onclick="changeImg();" />
		<img id="img1" src="../img/1.jpg"/>
		
		<script type="text/javascript">
			window.onload= function(){
				window.setInterval("changeImg()",3000);
			}
			var index= 0; 
			function changeImg(){
				var imgEle = document.getElementById("img1");
				var curIndex = index%3+1; 
				imgEle.src= "../img/"+curIndex+".jpg";
				index++; 
			}
		</script>
	</body>
</html>

表格的隔行变色：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width="600px" id="tab">
			<tr >
				<td>
					<input type="checkbox" id="all" onclick="fun();"/>
				</td>
				<td>分类ID</td>
				<td>分类名称</td>
				<td>分类商品</td>
				<td>分类描述</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="pro" />
				</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="pro" />
				</td>
				<td>2</td>
				<td>成人用品</td>
				<td>充气的</td>
				<td>这里面的充气电动硅胶的</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox"  name="pro"/>
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="pro" />
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="pro" />
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
		</table>
		
		<script>
			window.onload= function(){
				
				//获得表格： 
				var tableEle = document.getElementById("tab");
				//获得所有的行： 
//				tableEle.getElementsByTagName("tr");//返回的是一个数组： 
                var rowsEle = tableEle.rows;
                //循环遍历得到每一个行： 
                rowsEle[0].bgColor="pink";
                for(var i=1; i<rowsEle.length;i++){
                	var rowEle = rowsEle[i]; 
                	
                	if(i%2==0){
                		rowEle.bgColor= "yellow";
                	}else{
                		rowEle.bgColor= "lime";
                	}
                }
			}
			
			/*
			 * 联动选择：
			 */
			function fun(){
				//alert("xx");
				var checkAllEle = document.getElementById("all"); 
				
				if(checkAllEle.checked){//说明被选中
					//获得所有的： 
					var checkedBoxesEle= document.getElementsByName("pro"); 
					//循环遍历得到每一个： 
					for(var i=0; i<checkedBoxesEle.length;i++){
						var checkEle = checkedBoxesEle[i]; 
						checkEle.checked=true; 
					}
				}else{
					var checkedBoxesEle= document.getElementsByName("pro"); 
					//循环遍历得到每一个： 
					for(var i=0; i<checkedBoxesEle.length;i++){
						var checkEle = checkedBoxesEle[i]; 
						checkEle.checked=false; 
					}
				}
			}
		</script>
	</body>
</html>

商品的左右选：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width="480px">
			<tr>
				<td>分类名称</td>
				<td><input type="text" value="手机数码"/></td>
			</tr>
			<tr>
				<td>分类描述</td>
				<td><input type="text" value="这里面都是手机数码"/></td>
			</tr>
			<tr>
				<td>分类商品</td>
				<td>
					<!--左边-->
					<div style="float: left;">
						已有商品<br />
						<select style="width:80px" multiple="multiple" id="leftSelect" ondblclick="selectOne()">
							<option>华为</option>
							<option>小米</option>
							<option>锤子</option>
							<option>oppo</option>
						</select>
						<br />
						<a href="#" onclick="selectOne()"> &gt;&gt; </a> <br />
						<a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>
					</div>
					<!--右边-->
					<div  style="float: right;"> 
						未有商品<br />
						<select style="width:80px" multiple="multiple" id="rightSelect">
							<option>苹果6</option>
							<option>肾7</option>
							<option>诺基亚</option>
							<option>波导</option>
						</select>
						<br />
						<a href="#"> &lt;&lt; </a> <br />
						<a href="#"> &lt;&lt;&lt; </a>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="提交"/>
				</td>
			</tr>
		</table>
		
		<script type="text/javascript">
			function selectOne(){
				//alert("xxx");
				var s1Ele = document.getElementById("leftSelect");
				var s2Ele = document.getElementById("rightSelect");
				//获得左边的所有的options： 
//				s1Ele.getElementsByTagName("option");
				var optionsEle = s1Ele.options;
				
				//遍历得到每一个： 
				for(var i=0; i<optionsEle.length;i++){
					/*
					 *  0 4  
					 *  1 3
					 *  2 2
					 */
					var optionEle = optionsEle[i]; 
					//判断是否被选中： 
					if(optionEle.selected){//说明被选中： 
						s2Ele.appendChild(optionEle); 
						i--; //保证了变量的唯一
					}
				}
			}
			
			
			function selectAll(){
				//alert("xxx");
				var s1Ele = document.getElementById("leftSelect");
				var s2Ele = document.getElementById("rightSelect");
				//获得左边的所有的options： 
//				s1Ele.getElementsByTagName("option");
				var optionsEle = s1Ele.options;
				
				//遍历得到每一个： 
				for(var i=0; i<optionsEle.length;i++){
					var optionEle = optionsEle[i]; 
					//判断是否被选中： 
					s2Ele.appendChild(optionEle); 
					i--; //保证了变量的唯一
				}
			}
		</script>
	</body>
</html>

二级联动：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <select id="province" name="province" style="width:80px;" onchange="selectProvince(this);">
        	<option value="-1">请选择</option>
        	<option value="0">山东</option>
        	<option value="1">北京</option>
        	<option value="2">河北</option>
        </select>
        
         <select id="city" name="city" style="width:80px;">
        </select>
        
        <script type="text/javascript">
        	 var arr  = [
        ["济南市", "青岛市","潍坊市","烟台市","威海市","淄博","东营","日照","聊城","德州","菏泽" ],
        ["东城区", "西城区","海淀区","朝阳区","丰台区","实景山","通州区","昌平区","大兴区","密云" ],
        ["石家庄", "邯郸市","承德市","廊坊市","沧州市","秦皇岛","唐山","保定","张家口" ]
        ];
        
        var s2Ele= document.getElementById("city");
        
        
    	function selectProvince(obj){
    		//alert(obj.value);
    		var cities = arr[obj.value];
    		//alert(cities);
    		//遍历一维数组，获得其中的每一个值： 
    		
    		
    		/*
    		 * 清空s2
    		 * 
    		 */
    		var optionsEle = s2Ele.options;
    	/*	for(var i=0; i<optionsEle.length; i++){
    			
    			s2Ele.removeChild(optionsEle[i]);
    			i--;
    		}*/
    		optionsEle.length=0;
    		
    		
    		for(var i=0; i<cities.length;i++){
    			var city= cities[i];
    			//封装到option， 追加在s2当中： 
    			
    			var optionEle = document.createElement("option"); 
    			//文本节点： 
    			var textNode = document.createTextNode(city); 
    			//建立关系： 
    			optionEle.appendChild(textNode); 
    			//放在s2下： 
    			s2Ele.appendChild(optionEle);
    			
    			//s2Ele.innerHTML= "<option>"+city+"</option>"
    		}
    	}
        </script>
	</body>
</html>