JavaScript的小例子(三级联动，轮播图，图片放大镜，表单数据验证)

最新推荐文章于 2023-01-20 14:21:38 发布

serendipity_xr

最新推荐文章于 2023-01-20 14:21:38 发布

阅读量490

点赞数

文章标签： js javascript html html5

本文链接：https://blog.csdn.net/serendipity_xr/article/details/113837297

版权

本文介绍了JavaScript在前端交互中的应用，包括实现三级联动下拉菜单，自动和手动切换的轮播图效果，表单数据验证以及图片放大镜功能。通过这些实例，展示了JavaScript如何动态操作DOM，处理用户事件以及实现动态视觉效果。

摘要由CSDN通过智能技术生成

JavaScript的小例子

给元素对象绑定事件，通过事件触发函数。在函数中获取元素对象-----获取对象的属性值修改对象的元素（添加元素、删除元素）。

一.三级联动

<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="UTF-8">
		<title>三级联动</title>
		
		<script type="text/javascript">
			
			function changeCity(obj){
				//获取city对象
				var cityObj=document.getElementById('city');
				//创建一个默认的option
				var cityOption=document.createElement('option');
				//设置内容    label（属性就是option标签的内容）
				cityOption.setAttribute('label','----请选择----');
				//设置cityObj的长度为1，当前的下拉框中的option只有一个
				cityObj.options.length=1;
				
				//创建省份集合
				var cityArr=new Array();
				cityArr['陕西省']=['西安市','渭南市','宝鸡市','咸阳市','延安市'];
				cityArr['广东省']=['广州市','深圳市','珠海市','佛山市','东菀市'];
				cityArr['四川省']=['成都市','自贡市','攀枝花市','泸州市','德阳市'];
				cityArr['浙江省']=['杭州市','宁波市','温州市','嘉兴市','绍兴市'];
				cityArr['河北省']=['石家庄市','唐山市','保定市','廊坊市','遵化市'];
				
				//获取省的值
				var provinceText=obj.value;
				
				//根据省获取对应的市集合
				var citys=cityArr[provinceText];
				for(var i=0;i<citys.length;i++){
					var newCityOption=document.createElement('option');
					newCityOption.setAttribute('label',citys[i]);
					newCityOption.setAttribute('value',citys[i]);
					cityObj.appendChild(newCityOption);
				}
				changeCounty(cityObj);
			}
			
		function changeCounty(obj){
			//获取County对象
			var countys=document.getElementById('county');
			//创建一个默认的option
			var countyOption=document.createElement('option');
			//设置内容    label（属性就是option标签的内容）
			countyOption.setAttribute('label','----请选择----');
			//设置cityObj的长度为1，当前的下拉框中的option只有一个
			countys.options.length=1;
				
			//创建省份集合
			var countyArr=new Array();
			countyArr['西安市']=['临潼区','周至县','雁塔区','长安区','碑林区'];
			countyArr['渭南市']=['富平县','大荔县','蒲城县','白水县','合阳县'];
			countyArr['宝鸡市']=['岐山县','凤翔县','梅县','陇县','千阳县'];
			countyArr['咸阳市']=['泾阳县','三原县','礼泉县','长武县','武功县'];
			countyArr['延安市']=['延长县','宝塔区','安塞区','黄陵县','黄龙县'];
			
			countyArr['广州市']=['越秀区','海珠区','荔湾区','白云区','花都区'];
			countyArr['深圳市']=['罗湖区','福田区','南山区','龙岗区','盐田区'];
			countyArr['珠海市']=['香洲区','金湾区','斗门区'];
			countyArr['佛山市']=['禅城区','南海区','顺德区','高明区','三水区'];
			countyArr['东菀市']=['虎门镇','厚街镇','长安镇','沙田镇','大岭山镇'];	
			
			countyArr['成都市']=['武侯区','锦江区','青羊区','金牛区','成华区'];
			countyArr['自贡市']=['流井区','贡井区','大安区','盐滩区','荣县'];
			countyArr['攀枝花市']=['东区','西区','仁和区','盐边区','米易区'];
			countyArr['泸州市']=['泸县','合江县','叙永县'];
			countyArr['德阳市']=['旌阳区','中江县','罗江县'];
			
			
			countyArr['杭州市']=['上城区','下城区','西湖区','江干区','临安区'];
			countyArr['宁波市']=['江东区','江北区','镇海区','北仑区','余姚市'];
			countyArr['温州市']=['永嘉县','平阳县','苍南县','文成县','泰顺县'];
			countyArr['嘉兴市']=['南湖区','秀洲区','嘉善县','海盐县','平湖县'];
			countyArr['绍兴市']=['越城区','柯桥区','上虞区','新昌县','诸暨市'];
			
			countyArr['石家庄市']=['新华区','桥西区','长安区','桥东区','裕华区'];
			countyArr['唐山市']=['路南区','路北区','古冶区','开平区','丰南区'];
			countyArr['保定市']=['定州市','安国市','易县','徐水县','定兴县'];
			countyArr['廊坊市']=['安次区','广阳区','三河市','霸州市','香河县'];
			countyArr['遵化市']=['遵化镇','铁厂镇','建明镇','石门镇','党峪镇'];
			
			//获取市的值
			var cityText=obj.value;
				
			//根据市获取对应的县/区集合
			var countyText=countyArr[cityText];
			for(var i=0;i<countyText.length;i++){
				var newCountyOption=document.createElement('option');
				newCountyOption.setAttribute('label',countyText[i]);
				newCountyOption.setAttribute('value',countyText[i]);
					countys.appendChild(newCountyOption);
				}
		}
			
			
			
			
			
			
		</script>
		
	</head>
	<body>
		<div>
			<span>
				省:<select id="provice" onchange="changeCity(this)">
					<option>----请选择----</option>
					<option value="陕西省">陕西省</option>
					<option value="广东省">广东省</option>
					<option value="四川省">四川省</option>
					<option value="浙江省">浙江省</option>
					<option value="河北省">河北省</option>
				</select>
			</span>
			
			<span>
				市:<select id="city" onchange="changeCounty(this)">
					<option>----请选择----</option>
					</select>
			</span>
			
			<span>
				县/区:<select id="county">
					<option>----请选择----</option>
					</select>
			</span>
		</div>
	</body>
