前端开发网页设计(五):JavaScript(JS)学习(3):实战一些小JS项目


源码下载链接:https://pan.baidu.com/s/1Gtmh5LESCFyAjVNSuEb9BQ 提取码:q5zz
JavaScript学习
16.实战:JS的form表单校验(网页注册校验)
17.实战:JS实现模拟淘宝
18.实战:JS动态操作表格实现增删改、全选checkbox
19.实战:JS实现双搜项目



16.实战:JS的form表单校验(网页注册校验)

<html>
	<head>
		<title>js校验form表单title>
		<meta charset="UTF-8"/>
		
		<style type="text/css">
			/*设置背景图片*/
			body{
				background-image: url(img/b.jpg);
			}
			/*设置tr样式*/
			tr{
				height: 40px;
			}
			/*设置div样式*/
			#showdiv{
				border: solid 1px #FF0000;
				border-radius: 10px;
				width: 500px;
				margin: auto;
				margin-top: 40px;	
			}
			/*设置table*/
			table{
				margin: auto;
				color: white;	
			}
			span{
				font-size:13px;
			}
			#codeSpan{
				font-size:20px;
			}
		style>
		
		<script type="text/javascript">
			//常见验证码
				function createCode(){
					//创建随机四位数字
					var code=Math.floor(Math.random()*9000+1000);
					//获取元素对象
					var span=document.getElementById("codeSpan");
					//将数字存放到span中
					span.innerHTML=code;	
					checkCode();		
				}
			//验证用户名
				function checkUname(){
					//获取用户的用户名信息
						var uname=document.getElementById("uname").value;
					//创建校验规则
						var reg=/^[\u4e00-\u9fa5]{2,4}$/
					//获取span对象
						var span=document.getElementById("unameSpan");
					//开始校验
						if(uname=="" || uname==null){
							//输出校验结果
							span.innerHTML="用户名不能为空";
							span.style.color="red";
							return false;
						}else if(reg.test(uname)){
							//输出校验结果
							span.innerHTML="用户名ok";
							span.style.color="green";
							return true;
						}else{
							//输出校验结果
							span.innerHTML="用户名不符合规则";
							span.style.color="red";
							return false;
						}
					
				}
			//验证密码
				function checkPwd(){
					//获取用户的密码信息
						var pwd=document.getElementById("pwd").value;
					//创建校验规则
						var reg=/^[a-z]\w{5,7}$/;
					//获取span对象
						var span=document.getElementById("pwdSpan");
					//开始校验
						if(pwd=="" ||pwd==null){
							//输出校验结果
							span.innerHTML="*密码不能为空";
							span.style.color="red";
							return false;
						}else if(reg.test(pwd)){
							//输出校验结果
							span.innerHTML="*密码ok";
							span.style.color="green";
							return true;
						}else{
							//输出校验结果
							span.innerHTML="*密码格式不正确";
							span.style.color="red";
							return false;
						}
					checkPwd2();
				}
			//校验确认密码
				function checkPwd2(){
					//获取第一次密码
					var pwd=document.getElementById("pwd").value;
					//获取确认密码
					var pwd2=document.getElementById("pwd2").value;
					//获取span对象
					var span=document.getElementById("pwd2Span");
					//比较两次密码是否相同
					if(pwd2==""||pwd2==null){
						span.innerHTML="确认密码不能为空";
						span.style.color="red";
						return false;
					}else if(pwd==pwd2){
						span.innerHTML="确认密码ok";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="两次密码不一致";
						span.style.color="red";
						return false;
					}
				}
			//校验手机号
				function checkPhone(){
					return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
				}
			//校验邮箱
				function checkMail(){
					return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ )
					
					
				}
			//校验籍贯
				function checkAddress(){
					//获取用户选择的数据
					var sel=document.getElementById("address").value;
					//获取span
					var span=document.getElementById("addressSpan");
					//校验
					if(sel!=0){
						span.innerHTML="籍贯选择成功";
						span.style.color="green";
						return true;
					}else{
						span.innerHTML="籍贯不能为请选择";
						span.style.color="red";
						return false;
					}
					
					
				}
			//校验爱好
				function checkFav(){
					//获取所有的爱好
					var favs=document.getElementsByName("fav");
					//获取span
					var span=document.getElementById("favSpan");
					//遍历
					for(var i=0;i<favs.length;i++){
						if(favs[i].checked){
							span.innerHTML="爱好选择成功";
							span.style.color="green";
							return true;
						}
					}
					
					span.innerHTML="爱好至少选则一项";
					span.style.color="red";
					return false;
					
				}
					//校验验证码
				function checkCode(){
					//获取验证码
					var syscode=document.getElementById("codeSpan").innerHTML;
					//获取用户填写的验证码
					var code=document.getElementById("code").value;
					//获取span
					var span=document.getElementById("codeSpan2");
					if(code==syscode){
					span.innerHTML="验证码正确"
					span.style.color="green";
					return true
					}else{
					span.innerHTML="验证码错误"
					span.style.color="red";
					return false;
					}
					
					return false

					
				}
			//校验是否同意公司协议
				function checkAgree(){
					document.getElementById("sub").disabled=!document.getElementById("agree").checked;
				}
			//提交判断
				function checkSub(){
					checkUname();
					checkPwd();
					checkPwd2();
					checkPhone();
					checkMail();
					checkAddress();
					checkFav();
					checkCode();
					return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav()&&checkCode();
				}
