javaWeb-day04--javascript高级
1.DOM获取元素对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<img id="img" src="img/off.gif">
<h1 id="title">奥力给h1>
<script>
//1.更改对象属性 图片内容
//2.更改对象内容 标签内容
//通过元素id获取元素对象
var light = document.getElementById("img");
alert("换图片");
//更改对象属性
light.src = "img/on.gif";
var title = document.getElementById("title");
alert("更换内容");
//更改对象内容
title.innerHTML = "奥力给的猛";
script>
body>
html>
2.事件绑定
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<img src="img/off.gif" onclick="alert('点啊')">
<img src="img/off.gif" onclick="fun()">
<img id="light" src="img/off.gif">
<script>
function fun(){
alert("点啊1");
}
function fun1(){
alert("点啊2");
}
//获取元素对象
var light = document.getElementById("light");
//绑定事件 后边绑定的只是函数名称
light.onclick = fun1;
script>
body>
html>
3.案例1_开关灯
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<img id="light" src="img/off.gif">
<script>
//获取元素对象
var light = document.getElementById("light");
var flag = false;//false 为关 true 为开
light.onclick = function(){
if(flag){
//如果是开的就关上 更换照片
light.src = "img/off.gif";
flag = false;
}else{
//如果是关的就打开 更换照片
light.src = "img/on.gif";
flag = true;
}
}
script>
body>
html>
4.window对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象title>
head>
<body>
<input id="openbtn" type="button" value="打开窗口">
<input id="closebtn" type="button" value="关闭窗口">
<script>
/*
window对象
1.创建
2.方法
1.与弹出框有关的方法
alert() 显示带有一个消息一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
*点击确认 返回true
*点击取消按钮 返回false
prompt（） 显示可提示用户输入的对话框
2.与打开关闭有关的方法
open() 打开一个新窗口----返回一个新打开窗口的对象
close() 关闭浏览器窗口----哪个对象调用关哪个
3.与定时器有关的方法
setTimeout() 在指定的毫秒数后调用函数或计算表达式
参数：1.js代码或者方法对象 2.毫秒值
cleanTimeout() 取消由setTimeout方法设定timeout
setInterval() 按照指定周期来调用函数或计算表达式
cleanInterval() 取消setInterval()设定的执行周期
3.属性
1.获取其他BOM对象
histor
location
2.获取DOM对象
document
4.特点
window对象不需要创建直接使用， window.方法名（） window可省略
*/
// alert("奥力给");
// var flag = confirm("确定退出？");
// if (flag){
// alert(flag);
// }else{
// alert(flag);
// }
//
//
// var name = prompt("输入用户名");
// alert(name);
var openbtn = document.getElementById("openbtn");
var win;
openbtn.onclick=function (){
win = open("https://www.baidu.com/");
}
var closebtn = document.getElementById("closebtn");
closebtn.onclick=function (){
win.close();
}
var timeout = setTimeout(fun,200);
clearTimeout(timeout);
function fun() {
alert("boom----");
}
var interval = setInterval(fun,2000);
clearInterval(interval);
var history = window.history;
alert(history);
var document1 = window.document;
alert(document1);
script>
body>
html>
5.案例2_轮播图
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图title>
head>
<body>
<img id="img" src="img/banner_1.jpg" width="100%">
<script>
/*
1.在页面上展示一个图片
2.定义一个方法，更换src的属性
3.定义一个计时器，3s更换一个图片
*/
//定义一个方法
var number = 1;
function fun() {
number++;
if (number>3){
number = 1;
}
var img = document.getElementById("img");
img.src = "img/banner_"+number+".jpg";
}
setInterval(fun,3000);
script>
body>
html>
6.location对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>locati对象title>
head>
<body>
<input id="but" type="button" value="百度">
<input id="but1" type="button" value="刷新">
<script>
/*
location对象
1.创建
window.location
location
2.方法
reload（）刷新当前页面
3.属性
href 设置或返回完整的URL
*/
//reload（）刷新页面
//1.获取按钮
var elementById = document.getElementById("but1");
//2.绑定事件
elementById.onclick = function (){
location.reload();
}
//href 返回完整的url
var href = location.href;
alert(href);
//href 设置URl
//1.获取按钮
var e = document.getElementById("but");
//2.绑定事件
e.onclick = function (){
location.href = "https://www.baidu.com";
}
script>
body>
html>
7.案例3_自动跳转
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转title>
<STYLE>
/*通过css设置标签*/
p{
text-align: center;
}
span{
color: red;
}
STYLE>
head>
<body>
<p><span id="time">5span>秒后自动跳转...p>
<script>
var num =5;
//获取需要修改内容的span标签对象
var time = document.getElementById("time");
function fun(){
num--;
if (num<=0){
//跳转网页
location.href = "https://www.baidu.com";
}
//修改标签span内容
time.innerHTML = num+"";
}
// 定时器 执行函数
setInterval(fun,1000);
script>
body>
html>
8.history对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history对象title>
head>
<body>
<input id="btn" type="button" value="查看访问记录数">
<a href="9.history对象--test.html">test页面a>
<input id="btn1" type="button" value="前进">
<SCRIPT>
/*
history 历史记录对象
1.创建
window.history
history
2.方法
back（） 加载 history 列表前的一个URL
forword（）加载 history 列表的下一个URL
go（） 加载 history 列表中的某个具体页面
*正数 前进几个历史记录
*负数 后退几个历史记录
3.属性
length 当前窗口中的url数量
*/
//1.获取按钮对象
var btn = document.getElementById("btn");
//2.绑定事件
btn.onclick = function (){
var length = history.length;
alert(length);
}
//1.获取按钮对象
var btn1 = document.getElementById("btn1");
//2.绑定事件
btn1.onclick = function (){
//前进一个页面
//history.forward();
history.go(1);
}
SCRIPT>
body>
html>
9.history对象–test
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图title>
head>
<body>
<img id="img" src="img/banner_1.jpg" width="100%">
<input id="back" type="button" value="返回">
<script>
/*
1.在页面上展示一个图片
2.定义一个方法，更换src的属性
3.定义一个计时器，3s更换一个图片
*/
//定义一个方法
var number = 1;
function fun() {
number++;
if (number>3){
number = 1;
}
var img = document.getElementById("img");
img.src = "img/banner_"+number+".jpg";
}
//定时器
setInterval(fun,3000);
//1.获取按钮对象
var back = document.getElementById("back");
//2.绑定事件
back.onclick = function (){
//后退一个页面
//history.back();
history.go(-1);
}
script>
body>
html>
10.document对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="div1">div1div>
<div id="div2">div2div>
<div id="div3">div3div>
<div class="cls1">div4div>
<div class="cls1">div5div>
<input type="text" name="username">
<script>
/*
Document 文档对象
1.创建
window.ducument
documen
2.方法
1.获取Element对象
*getElementById(): 根据id属性
*getElementByTagName():根据元素名称获取元素们，返回值是一个数组
*getElementByClassName（）：根据class属性值获取对象们，返回值是一个数组
*getElementByName（）：根据name属性值获取元素对象们。返回值是一个数组
2.创建其他Dom对象
creatAttribute(name)
createComment()
createElement()
createTextnode()
3.属性
*/
//*getElementByTagName():根据元素名称获取元素们，返回值是一个数组
var ele_tag = document.getElementsByTagName("div");
var length = ele_tag.length;
alert(length);
//getElementByClassName（）：根据class属性值获取对象们，返回值是一个数组
var ele_class = document.getElementsByClassName("cls1");
var length1 = ele_class.length;
alert(length1);
//getElementByName（）：根据name属性值获取元素对象们。返回值是一个数组
var ele_name = document.getElementsByName("username");
var length2 = ele_name.length;
alert(length2);
var table = document.createElement("tab");
alert(table);
script>
body>
html>
11.element对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>element对象title>
head>
<body>
<a>点啊a>
<input id="set" type="button" value="设置属性">
<input id="remove" type="button" value="删除属性">
<script>
//给element元素对象 单独设置和删除属性值
//1.获取元素对象
var ele_set = document.getElementById("set");
//2.事件绑定
ele_set.onclick = function (){
var set_but = document.getElementsByTagName("a")[0];
set_but.setAttribute("href","https://www.baidu.com");
}
//1.获取元素对象
var ele_remove = document.getElementById("remove");
//2.事件绑定
ele_remove.onclick = function (){
var remove_but = document.getElementsByTagName("a")[0];
remove_but.removeAttribute("href");
}
script>
body>
html>```
## 12.node对象
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
border: 1px solid red;
}
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 100px;
height: 100px;
}
#div3{
width: 100px;
height: 100px;
}
style>
head>
<body>
<div id="div1">
<div id="div2">
div2
div>
div1
div>
<a href="javascript:void(0)" id="del">删除节点a>
<a href="javascript:void(0)" id="app">添加节点a>
<script>
//获取超链接元素对象
var ele_del = document.getElementById("del");
//事件绑定
ele_del.onclick = function (){
var ele_div1 = document.getElementById("div1");
var ele_div2 = document.getElementById("div2");
ele_div1.removeChild(ele_div2);
}
//获取超链接元素对象
var ele_app = document.getElementById("app");
//事件绑定
ele_app.onclick = function (){
var ele_div1 = document.getElementById("div1");
//创建一个元素节点对象 div3
var ele_div3 = document.createElement("div");
ele_div3.setAttribute("id","div3");
ele_div1.append(ele_div3);
}
//获取节点的父节点
var ele_div2 = document.getElementById("div2");
var a = ele_div2.parentNode;
alert(a);
script>
body>
html>
13.案例4_动态表格
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
text-align: center;
margin: 50px;
}
td,th{
text-align: center;
border: 1px solid;
}
table{
border: 1px solid;
width: 500px;
margin: auto;
}
style>
head>
<body>
<div>
<input id="id" type="text" placeholder="请输入编号">
<input id="name" type="text" placeholder="请输入姓名">
<input id="gender" type="text" placeholder="请输入性别">
<input id="but" type="button" value="添加">
div>
<table>
<caption>学生信息表caption>
<tr>
<th>编号th>
<th>姓名th>
<th>性别th>
<th>操作th>
tr>
<tr>
<td>1td>
<td>令狐冲td>
<td>男td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除a>td>
tr>
<tr>
<td>2td>
<td>任我行td>
<td>男td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td>
tr>
table>
<script>
/*
1.给按钮绑定单击事件
2.获取文本框内容
3.创建td，设置td的文本为文本框内容
4.创建tr
5.将td添加到tr中
6.获取table，将tr添加到table中
*/
//1.给按钮绑定单击事件
document.getElementById("but").onclick = function (){
//2.获取文本框内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3.创建td，设置td的文本为文本框内容 td的文本内容要为文本节点
//id的td
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
//name的td
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender的td
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//删除的td
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0)");
ele_a.setAttribute("onclick","delTr(this)");
var textNode = document.createTextNode("删除");
ele_a.appendChild(textNode);
td_a.appendChild(ele_a);
//4.创建tr
var tr = document.createElement("tr");
//5.将td添加到tr
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6.获取table，将tr添加到table中
var ele_table = document.getElementsByTagName("table")[0];
ele_table.appendChild(tr);
}
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
script>
body>
html>
14.HTMLDOM
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="div1">
奥力给
div>
<script>
//获取标签对象
var ele_div1 = document.getElementById("div1");
//获取标签内容
var html = ele_div1.innerHTML;
alert(html);
//修改标签内容
ele_div1.innerHTML = "奥力给的猛";
var html = ele_div1.innerHTML;
alert(html);
//将标签替换为一个文本输入框
//ele_div1.innerHTML =" ";
//将标签追加一个文本框
ele_div1.innerHTML +="";
script>
body>
html>
14.HTMLDOM_表格追加_动态表格
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
text-align: center;
margin: 50px;
}
td,th{
text-align: center;
border: 1px solid;
}
table{
border: 1px solid;
width: 500px;
margin: auto;
}
style>
head>
<body>
<div>
<input id="id" type="text" placeholder="请输入编号">
<input id="name" type="text" placeholder="请输入姓名">
<input id="gender" type="text" placeholder="请输入性别">
<input id="but" type="button" value="添加">
div>
<table>
<caption>学生信息表caption>
<tr>
<th>编号th>
<th>姓名th>
<th>性别th>
<th>操作th>
tr>
<tr>
<td>1td>
<td>令狐冲td>
<td>男td>
<td><a href="javascript:void(0)" onclick="delTr(this)">删除a>td>
tr>
<tr>
<td>2td>
<td>任我行td>
<td>男td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td>
tr>
table>
<script>
/*
1.给按钮绑定单击事件
2.获取文本框内容
3.创建td，设置td的文本为文本框内容
4.创建tr
5.将td添加到tr中
6.获取table，将tr添加到table中
*/
/*//1.给按钮绑定单击事件
document.getElementById("but").onclick = function (){
//2.获取文本框内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3.创建td，设置td的文本为文本框内容 td的文本内容要为文本节点
//id的td
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
//name的td
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender的td
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//删除的td
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0)");
ele_a.setAttribute("onclick","delTr(this)");
var textNode = document.createTextNode("删除");
ele_a.appendChild(textNode);
td_a.appendChild(ele_a);
//4.创建tr
var tr = document.createElement("tr");
//5.将td添加到tr
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6.获取table，将tr添加到table中
var ele_table = document.getElementsByTagName("table")[0];
ele_table.appendChild(tr);
}
*/
//1.给按钮绑定单击事件
document.getElementById("but").onclick = function () {
//2.获取文本框内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3.获取table标签对象
var ele_table = document.getElementsByTagName("table")[0];
ele_table.innerHTML += "\n" +
" "+id+" \n" +
" "+name+" \n" +
" "+gender+" \n" +
" 删除 \n" +
" "
}
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
script>
body>
html>
15.HTMLDOM_样式控制
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.d1{
border: 1px solid yellowgreen;
width: 300px;
font-size: 300px;
}
.d2{
border: 2px solid green;
width: 250px;
font-size: 200px;
}
style>
head>
<body>
<div id="div1">
div1
div>
<div id="div2">
div2
div>
<script>
//在script中修改样式
var ele_div1 = document.getElementById("div1");
ele_div1.onclick = function (){
ele_div1.style.border = "1px solid red";
ele_div1.style.width = "200px";
ele_div1.style.fontSize="50px";
}
//提前定义好类选择器的样式，通过元素的classname属性值来设置其class属性值
var ele_div2 = document.getElementById("div2");
ele_div2.onclick = function (){
ele_div2.className= "d1";
}
script>
body>
html>
16.常见事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件title>
<script>
/*
常见事件：
1.点击事件：
1.onclick:单击事件
2.ondblclick:双击事件
2.焦点事件
1.onblur:失去焦点
用于表单校验
2.onfocus:元素获得焦点
3.加载事件
1.onload：一张页面或一幅图像完成加载
4.鼠标事件
1.onmousedwon：鼠标按钮被按下
2.onmouseup：鼠标案件被松开
3.onmousemove：鼠标移动
4.onmouseover：鼠标移到某元素上
5.onmouseout：鼠标从某元素移动开
5.键盘事件
1.onkeydown：某个键盘按键被按下
2.onkeyup某个键盘按键被松开
3.onkeypress 某个键盘按键被按下并松开
6.选择和改变
1.onchange 域的内容被改变
2.onselect 文本被选中
7.表单事件
1.onsubmit 确认按钮被点击
可以阻止表单提交
2.onreset 重置按钮被点击
*/
window.onload = function () {//html加载完成才会再加载该函数
//1.失去焦点事件
document.getElementById("username").onblur = function () {
alert("失去焦点。。。")
}
//2.鼠标移到某元素上
document.getElementById("username").onmouseover = function () {
alert("鼠标来了。。。")
}
//3.鼠标的点击事件
document.getElementById("username").onmousedown = function (event) {
alert(event.button);//返回值为左键0 滚轮1 右键2
}
//4.键盘事件
document.getElementById("username").onkeydown = function (event) {
// alert(event.keyCode); //event.keyCode 返回数值
if(event.keyCode==13){
alert("表单提交");
}
}
//onchange 域的内容被改变 当文本框内容发生该表触发事件
document.getElementById("username").onchange = function (event) {
alert("表单被改变了");
}
// //onsubmit事件 控制提交事件
// document.getElementById("form").onsubmit = function () {
// var flag = false;
// return flag;
// }
function check(){ //控制提交事件的另一种方法
return true;
}
}
script>
head>
<body>
<form action="#" id="form" onclick="return check">
<input name="username" id="username">
<input type="submit" value="提交">
form>
body>
html>
17.案例5_表格全选
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选title>
<style>
table{
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.over{
background-color: pink;
}
.out{
background-color: white;
}
style>
<script>
//在加载完html后加载script
window.onload = function () {
//1.给全选按钮绑定单击事件
document.getElementById("selectAll").onclick = function () {
//2.获取所有cb对象
var ele_cb = document.getElementsByName("cb");
//3.遍历ele_cb都选择 设置checked为true
for (var i = 0;ele_cb.length;i++){
ele_cb[i].checked = true;
}
}
//1.给全选按钮绑定单击事件
document.getElementById("unSelectAll").onclick = function () {
//2.获取所有cb对象
var ele_cb = document.getElementsByName("cb");
//3.遍历ele_cb都不选择 设置checked为false
for (var i = 0; ele_cb.length; i++) {
ele_cb[i].checked = false;
}
}
//1.给全选按钮绑定单击事件
document.getElementById("selectRev").onclick = function () {
//2.获取所有cb对象
var ele_cb = document.getElementsByName("cb");
//3.遍历ele_cb都反选 设置checked为相反
for (var i = 0; ele_cb.length; i++) {
ele_cb[i].checked = !ele_cb[i].checked;
}
}
//1.给第1个框框绑定事件
document.getElementById("firstCb").onclick = function () {
//2.获取所有cb对象
var ele_cb = document.getElementsByName("cb");
//3.遍历ele_cb 设置checked与第一个框框相同
for (var i = 0; ele_cb.length; i++) {
ele_cb[i].checked = this.checked;
}
}
//给所有tr标签绑定移到元素上和移出元素事件
var ele_tr = document.getElementsByTagName("tr");
for (var i =0;ele_tr.length;i++){
//移到元素上
ele_tr[i].onmouseover = function () {
this.className = "over";
}
//移出元素上
ele_tr[i].onmouseout = function () {
this.className = "out";
}
}
}
script>
head>
<body>
<table>
<caption>学生信息表caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb">th>
<th>编号th>
<th>姓名th>
<th>性别th>
<th>操作th>
tr>
<tr>
<td><input type="checkbox" name="cb">td>
<td>1td>
<td>令狐冲td>
<td>男td>
<td><a href="javascript:void(0);">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="cb">td>
<td>2td>
<td>任我行td>
<td>男td>
<td><a href="javascript:void(0);">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="cb">td>
<td>3td>
<td>岳不群td>
<td>?td>
<td><a href="javascript:void(0);">删除a>td>
tr>
table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
div>
body>
html>
18.案例6_注册页面CSS_校验
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*水平居中*/
margin: auto;
margin-top: 15px;
}
.rg_left{
/*border:1px solid red;*/
float: left;
margin: 15px;
}
.rg_left p[id="p1"]{
color: #ffd026;
font-size: 20px;
}
.rg_left p[id="p2"]{
color: #A6A6A6;
font-size: 20px;
}
.rg_center{
/*border:1px solid red;*/
float: left;
}
.rg_right{
/*border:1px solid red;*/
float: right;
margin: 15px;
}
.rg_right a{
color: pink;
font-size: 15px;
}
.rg_right{
font-size: 15px;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username,#password,#email,#name,#birthday,#phone,#yan{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
#yan{
width: 110px;
}
#imag_yan{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #ffd026;
border: 1px solid #ffd026;
}
#td_sub{
padding-left: 150px;
}
.error{
color: red;
}
style>
<script>
window.onload = function () {
//1.给表单绑定onsubmit事件
document.getElementById("form").onsubmit = function () {
//调用用户名校验方法 checkUsername（）
//调用密码校验方法 checkPassword（）
return checkUsername() && checkPassword();
}
//给用户名和密码分别绑定离焦事件
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
function checkUsername() {
//1.获取用户名
var username = document.getElementById("username").value;
//2.定义正则表达式
var reg_username = /^\w{6,12}$/;
//3.校验用户名是否符合正则表达式
var b = reg_username.test(username);
//4.提示信息
var s_username = document.getElementById("s_username");
if (b) {
//提示绿色对勾
s_username.innerHTML = "
";
} else {
//提示错误用户名有误
s_username.innerHTML = "用户名格式有误";
}
return b;
}
function checkPassword() {
//1.获密码
var password = document.getElementById("password").value;
//2.定义正则表达式
var reg_password = /^\w{6,12}$/;
//3.校验密码是否符合正则表达式
var b = reg_password.test(password);
//4.提示信息
var s_password = document.getElementById("s_password");
if (b) {
//提示绿色对勾
s_password.innerHTML = "";
} else {
//提示错误用户名有误
s_password.innerHTML = "密码格式有误";
}
return b;
}
script>
head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p id="p1">新用户注册p>
<p id="p2">USER REGISTERp>
div>
<div class="rg_center">
<div class="rg_form">
<form action="#" id="form" method="get">
<table>
<tr>
<td class="td_left"><label for="username">用户名label>td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username" class="error">span>td>
tr>
<tr>
<td class="td_left"><label for="password">密码label>td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
<span id="s_password" class="error">span>td>
tr>
<tr>
<td class="td_left"><label for="email">邮箱label>td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱">td>
tr>
<tr>
<td class="td_left"><label for="name">姓名label>td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名">td>
tr>
<tr>
<td class="td_left"><label for="phone">手机号label>td>
<td class="td_right"><input type="number" name="phone" id="phone" placeholder="请输入手机号">td>
tr>
<tr>
<td class="td_left">性别td>
<td class="td_right"><input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
td>
tr>
<tr>
<td class="td_left"><label for="birthday">出生日期label>td>
<td class="td_right"><input type="date" name="birthday" id="birthday">td>
tr>
<tr>
<td class="td_left"><label for="yan">验证码label>td>
<td class="td_right"><input type="text" name="yan" id="yan" placeholder="请输入验证码"><img src="img/verify_code.jpg" id="imag_yan">img>td>
tr>
<tr>
<td colspan="2" id="td_sub"><input type="submit" value="注册" id="btn_sub">td>
tr>
table>
form>
div>
div>
<div class="rg_right">
<p>已有账号<a href="#">立即登录a>p>
div>
div>
body>
html>在这里插入图片描述