</html>

二.轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自动和手动同时存在</title>
		<style type="text/css">
			
			h2{
				display: inline;
				font-size: 30px;
				
			}
			
		</style>
	</head>
	<body>
		<div align="center">
			<h2 id="bimg" onclick="bimg()"> < </h2>
			<img id="imglb" src="img/德云社02.jpg" height="300px" width="300px"/>
			<h2 id="aimg" onclick="aimg()"> > </h2>
		</div>
	</body>
	<script type="text/javascript">
		var num=0;
		var imgarr=["德云社02.jpg","德云社03.jpg","德云社04.jpg","德云社05.jpg","德云社06.jpg"];
		//自动轮播
		function lunbotu(){
			//获取数组中的元素
			var imgsrc=imgarr[num];
			//获取img对象
			var img=document.getElementById("imglb");
			//修改img的src的值
			img.src="img/"+imgsrc;
			//判断当前数组下标
			num++;
			if(num==imgarr.length){
				num=0;
			}
		}
		//设置定时任务
		window.setInterval(lunbotu,2000);
		
		//前一张
		function bimg(){
			num--;
			//判断当前数组下标
			if(num<0){
				num=imgarr.length-1;
			}
			//获取数组中的元素
			var imgsrc=imgarr[num];
			//获取img对象
			var img=document.getElementById("imglb");
			//修改img的src的值
			img.src="img/"+imgsrc;
		}
		
		
		
		//后一张
		function aimg(){
			num++;
			//判断当前数组下标
			if(num>imgarr.length-1){
				num=0;
			}
			//获取数组中的元素
			var imgsrc=imgarr[num];
			//获取img对象
			var img=document.getElementById("imglb");
			//修改img的src的值
			img.src="img/"+imgsrc;
		}
		
		
		
		
		
		
		
	</script>