/*-------------------------------------------------------------------------------------------------*/
			//封装校验:相同的保留,不同的传参。
			function checkField(id,reg){
				//获取用户数据
					var inp=document.getElementById(id);
					var va=inp.value;
				 	var alt=inp.alt;
				//创建校验规则
				//获取span对象
					var span=document.getElementById(id+"Span")
				//开始校验
					if(va=="" ||va==null){
						//输出校验结果
						span.innerHTML=alt+"不能为空";
						span.style.color="red";
						return false;
					}else if(reg.test(va)){
						//输出校验结果
							span.innerHTML=alt+"ok";
							span.style.color="green";
							return true;
					}else{
						//输出校验结果
							span.innerHTML=alt+"不符合规则";
							span.style.color="red";
							return false;
					}
			}
		script>
	head>
	<body onload="createCode()">
		<div id="showdiv">
		<form action="#" method="get" onsubmit="return checkSub()">
			<table>
				<tr>
					<td width="80px">用户名:td>
					<td width="200px">
						<input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/><span id="unameSpan">*2-4位汉字span>
					td>
				tr>
				<tr>
					<td>密码:td>
					<td>
						<input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/>
						<span id="pwdSpan">span>
					td>
				tr>
				<tr>
					<td>确认密码:td>
					<td>
						<input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/>
						<span id="pwd2Span">span>
					td>
				tr>
				<tr>
					<td>手机号:td>
					<td>
						<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/>
						<span id="phoneSpan">span>
					td>
				tr>
				<tr>
					<td>邮箱:td>
					<td>
						<input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()"/>
						<span id="mailSpan">span>
						
				tr>
				<tr>
					<td>性别td>
					<td><input type="radio" name="sex" id="sex" value="0" checked="checked"/><input type="radio" name="sex" id="sex" value="1" />
					td>
				tr>
				<tr>
					<td>籍贯:td>
					<td>
						<select name="address" id="address" onchange="checkAddress()">
							<option value="0">--请选择--option>
							<option value="1">北京option>
							<option value="2">上海option>
							<option value="3">广州option>
						select>
						<span id="addressSpan">span>
					td>
				tr>
				<tr>
					<td>爱好:td>
					<td>
						<input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL
						<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉
						<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br />
						<input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆
						<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影
						<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌
						<span id="favSpan">span>
					td>
				tr>
				<tr>
					<td>个人介绍:td>
					<td>
						<textarea name="intro" rows="4" cols="40" id="intro">textarea>
						
					td>
				tr>
				<tr>
					<td>验证码:td>
					<td>
						<input type="text" name="code" id="code" value="" style="width: 100px;" onblur="checkCode()"/>     
						<span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;">span>
						<span id="codeSpan2"><span>
					td>
				tr>
				<tr>
					<td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"/>是否同意本公司协议td>
				tr>
				<tr>
					<td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/>td>
				tr>
			table>
		form>
		div>
	body>
html>



17.实战:JS实现模拟淘宝

