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

本文介绍了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>

JS三级联动表单 <!-- var arrText = new Array(5); var arrValue = new Array(arrText.length); function objSetOption(select1, select2, select3) { this.select1 = select1; this.select2 = select2; this.select3 = select3; } arrText[0]= new objSetOption("选择1:", "选择2_1:,选择2_2:", "选择3_1:,选择3_2:"); arrText[1] = new objSetOption("论文:1", "语文:1,数学:2,英语:3", "初中:2,高中:3"); arrText[2] = new objSetOption("例题:2", "显示b2_1:值b2_1,显示b2_2:值b2_2", "显示b3_1:值b3_1,显示b3_2:值b3_2"); arrText[3] = new objSetOption("显示c:值c", "显示c2_1:值c2_1,显示c2_2:值c2_2", "显示c3_1:值c3_1,显示c3_2:值c3_2"); arrText[4] = new objSetOption("显示d:值d", "显示d2_1:值d2_1,显示d2_2:值d2_2", "显示d3_1:值d3_1,显示d3_2:值d3_2"); arrText[5] = new objSetOption("显示e:值e", "显示e2_1:值e2_1,显示e2_2:值e2_2", "显示e3_1:值e3_1,显示e3_2:值e3_2"); function select() { var eltSelect1 = document.test.select1; var eltSelect2 = document.test.select2; var eltSelect3 = document.test.select3; var arrSelect1, arrSelect2, arrSelect3; var arrData1, arrData2, arrData3; with(eltSelect1) { var strSelect = options[selectedIndex].value; } for(i = 0;i < arrText.length;i ++) { arrSelect1 = arrText[i].select1; arrData1 = arrSelect1.split(":"); if (arrData1[1] == strSelect) { arrSelect2 = (arrText[i].select2).split(","); for(j = 0;j < arrSelect2.length;j++) { arrData2 = arrSelect2[j].split(":"); with(eltSelect2) { length = arrSelect2.length; options[j].text = arrData2[0]; options[j].value = arrData2[1]; } } arrSelect3 = (arrText[i].select3).split(","); for(j = 0;j < arrSelect3.length;j++) { arrData3 = arrSelect3[j].split(":"); with(eltSelect3) { length = arrSelect3.length; options[j].text = arrData3[0]; options[j].val
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值