案例一：表单验证
js表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script>
function validateName() {
//所有的表单项元素都value属性
var name = document.getElementById("userName").value;
var msg = document.getElementById("nameMsg");
if(name == null || name == "") {
msg.innerHTML = "用户名不能为空！";
msg.style.color = "red";
return false;
} else if(name.length < 6) {
msg.innerHTML = "用户名长度必须为大于6的！";
msg.style.color = "red";
return false;
}
msg.innerHTML = "用户名可用";
msg.style.color = "green";
return true;
}
function validatePwd() {
var password1 = document.getElementById("password1").value;
var msg = document.getElementById("pwdMsg1");
if(password1 == null || password1 == "") {
msg.innerHTML = "密码不能为空！";
msg.style.color = "red";
return false;
} else if(password1.length < 8) {
msg.innerHTML = "密码的长度必须为大于8的！";
msg.style.color = "red";
return false;
}
msg.innerHTML = "密码合法";
msg.style.color = "green";
return true;
}
function confirmPwd() {
var pwd1 = document.getElementById("password1").value;
var pwd2 = document.getElementById("password2").value;
var msg = document.getElementById("pwdMsg2");
if(pwd1 != pwd2) {
msg.innerHTML = "两次输入的密码不一致！";
msg.style.color = "red";
return false;
}
msg.innerHTML = "两次输入的密码一致";
msg.style.color = "green";
return true;
}
function validateGender() {
var gender = document.getElementById("gender").value;
if(gender == -1) {
alert("性别为必选项！");
return false;
}
return true;
}
function register() {
return validateName() && validatePwd() && confirmPwd() && validateGender();
}
</script>
</head>
<body>
<h1>英雄会注册</h1>
<form id="myForm" action="提交.html" method="get" >
*用户名:<input type="text" name="userName" placeholder="请输入用户名"/>
<span id="userNameMsg">用户名长度至少6位,只能包含数字、字母、下划线，必须以字母开头</span><br />
*密码：
<input type="password" name="pwd1" placeholder="请输入密码" required/>
<span id="pwd1Msg">密码长度至少8位</span><br />
*确认密码：
<input type="password" name="pwd2" placeholder="请确认密码" required/>
<span id="pwd2Msg">确认密码与密码一致</span><br />
*性别：
<select id="gender">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br />
*电话号码：<input name="phone" required/><span id="phoneMsg"></span><br />
*邮箱：<input name="email" type="email" required/><span id="emailMsg"></span><br />
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>
jQuery实现表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
function isUserName(){
var val=$("input[name='userName']").val();
if(val==""){
$("span[id='userNameMsg']").html("用户名不能为空！").css("color","red");
return false;
}else if(/^[a-zA-z]\w{5,}/.test(val)==false){
$("span[id='userNameMsg']").html("用户名不合法！").css("color","red");
return false;
}
$("span[id='userNameMsg']").html("用户名可用！").css("color","green");
return true;
}
function isPwd(){
var val=$("input[name='pwd1']").val();
if(val==""){
$("span[id='pwd1Msg']").html("密码不能为空！").css("color","red");
return false;
}else if(val.length<8){
$("span[id='pwd1Msg']").html("密码长度不合法！").css("color","red");
return false;
}
$("span[id='pwd1Msg']").html("密码格式正确！").css("color","green");
return true;
}
function isPwd2(){
if($("input[name='pwd1']").val()!=$("input[name='pwd2']").val()){
$("span[id='pwd2Msg']").html("两次密码不一致！").css("color","red");
return false;
}
$("span[id='pwd2Msg']").html("OK！").css("color","green");
return true;
}
/*校验电话码格式-座机或者手机 */
function isTelCode(str) {
var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
if(reg.test(str)){
$("span[id='phoneMsg']").html("OK！").css("color","green");
return true;
}
$("span[id='phoneMsg']").html("电话格式不合法！").css("color","red");
return false;
}
/*校验邮件地址是否合法 */
function IsEmail(str) {
var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
if(reg.test(str)){
$("span[id='emailMsg']").html("OK！").css("color","green");
return true;
}
$("span[id='emailMsg']").html("邮箱地址不合法！").css("color","red");
return false;
}
/*校验是否选择了性别*/
function isGender(){
var val=$("select[name='gender']").val();
if(val==-1){
alert("请选择性别！");
return false;
}
return true;
}
//页面加载事件
$(function(){
$("input[name='userName']").blur(function(){
isUserName();
});
$("input[name='pwd1']").blur(function(){
isPwd();
});
$("input[name='pwd2']").blur(function(){
isPwd2();
});
$("input[name='phone']").blur(function(){
isTelCode();
});
$("input[name='email']").blur(function(){
IsEmail();
});
$("#myForm").submit(function(){
return isUserName()&&isPwd()&&isPwd2()&&isGender()&&isTelCode()&&IsEmail();
});
});
</script>
</head>
<body>
<h1>英雄会注册</h1>
<form id="myForm" action="提交.html" method="get" >
*用户名:<input type="text" name="userName" placeholder="请输入用户名"/>
<span id="userNameMsg">用户名长度至少6位,只能包含数字、字母、下划线，必须以字母开头</span><br />
*密码：
<input type="password" name="pwd1" placeholder="请输入密码" required/>
<span id="pwd1Msg">密码长度至少8位</span><br />
*确认密码：
<input type="password" name="pwd2" placeholder="请确认密码" required/>
<span id="pwd2Msg">确认密码与密码一致</span><br />
*性别：
<select id="gender">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br />
*电话号码：<input name="phone" required/><span id="phoneMsg"></span><br />
*邮箱：<input name="email" type="email" required/><span id="emailMsg"></span><br />
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>
效果演示
案例二：全选全不选
js实现全选/全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选</title>
<script>
function myAll(){
var all=document.getElementById("all");
var flag=all.checked;
var oneList=document.getElementsByName("one");
for(var i=0;i<oneList.length;i++){
oneList[i].checked=flag;
}
}
function myOne(){
var all=document.getElementById("all");
var oneList=document.getElementsByName("one");
for(var i=0;i<oneList.length;i++){
if(oneList[i].checked==false){
all.checked=false;
return false;
}
}
all.checked=true;
}
</script>
</head>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="160px">
<tr>
<th>全选<input id="all" type="checkbox" onclick="myAll()" /></th>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()" /></td>
<td>1</td>
<td>小熊饼干1</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()" /></td>
<td>2</td>
<td>小熊饼干2</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()" /></td>
<td>3</td>
<td>小熊饼干3</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
</table>
</body>
</html>
jQuery实现全选/全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){
//全选复选框的单击事件
$("#all").click(function(){
var flag=$(this).prop("checked");
var oneList=$("input[name='one']");
for(var i=0;i<oneList.length;i++){
$(oneList[i]).prop("checked",flag);
}
});
//单个复选框的单击事件
$("input[name='one']").click(function(){
var all=$("#all");
var oneList=$("input[name='one']");
for(var i=0;i<oneList.length;i++){
if($(oneList[i]).prop("checked")==false){
all.prop("checked",false);
return;
}
}
all.prop("checked",true);
});
});
</script>
</head>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="160px">
<tr>
<th>全选<input id="all" type="checkbox" /></th>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>1</td>
<td>小熊饼干1</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>2</td>
<td>小熊饼干2</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>3</td>
<td>小熊饼干3</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
</table>
</body>
</html>
案例三： 动态表格
js实现动态表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
td,th{
padding: 10px;
}
</style>
<script>
function bianli(){
var tab=document.getElementById("myTable");//获取到了表格的js对象
//获取表格的所有行
var trArr=tab.rows;
//遍历行
for(var i=0;i<trArr.length;i++){
var trObj=trArr[i];
//alert("行的下标索引："+trObj.rowIndex);
//获取每行的单元格的集合
var tdArr=trObj.cells;
//遍历每个单元格
var str="";
for(var j=0;j<tdArr.length;j++){
var tdObj=tdArr[j];
var html=tdObj.innerHTML;//获取每个单元格中的内容
var index=tdObj.cellIndex;//获取每个单元格的下标索引
str+=index+"-"+html+"=====";
}
console.log("行的下标索引："+trObj.rowIndex+":"+str);
}
}
function addRow(){
//获取到表格的对象
var tab=document.getElementById("myTable");
//给表格添加一行
var newTr=tab.insertRow();//创建了一个空行，在页面上看不出来
//给新创建的行添加列
var newTd1=newTr.insertCell();//给新的行创建了一个新的单元格
var newTd2=newTr.insertCell();
var newTd3=newTr.insertCell();
var newTd4=newTr.insertCell();
var newTd5=newTr.insertCell();
//给每一个单元格中添加内容
var num=parseInt(Math.random()*10)+1;
newTd1.innerHTML=num;
newTd2.innerHTML="小熊饼干"+num;
newTd3.innerHTML="$125";
newTd4.innerHTML="1";
newTd5.innerHTML='<button name="delBtn" onclick="delRow(this)">删除</button>';
}
function delRow(btn){
var tab=document.getElementById("myTable");
//btn:表示点击的当前的删除按钮，
//btn.parentNode获取的按钮的父元素td,btn.parentNode.parentNode获取的按钮的父元素td的父元素tr
var trIndex=btn.parentNode.parentNode.rowIndex;
//根据行的下标索引删除行
tab.deleteRow(trIndex);
}
</script>
</head>
<body>
<button type="button" onclick="bianli()">遍历表格</button>
<button type="button" onclick="addRow()">添加-请在外部浏览器测试</button>
<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" style="text-align: center;">
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td>1</td>
<td>小熊饼干1</td>
<td>￥125</td>
<td>1</td>
<td><button name="delBtn" onclick="delRow(this)">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>小熊饼干2</td>
<td>￥125</td>
<td>1</td>
<td><button name="delBtn" onclick="delRow(this)">删除</button></td>
</tr>
</table>
</body>
</html>
jQuery实现动态表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<style>
td,th{
padding: 10px;
}
</style>
<script>
$(function(){
$("#blBtn").click(function(){
//获取表格的jQuery对象
var tab=$("#myTable");
//获取表格的所有行
//浏览器默认将所有的行tr放在tbody标签中，所以tab.children()获取到的是他body，
//tab.children().children()获取的才是tbody中的所有的tr
var trArr=tab.children().children();
for(var i=0;i<trArr.length;i++){
var str="";
var trObj=$(trArr[i]);//将每一行的js对象转换为jQuery的对象
//获取当前行中的所有的单元格
var tdArr=$(trObj.children());
for(var j=0;j<tdArr.length;j++){
var tdObj=$(tdArr[j]);
var html=tdObj.html();//获取每个单元格围堵标签中的所有内容
str+=html+"==";
}
console.log(str);
}
});
$("#addBtn").click(function(){
var tab=$("#myTable");
var num=parseInt(Math.random()*10)+1;
var tr='<tr>'+
'<td>'+num+'</td>'+
'<td>小熊饼干'+num+'</td>'+
'<td>￥125</td>'+
'<td>1</td>'+
'<td><button name="delBtn">删除</button></td>'+
'</tr>';
tab.append(tr);
});
//这种绑定事件的方式对于动态添加的元素不生效
/*$("button[name='delBtn']").click(function(){
$(this).parent().parent().remove();
});*/
//动态添加的元素绑定事件的方式
$(document).on("click","button[name='delBtn']",function(){
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<button type="button" id="blBtn">遍历表格</button>
<button type="button" id="addBtn">添加</button>
<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" style="text-align: center;">
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td>1</td>
<td>小熊饼干1</td>
<td>￥125</td>
<td>1</td>
<td><button name="delBtn">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>小熊饼干2</td>
<td>￥125</td>
<td>1</td>
<td><button name="delBtn">删除</button></td>
</tr>
</table>
</body>
</html>
效果展示
案例四：动态时间
js实现动态时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
<script>
function showTime1(){
var time=new Date();
var y=time.getFullYear();
var mon=time.getMonth();
var d=time.getDate();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
document.getElementById("today1").innerHTML=y+"年"+mon+"月"+d+"日 "+h+":"+m+":"+s;
}
function showTime2(){
var time=new Date();
var y=time.getFullYear();
var mon=time.getMonth();
var d=time.getDate();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
document.getElementById("today2").innerHTML=y+"年"+mon+"月"+d+"日 "+h+":"+m+":"+s;
flag2=window.setTimeout("showTime2()",1000);
}
//定时器setInterval(定时调用的函数,时间间隔毫秒)
var flag1=window.setInterval("showTime1()",1000);
//setTimeout(调用的函数,延迟时间调用指定函数的时间)在指定的毫秒数后调用函数或计算表达式。
var flag2=window.setTimeout("showTime2()",1000);
</script>
</head>
<body>
<div id="today1">
div1--显示时间1
</div>
<div id="today2">
div2--显示时间2
</div>
<a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a>
<a href="javascript:window.clearTimeout(flag2)">停止定时器clearTimeout</a>
</body>
</html>
jQuery实现动态时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态时间</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
function showTime(){
var time=new Date();
var y=time.getFullYear();
var mon=time.getMonth()+1;
var d=time.getDate();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
$("#myTime").html(y+"年"+mon+"月"+d+"日 "+h+":"+m+":"+s);
}
function showTime2(){
var time=new Date();
var y=time.getFullYear();
var mon=time.getMonth()+1;
var d=time.getDate();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
$("#myTime2").html(y+"年"+mon+"月"+d+"日 "+h+":"+m+":"+s);
clock2=window.setTimeout("showTime2()",1000);
}
$(function(){
//定时器
var clock1=window.setInterval("showTime()",1000);
var clock2=window.setTimeout("showTime2()",1000);
$("#btn1").click(function(){
window.clearInterval(clock1);
});
$("#btn2").click(function(){
window.clearTimeout(clock2);
});
});
</script>
</head>
<body>
<button id="btn1">停止</button>
<div id="myTime">
</div>
<button id="btn2">停止2</button>
<div id="myTime2">
</div>
</body>
</html>
效果演示
案例五：省市级联
js实现省市级联
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级联</title>
</head>
<body>
<select onchange="changeCity(this.value)">
<option>--请选择省份--</option>
<option value="0">北京</option>
<option value="1">浙江省</option>
<option value="2">河北省</option>
<option value="3">广东省</option>
</select>
<select id="city">
</select>
</body>
</html>
<script>
//创建二维数组存储省份和对应的城市
var cityList=new Array();
cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
function changeCity(val){
//获取到城市的下拉列表框
var city=document.getElementById("city");
//先去清空原有的列表内容
city.options.length=0;
var arr=cityList[val];
for(var i=0;i<arr.length;i++){
//创建option元素节点
var option=document.createElement("option");
//设置option元素节点的内容和value
option.innerHTML=arr[i];
option.value=arr[i];
//将新创建的option节点添加到城市下拉框中
city.appendChild(option);
}
}
</script>
jQuery实现省市级联
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级联</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
</head>
<body>
<select id="province">
<option>--请选择省份--</option>
<option value="0">北京</option>
<option value="1">浙江省</option>
<option value="2">河北省</option>
<option value="3">广东省</option>
</select>
<select id="city">
</select>
</body>
</html>
<script>
$(function(){
//创建二维数组存储省份和对应的城市
var province=new Array();
province[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
province[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
province[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
province[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
//给省的下拉列表框绑定改变事件
$("#province").change(function(){
var proVal=$(this).val();//获取选择的省对应的value值
//alert(proVal);
//根据省的value值获取省对应的城市的集合
var cityArr=province[proVal];
//获取到城市的下拉框
var str="";
for(var i=0;i<cityArr.length;i++){
str+='<option value="'+cityArr[i]+'">'+cityArr[i]+'</option>';
}
var citySelete=$("#city");
citySelete.html(str);
});
});
</script>
效果演示
445
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