</html>

三.表单数据验证

用户名不能以数字为开头，长度不能小于6 ，不能大于10位；
密码由数字组成；
性别只能是男或者女。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据验证</title>
	</head>
	<body>
		<div align="center">
			<form action="轮播图.html" method="get" onsubmit="return login()">
				用户名：<input type="text" id="username" onchange="nameyanzhneg(this.value)" /><label id=uname></label><br />
				密码：<input type="password" id="pass" onchange="passyanzhneg(this.value)" /><label id=upass></label><br />
				性别：男<input type="radio" name="sex" value="男" checked="true" />
					女<input type="radio" name="sex" value="女" />
					<br>
				<input type="submit" value="登录" />
				
			</form>
			
			
			
		</div>
	</body>
	
	<script type="text/javascript">
		//提交之前判断
		function nameyanzheng(name){
			var username=document.getElementById("uname");
			if(!name.match("^[a-zA-Z][0-9a-z][5,10]")){
				//获取提示标签
				uname.innerHTML="用户名不符合规范，长度最低6个，最多10个，不能用数字开头。";
				uname.style.color="red";
				return false;
			}else{
				uname.innerHTML="";
			}
			return true;
		}
		
		//验证密码
		function passyanzheng(pass){
			var upass=document.getElementById("upass");
			if(!pass.match("[0-9]+")){
				//获取提示标签
				upass.innerHTML="*密码不符合要求";
				upass.style.color="red";
				return false;
			}else{
				upass.innerHTML="";
			}
			return true;
		}
		
		
		//获取单选按钮的值，checked属性为true，表示选中，否则未选中
		function sexfun(){
			var sexs=document.getElementsByName("sex");
			alert(sexs.length);
			//遍历获取，选中的sex的值
			for(var i=0;i<sexs.length;i++){
				if(sexs[i].checked==true){
					alter("选中的性别是"+sexs[i].value);
				}
			}
			
			
		}
	</script>
	
</html>

四.图片放大镜

鼠标移动到图片上放大，鼠标移走图片缩小。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>放大镜</title>
		<style>
			
			img{
				height: 200px;
				width: 200px;
			}
			
		</style>
	</head>
	<body>
		<img src="img/德云社04.jpg" id="img04" onmousemove="fangda()" onmouseout="suoxiao()"/>
	</body>
	
	<script>
		function fangda(){
			var imp04=document.getElementById("img04");
			img04.style.height="400px";
			img04.style.width="400px";
		}
		
		function suoxiao(){
			var imp04=document.getElementById("img04");
			img04.style.height="200px";
			img04.style.width="200px";
			
		}
		
		
		
	</script>
</html>

五.遍历对象创建表格

制作表格，删除一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="selectall()">显示所有信息</button>
		<div align="center">
			<table border="1">
				<thead>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</thead>
				<tbody id="tbd">
					
				</tbody>
			</table>
			
			
			
			
			
		</div>
	</body>
	<script>
		//创建对象
		var stu={name:'张三',age:'18',sex:'男'};
		//对象集合或数组
		var stus=[
		{name:'张三',age:'18',sex:'男'},
		{name:'李四',age:'20',sex:'女'},
		{name:'王五',age:'19',sex:'男'},
		{name:'赵六',age:'21',sex:'女'},
		{name:'小王',age:'19',sex:'男'}
		
		];
		
		function selectall(){
			var mess="";
			//遍历数组
		for(var i=0;i<stus.length;i++){
			var student=stus[i];
			//document.write(student.name+"   "+student.age+"   "+student.sex+"   ");
			mess+="<tr><td>"+student.name+"</td><td>"+student.age+"</td><td>"+student.sex+"</td><td οnclick='del(this)'>删除</td></tr>";
		}
		//获取tbody对象
		var tbd=document.getElementById("tbd");
		tbd.innerHTML=mess;
		
		}
		function del(obj){
			var tbd=document.getElementById("tbd");
			tbd.removeChild(obj.parentNode);
		}
	</script>
</html>