<html>
	<head>
		<title>模拟淘宝网title>
		<meta charset="UTF-8"/>
		
		<script type="text/javascript">
			//创建函数进行照片的联动和样式设置
				function operInImg(img,src){
					//设置图片的样式
					img.style.border="solid 1px";
					//设置大图的img路径
						//获取大图对象
						var big=document.getElementById("big");
						//设置路径
						big.src="img/"+src;
					
					
				}
			function operOutImg(img){
				img.style.border="";
			}
		script>
		
		<style type="text/css">
		/*设置div的样式*/
			#showdiv{
				width: 370px;
				height: 400px;
				border: solid 1px;
				border-radius: 20px;
			}
		/*设置table的样式*/
			#ta{
				margin: auto;
				margin-top: 10px;	
			}
		style>
	head>
	<body>
		<div id="showdiv">
			<table  width="349px" id="ta">
				<tr height="300px">
					<td colspan="5"><img src="img/show1_big.jpg" id="big"/>td>
				tr>
				<tr height="60px">
					<td><img src="img/show1.jpg" onmouseover="operInImg(this,'show1_big.jpg')" onmouseout="operOutImg(this)"/>td>
					<td><img src="img/show2.jpg" onmouseover="operInImg(this,'show2_big.jpg')" onmouseout="operOutImg(this)"/>td>
					<td><img src="img/show3.jpg" onmouseover="operInImg(this,'show3_big.jpg')" onmouseout="operOutImg(this)"/>td>
					<td><img src="img/show4.jpg" onmouseover="operInImg(this,'show4_big.jpg')" onmouseout="operOutImg(this)"/>td>
					<td><img src="img/show5.jpg" onmouseover="operInImg(this,'show5_big.jpg')" onmouseout="operOutImg(this)"/>td>
				tr>
			table>
		div>
	body>
html>

前端开发网页设计(五):JavaScript(JS)学习(3):实战一些小JS项目_第1张图片



18.实战:JS动态操作表格实现增删改、全选checkbox

<html>
	<head>
		<title>操作表格title>
		<meta charset="UTF-8"/>
		
		
		<style type="text/css">
			body{
				text-align: center;
			}
			/*设置表格居中*/
			#ta{
				margin: auto;
			}
			/*设置表格的行样式*/
			#ta tr{
				height: 35px;
			}	
		style>
		
		<script type="text/javascript">
			//声明删除行
				function delRow(btn){
					//获取table对象
					var ta=document.getElementById("ta");
					//获取要删除的行对象
					var tr=btn.parentNode.parentNode;
					//删除行
					ta.deleteRow(tr.rowIndex);
				}
			//修改功能
				function updateRow(btn){
					//获取单元格对象
						//获取行对象
						var tr=btn.parentNode.parentNode;
						//获取行对象
						var cell=tr.cells[3];
					//判断cell.innerHTML的值是否是数字
					if(!isNaN(Number(cell.innerHTML))){
						//修改单元格内容
						cell.innerHTML="";	
					}
					
				}
				
				function updateRow2(inp){
					//获取单元格对象
					var cell=inp.parentNode;
					//实现保存
					cell.innerHTML=inp.value;
				}
