前端开发网页设计(五)：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>
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>
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>