/*---------------------------------------------------------------------------------*/
		//选择删除
			function chooseDel(){
				//获取表格对象
					var ta=document.getElementById("ta");
				//获取要删除的行号
					var chks=document.getElementsByName("chk");	
					for(var i=1;i<chks.length;i++){
						if(chks[i].checked){
							//删除行
							ta.deleteRow(i);
							i--;
						}
					}
			}
			//添加行
			function addRow(){
				//获取table表格对象
				var ta=document.getElementById("ta");
				//添加行
				var tr=ta.insertRow(1);
				//添加单元格
				var cell0=tr.insertCell(0);
				cell0.innerHTML="";
				var cell1=tr.insertCell(1);
				cell1.innerHTML=document.getElementById("uname").value;
				var cell2=tr.insertCell(2);
				cell2.innerHTML="李四";
				var cell3=tr.insertCell(3);
				cell3.innerHTML="49.88";
				var cell4=tr.insertCell(4);
				cell4.innerHTML="5";
				var cell5=tr.insertCell(5);
				cell5.style.textAlign="center";
				cell5.innerHTML="";
				
			}
			//复制行
			function copyRow(){
				//获取表格对象
				var ta=document.getElementById("ta");
				//获取选择行对象
				var chks=document.getElementsByName("chk")
				for(var i=0;i<chks.length;i++){
					if(chks[i].checked){
						var tr=ta.insertRow(ta.rows.length);
						//复制行
						tr.innerHTML=ta.rows[i].innerHTML;
					}
				}	
			}
			//全选
				function chooseAll(){
					var ck=document.getElementById("ck");
					var chks=document.getElementsByName("chk");
					if(ck.checked){
						for(var i=0;i<chks.length;i++){
							chks[i].checked=true;
						}
					}else{
						for(var i=0;i<chks.length;i++){
							chks[i].checked=false;
						}
					}
				}
			//隔行变色
			function operCss(){
				//获取所有的行对象数组
				var trs=document.getElementById("ta").rows;
				//遍历
				for(var i=0;i<trs.length;i++){
					if(i%2==0){
						trs[i].style.backgroundColor="red";
					}else{
						trs[i].style.backgroundColor="green";
					}
				}
			}
		script>
	head>
	<body>
		<h3 align="center">操作表格学习h3>
		<input type="button" name="" id="" value="删除"  onclick="chooseDel()"/>
		<input type="button" name="" id="" value="添加行" onclick="addRow()"/>
		<input type="button" name="" id="" value="复制行" onclick="copyRow()"/>
		<input type="button" name="" id="" value="隔行变色" onclick="operCss()"/>
		书名:<input type="text" name="uname" id="uname" value="" />
		<hr />
			<table border="1px" id="ta">
				<tr style="text-align: center;font-weight: bold;">
					<td width="50px" align="left"><input type="checkbox" name="chk" value="0"  id="ck" onclick="chooseAll()"/>td>
					<td width="200px">书名td>
					<td width="100px">作者td>
					<td width="100px">价格td>
					<td width="200px">购买数量td>
					<td width="200px" >操作td>
				tr>
				<tr id="t1">
					<td><input type="checkbox" name="chk" id="chk" value="0" />td>
					<td>javaScript入门td>
					<td>张三td>
					<td>43.50td>
					<td>3td>
					<td align="center">
						<input type="button" name="" id="" value="修改数量"  onclick="updateRow(this)"/>
						<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
					td>
				tr>
				<tr>
					<td><input type="checkbox" name="chk" id="chk" value="1" />td>
					<td>JAVA零基础入门td>
					<td>李四td>
					<td>77.60td>
					<td>2td>
					<td align="center">
						<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
						<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
					td>
				tr>
				<tr>
					<td><input type="checkbox" name="chk" id="chk" value="2" />td>
					<td>Spring入门td>
					<td>王五td>
					<td>78.88td>
					<td>3td>
					<td align="center">
						<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
						<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
					td>
				tr>
			table>
	body>
html>

前端开发网页设计(五):JavaScript(JS)学习(3):实战一些小JS项目_第2张图片



19.实战:JS实现双搜项目

<html>
	<head>
		<title>双搜title>
		<meta charset="UTF-8"/>
		<title>哈哈title>
		<style type="text/css">
			
			#showdiv{
				margin: auto;
				margin-top: 150px;
				width: 400px;
				margin-bottom: 20px;
			}
			
			
		style>
		<script type="text/javascript">
			
			function test(){
				var search=document.getElementById("search").value;
				document.getElementById("wd").value=search;
				document.getElementById("q").value=search;
				
				document.getElementById("fmB").submit();
				document.getElementById("fmS").submit();
				
				//将隐藏的div显示出来
					document.getElementById("div01").style.display="";
				
			}
			
			//alert(document.getElementsByTagName("title"));
			
		script>
	head>
	<body>
		<div id="showdiv">
			<input type="text" name="" id="search" value="" />
			<input type="button" name="" id="" value="牛逼一下" onclick="test()"/>
		div>
		<hr />
		<form action="http://www.baidu.com/s" method="get" id="fmB" target="ifB">
			<input type="hidden" name="wd" id="wd" value="" />
		form>
		<form action="http://www.so.com/s" method="get" id="fmS" target="ifS">
			<input type="hidden" name="q" id="q" value="" />
		form>
		
		<div id="div01" style="display: none;">
			<iframe src="" width="49%" height="500px" name="ifB">iframe>
			<iframe src="" width="49%" height="500px" name="ifS">iframe>
		div>
			
	body>
html>

你可能感兴趣的:(个人QQ1126140903)