文章目录
JavaScript
概念
概念
:一门客户端脚本语言- 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
- 脚本语言:不需要编译,直接就可以被浏览器解析执行了
功能
:- 可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。
ECMAScript
基本语法
-
基本语法
:- 与html结合方式
- 内部JS:
- 定义<script>,标签体内容就是js代码
- 外部JS:
- 定义<script>,通过src属性引入外部的js文件
- 内部JS:
- 注意:
-
<script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
-
<script>可以定义多个。
-
- 与html结合方式
注释
注释
- 单行注释://注释内容
- 多行注释:/-注释内容-/
-
代码
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //单行注释 /- 多行注释1 多行注释2 -/ </script> </head> <body> </body> </html>
-
数据类型
原始数据类型
(基本数据类型):- number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
- string:字符串。 字符串 “abc” “a” ‘abc’
- boolean: true和false
- null:一个对象为空的占位符
- undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
引用数据类型
:对象查看当前变量的数据类型:
typeof
变量
-
变量
:一小块存储数据的内存空间 -
Java语言是强类型语言,而JavaScript是弱类型语言
- 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
- 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
-
语法
:- var 变量名 = 初始化值;
-
typeof
运算符:获取变量的类型。- 注:null运算后得到的是object
-
代码
-
var a = 1; var a1 = 1.5; var a2 = NaN; document.write(a + "******-" + typeof(a) + "<br>"); document.write(a1 + "******-" + typeof(a1) + "<br>"); document.write(a2 + "******-" + typeof(a2) + "<br>"); var b = "abc"; var b1 = 'abcd'; document.write(b + "******-" + typeof(b) + "<br>"); document.write(b1 + "******-" + typeof(b1) + "<br>"); var flag = true; document.write(flag + "******-" + typeof(flag) + "<br>"); var obj = null; var obj1 = undefined; var obj2; document.write(obj + "******-" + typeof(obj) + "<br>"); document.write(obj1 + "******-" + typeof(obj1) + "<br>"); document.write(obj2 + "******-" + typeof(obj2) + "<br>");
-
运算符
-
一元运算符
:只有一个运算数的运算符-
++,**,+(正号)
-
++,**:自增(自减)
-
++(**) 在前,先自增(自减),再运算
-
++(**) 在后,先运算,再自增(自减)
-
+(-):正负号
-
注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
- 其他类型转number:
- string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
- boolean转number:true转为1,false转为0
- 其他类型转number:
-
代码
-
var num = 3; var a = ++ num ; document.write(num);// 4 document.write(a); // 3 4 document.write("<hr>"); var b = +"123abc"; document.write(typeof (b)); document.write(b + 1); document.write("<hr>"); var flag = + true; var f2 = + false; document.write(typeof (flag) + "<br>");//number document.write(flag + "<br>");// 1 document.write(f2 + "<br>");// 0
-
-
-
算数运算符
-
+ - - / % ..
-
代码
-
var a = 3; var b = 4; document.write(a+b +"<br>"); document.write(a-b +"<br>"); document.write(a-b +"<br>"); document.write(a/b +"<br>"); document.write(a%b +"<br>");
-
-
-
-
赋值运算符
-
= += -+....
-
-
比较运算符
-
> < >= <= == ===(全等于)
-
比较方式
- 类型相同:直接比较
- 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
- 类型不同:先进行类型转换,再比较
- ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
- 类型相同:直接比较
-
代码
-
document.write((3 > 4) +"<br>"); document.write(("abc" < "acd") +"<br>"); document.write(("123" == 123) +"<br>"); document.write(("123" === 123) +"<br>");
-
-
-
逻辑运算符
-
&& || !
- 其他类型转boolean:
- number:0或NaN为假,其他为真
- string:除了空字符串(""),其他都是true
- null&undefined:都是false
- 对象:所有对象都为true
- 其他类型转boolean:
-
代码
-
var flag = true; document.write(flag+"<br>"); document.write(!flag+"<br>"); document.write("<hr>"); //number var num = 3; var num2 = 0; var num3 = NaN; document.write(!!num+"<br>"); document.write(!!num2+"<br>"); document.write(!!num3+"<br>"); document.write("<hr>"); //string var str1 = "abc"; var str2 = ""; document.write(!!str1+"<br>"); document.write(!!str2+"<br>"); document.write("<hr>"); // null & undefined var obj = null; var obj2; document.write(!!obj+"<br>"); document.write(!!obj2+"<br>"); document.write("<hr>"); // null & undefined var date = new Date(); document.write(!!date+"<br>"); document.write("<hr>"); obj = "123"; if(obj != null && obj.length > 0){//防止空指针异常 alert(123); } //js中可以这样定义,简化书写。 if(obj){//防止空指针异常 alert(111); }
-
-
-
三元运算符
-
? : 表达式
-
var a = 3; var b = 4; var c = a > b ? 1:0;
-
-
语法:
- 表达式? 值1:值2;
- 判断表达式的值,如果是true则取值1,如果是false则取值2;
-
特殊语法
JS特殊语法
:-
语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)
-
变量的定义使用var关键字,也可以不使用
- 用: 定义的变量是局部变量
- 不用:定义的变量是全局变量(不建议)
-
流程控制语句
流程控制语句
:- if…else…
- switch:
- 在java中,switch语句可以接受的 数据类型: byte int short char,枚举(1.5) ,String(1.7)
- switch(变量):
case 值:- 在JS中,switch语句可以接受 任意 的原始数据类型
- switch(变量):
- 在java中,switch语句可以接受的 数据类型: byte int short char,枚举(1.5) ,String(1.7)
- while
- do…while
- for
九九乘法表练习
-
代码
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九九乘法表</title> <style> td{ border: 1px solid; } </style> <script> document.write("<table align='center'>") for (var i = 1; i < 10; i++) { document.write("<tr>"); for (var j = 1; j <= i; j++) { document.write("<td>"); document.write(i + " - " + j + " = " + (i - j) + " "); document.write("</td>"); } document.write("</tr>") } document.write("</table>") </script> </head> <body> </body> </html>
-
基本对象
Function:函数(方法)对象
-
创建
:- var fun = new Function(形式参数列表,方法体); //忘掉吧
- function 方法名称(形式参数列表){
方法体
} - var 方法名 = function(形式参数列表){
方法体
}
-
方法
: -
属性
:- length:代表形参的个数
-
特点
:- 方法定义是,形参的类型 不用写,返回值类型 也不写。
- 方法是一个对象,如果定义名称相同的方法,会 覆盖
- 在JS中,方法的调用只与 方法的名称 有关,和 参数列表 无关
- 在方法声明中有一个隐藏的内置对象(数组),
arguments
,封装所有的实际参数
-
调用
:
方法名称(实际参数列表);
-
代码
-
var fun1 = new Function("a","b","c","alert(a);"); //调用方法 // fun1(3,4); // alert(fun1.length); //2. 创建方式2 function fun2(a , b){ alert(a + b); } var fun3 = function(a,b){ alert(a+b); } function fun2(a , b){ //alert(a - b); alert(a); alert(b); } /** - 求任意个数的和 -/ function add (){ var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } var sum = add(1,2,3,4); alert(sum); //add(1,3);
-
Array对象
-
Array
:数组对象创建
:- var arr = new Array(元素列表);
- var arr = new Array(默认长度);
- var arr = [元素列表];
方法
join(参数)
:将数组中的元素按照指定的分隔符拼接为字符串push()
:向数组的末尾添加一个或更多元素,并返回新的长度。
属性
- length:数组的长度
特点
:- JS中,数组元素的类型可变的。
变的。
- JS中,数组元素的类型可变的。
-
代码
-
//1.创建方式1 var arr1 = new Array(1,2,3); var arr2 = new Array(5); var arr3 = [1,2,3,4]; var arr4 = new Array(); document.write(arr1 +"<br>"); document.write(arr2 +"<br>"); document.write(arr3 +"<br>"); document.write(arr4 +"<br>"); var arr = [1,"abc",true]; document.write(arr +"<br>"); document.write(arr[0] +"<br>"); document.write(arr[1] +"<br>"); document.write(arr[2] +"<br>"); //document.write(arr[10] +"<br>"); arr[10] = "hehe"; document.write(arr[10] +"<br>"); document.write(arr[9] +"<br>"); //alert(arr.length);//11 document.write(arr.join("**")+"<br>"); arr.push(11); document.write(arr.join("**")+"<br>");
-
RegExp正则表达式对象
-
RegExp
:正则表达式对象-
正则表达式
:定义字符串的组成规则。-
单个字符:[]
-
如: [a] [ab] [a-zA-Z0-9_]
-
特殊符号代表特殊含义的单个字符:
\d
:单个数字字符 [0-9]\w
:单个单词字符[a-zA-Z0-9_]
-
-
量词符号:
?
:表示出现0次或1次-
:表示出现0次或多次+
:出现1次或多次{m,n}
:表示 m<= 数量 <= n- m如果缺省:{,n}:最多n次
- n如果缺省:{m,}:最少m次
-
开始结束符号
^
:开始$
:结束
-
-
正则对象
:- 创建
1. var reg = new RegExp(“正则表达式”);
2. var reg = /正则表达式/; - 方法
- test(参数):验证指定的字符串是否符合正则定义的规范
- 创建
-
-
代码
-
//1. var reg = new RegExp("^\\w{6,12}$"); //2. var reg2= /^\w{6,12}$/; var username = "zhangsan"; //验证 var flag = reg.test(username); alert(flag);
-
Global对象
-
Global
-
特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();
-
方法:
-
encodeURI()
:url编码 -
decodeURI()
:url解码 -
encodeURIComponent()
:url编码,编码的字符更多 -
decodeURIComponent()
:url解码 -
parseInt()
:将字符串转为数字- 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
isNaN()
:判断一个值是否是NaN- NaN 参与的==比较全部为 false
- 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
-
eval()
:将 JavaScript 字符串,并把它作为 脚本代码 来执行。
-
URL编码
-
url编码是一种浏览器用来打包表单输入的格式
-
例如:
- 金箍棒也怕坑 = %E9%87%91%E7%AE%8D%E6%A3%92%E4%B9%9F%E6%80%95%E5%9D%91
-
-
-
BOM
概念与组成
-
概念
:Browser Object Model 浏览器对象模型- 将浏览器的各个组成部分封装成对象。
-
组成
:-
Window:窗口对象
-
Navigator:浏览器对象
-
Screen:显示器屏幕对象
-
History:历史记录对象
-
Location:地址栏对象
-
Window对象
-
创建
-
方法
-
与弹出框有关的方法:
-
alert()
显示带有一段消息和一个确认按钮的警告框。 -
confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框。-
如果用户点击确定按钮,则方法返回true
-
如果用户点击取消按钮,则方法返回false
-
<script> var flag = confirm("确定要关闭吗"); if(flag){ alert("已关闭"); } else{ alert("已取消"); } </script>
-
-
-
prompt()
显示可提示用户输入的对话框。-
返回值:获取用户输入的值
-
var input = prompt("请输入"); alert(input);
-
-
-
-
与打开关闭有关的方法:
-
close()
:关闭浏览器窗口。- 哪个对象调用,哪个对象就被关闭
-
open()
:打开一个新的浏览器窗口- 返回新的Window对象
-
代码
-
var openId = document.getElementById("openButton"); var newWindow; openId.onclick = function (){ newWindow = open(); } var closeId = document.getElementById("closeButton"); closeId.onclick = function (){ newWindow.close(); }
-
-
-
与定时器有关的方式
-
setTimeout()
:在指定的毫秒数后调用函数或计算表达式。- 参数:
- js代码或者方法对象
- 毫秒值
- 返回值:唯一标识,用于取消定时器
- 参数:
-
clearTimeout()
:取消由 setTimeout() 方法设置的timeout。 -
setInterval()
:按照指定的周期(以毫秒计)来调用函数或计算表达式。 -
clearInterval()
:取消由 setInterval() 设置的 timeout。 -
代码
-
var timeout = setTimeout("alert('定时器触发')",2000); clearTimeout(timeout); var timeout2 = setInterval("alert('循环定时器触发')",2000); clearInterval(timeout2);
-
-
-
属性与特点
属性
:- 获取其他BOM对象:
- history
- location
- Navigator
- Screen:
- 获取DOM对象
- document
- 获取其他BOM对象:
特点
- Window对象不需要创建可以直接使用 window 使用。
- window.方法名();
- window 引用 可以省略
- 方法名();
- Window对象不需要创建可以直接使用 window 使用。
案例:轮播图
-
代码
-
<body> <img id="img" src="img/banner_1.jpg" width="100%"> <script> var number = 0; function circle(){ number++; if(number > 3) number %= 3; elementById.src = "img/banner_" + number + ".jpg"; } var elementById = document.getElementById("img"); var interval = setInterval(circle,1000); </script> </body>
-
Location:地址栏对象
创建(获取)
:- window.location
- location
方法
:reload()
:重新加载当前文档。刷新
属性
href
:设置或返回完整的 URL
案例:自动跳转首页
-
代码
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动跳转首页</title> <style> p{ text-align: center; } span{ color: red; } </style> </head> <body> <p> <span id="time">5</span>秒之后,自动跳转首页 </p> <script> var number = 5; function jump(){ number**; if(number <= 0){ location.href = "https:www.baidu.com"; } time.innerHTML = number + ""; } var time = document.getElementById("time"); setInterval(jump,1000); </script> </body> </html>
-
History:历史记录对象
创建(获取)
:- window.history
- history
方法
:back()
:加载 history 列表中的前一个 URL。forward()
:加载 history 列表中的下一个 URL。go(参数)
:加载 history 列表中的某个具体页面。- 参数:
- 正数:前进几个历史记录
- 负数:后退几个历史记录
- 参数:
属性
:- length 返回当前窗口历史列表中的 URL 数量。
DOM
简单入门
-
功能
:控制html文档的内容 -
获取页面标签(元素)对象
:Elementdocument.getElementById("id值")
:通过元素的id获取元素对象
-
操作Element对象
:-
修改属性值:
- 明确获取的对象是哪一个?
- 查看API文档,找其中有哪些属性可以设置
-
修改标签体内容:
-
属性:innerHTML
-
获取元素对象
-
使用 innerHTML 属性修改标签体内容
-
代码
-
<script> //通过id获取元素对象 var light = document.getElementById("light"); alert("我要换图片了。。。"); light.src = "img/on.gif"; //1.获取h1标签对象 var title = document.getElementById("title"); alert("我要换内容了。。。"); //2.修改内容 title.innerHTML = "不识妻美刘强东"; </script>
-
-
-
-
概述
- DOM树
概念
-
概念
: Document Object Model 文档对象模型- 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
-
W3C DOM 标准
被分为 3 个不同的部分:- 核心 DOM - 针对任何结构化文档的标准模型
-
Document:文档对象
-
Element:元素对象
-
Attribute:属性对象
-
Text:文本对象
-
Comment:注释对象
-
Node:节点对象,其他5个的父对象
-
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
- 核心 DOM - 针对任何结构化文档的标准模型
核心DOM模型
Document:文档对象
-
Document:文档对象
-
创建(获取):在html dom模型中可以使用window对象来获取
- window.document
- document
-
方法:
-
获取Element对象:
-
getElementById()
:根据id属性值获取元素对象。id属性值一般唯一 -
getElementsByTagName()
:根据元素名称获取元素对象们。返回值是一个数组 -
getElementsByClassName()
:根据Class属性值获取元素对象们。返回值是一个数组 -
getElementsByName()
:根据name属性值获取元素对象们。返回值是一个数组
-
-
创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
createTextNode()
-
-
属性
-
Element:元素对象与Node:结点对象
- Element:元素对象
- 获取/创建:通过document来获取和创建
- 方法:
removeAttribute()
:删除属性setAttribute()
:设置属性
- Node:节点对象,其他5个的父对象
- 特点:所有dom对象都可以被认为是一个节点
- 方法:
- CRUD dom树:
appendChild()
:向节点的子节点列表的结尾添加新的子节点。removeChild()
:删除(并返回)当前节点的指定子节点。replaceChild()
:用新节点替换一个子节点。
- CRUD dom树:
- 属性:
- parentNode 返回节点的父节点。
HTML:DOM
-
HTML DOM
-
标签体的设置和获取:innerHTML
-
使用html元素对象的属性
-
控制元素样式
-
使用元素的style属性来设置
-
如:
-
//修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size**> fontSize div1.style.fontSize = "20px";
-
-
提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。
-
-
案例:动态表格
-
代码
-
<script> //使用innerHTML添加 document.getElementById("btn_add").onclick = function() { //2.获取文本框的内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //获取table var table = document.getElementsByTagName("table")[0]; //追加一行 table.innerHTML += "<tr>\n" + " <td>"+id+"</td>\n" + " <td>"+name+"</td>\n" + " <td>"+gender+"</td>\n" + " <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >删除</a></td>\n" + " </tr>"; } //删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script>
-
事件
-
功能
: 某些组件被执行了某些操作后,触发某些代码的执行。- 造句: xxx被xxx,我就xxx
- 我方水晶被摧毁后,我就责备对友。
- 敌方水晶被摧毁后,我就夸奖自己。
- 造句: xxx被xxx,我就xxx
-
如何绑定事件
- 直接在html标签上,指定事件的属性(操作),属性值就是js代码
- 事件:onclick:单击事件
- 通过js获取元素对象,指定事件属性,设置一个函数
- 直接在html标签上,指定事件的属性(操作),属性值就是js代码
-
代码
-
<body> <img id="light" src="img/off.gif" onclick="fun();"> <img id="light2" src="img/off.gif"> <script> function fun(){ alert('我被点了'); alert('我又被点了'); } function fun2(){ alert('咋老点我?'); } //1.获取light2对象 var light2 = document.getElementById("light2"); //2.绑定事件 light2.onclick = fun2; </script> </body>
-
案例
-
灯泡开关
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电灯开关</title> </head> <body> <img id="light" src="img/off.gif"> <script> function show(){ if(flag){ light.src = "img/off.gif"; flag = false; } else{ light.src = "img/on.gif"; flag = true; } } var light = document.getElementById("light"); var flag = false; light.onclick = show; </script> </body> </html>
-
常见的事件
-
点击事件
:- onclick:单击事件
- ondblclick:双击事件
-
焦点事件
:-
onblur:失去焦点
- 一般用于
表单校验
- 一般用于
-
onfocus:元素获得焦点。
-
-
加载事件
:- onload:一张页面或一幅图像完成加载。
-
鼠标事件
:- onmousedown:鼠标按钮被按下。
- 定义方法时,定义一个
形参
来接受 event 对象 - event 对象的 button 属性可以获取鼠标按钮键被点击了
- onmouseup:鼠标按键被松开。
- onmousemove:鼠标被移动。
- onmouseover:鼠标移到某元素之上。
- onmouseout:鼠标从某元素移开。
-
键盘事件
:- onkeydown:某个键盘按键被按下。
- onkeyup:某个键盘按键被松开。
- onkeypress:某个键盘按键被按下并松开。
-
选择和改变
- onchange:域的内容被改变。
- onselect:文本被选中。
-
表单事件
:-
onsubmit:确认按钮被点击。
-
阻止 表单的提交
- 方法返回
false
,表单则被 阻止提交 - 方法返回
true
,表单则被 提交
- 方法返回
-
onreset:重置按钮被点击。
-
案例:表格全选
-
代码
-
<!DOCTYPE html> <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%; } .out{ background-color: white; } .over{ background-color: pink; } </style> <script> /* 分析: 1.全选: * 获取所有的checkbox * 遍历cb,设置每一个cb的状态为选中 checked */ //1.在页面加载完后绑定事件 window.onload = function(){ //2.给全选按钮绑定单击事件 document.getElementById("selectAll").onclick = function(){ //全选 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为选中 checked cbs[i].checked = true; } } document.getElementById("unSelectAll").onclick = function(){ //全不选 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为未选中 checked cbs[i].checked = false; } } document.getElementById("selectRev").onclick = function(){ //反选 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为相反 cbs[i].checked = !cbs[i].checked; } } document.getElementById("firstCb").onclick = function(){ //第一个cb点击 //1.获取所有的checkbox var cbs = document.getElementsByName("cb"); //获取第一个cb //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态和第一个cb的状态一样 cbs[i].checked = this.checked; } } //给所有tr绑定鼠标移到元素之上和移出元素事件 var trs = document.getElementsByTagName("tr"); //2.遍历 for (var i = 0; i < trs.length; i++) { //移到元素之上 trs[i].onmouseover = function(){ this.className = "over"; } //移出元素 trs[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>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb" ></td> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb" ></td> <td>3</td> <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>
案例:表单验证
-
代码
-
<!DOCTYPE html> <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; padding-top: 25px; } .rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; } .rg_left{ /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child{ color:#FFD026; font-size: 20px; } .rg_left > p:last-child{ color:#A6A6A6; font-size: 20px; } .rg_center{ float: left; /* border: 1px solid red;*/ } .rg_right{ /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child{ font-size: 15px; } .rg_right p a { color:pink; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px ; } #username,#password,#email,#name,#tel,#birthday,#checkcode{ width: 251px; height: 32px; border: 1px solid #A6A6A6 ; /*设置边框圆角*/ border-radius: 5px; padding-left: 10px; } #checkcode{ width: 110px; } #img_check{ height: 32px; vertical-align: middle; } #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026 ; } .error{ color:red; } #td_sub{ padding-left: 150px; } </style> <script> /* 分析: 1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。 如果都为true,则监听器方法返回true 如果有一个为false,则监听器方法返回false 2.定义一些方法分别校验各个表单项。 3.给各个表单项绑定onblur事件。 */ window.onload = function(){ //1.给表单绑定onsubmit事件 document.getElementById("form").onsubmit = function(){ //调用用户校验方法 chekUsername(); //调用密码校验方法 chekPassword(); //return 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 flag = reg_username.test(username); //4.提示信息 var s_username = document.getElementById("s_username"); if(flag){ //提示绿色对勾 s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>"; }else{ //提示红色用户名有误 s_username.innerHTML = "用户名格式有误"; } return flag; } //校验密码 function checkPassword(){ //1.获取用户名的值 var password = document.getElementById("password").value; //2.定义正则表达式 var reg_password = /^\w{6,12}$/; //3.判断值是否符合正则的规则 var flag = reg_password.test(password); //4.提示信息 var s_password = document.getElementById("s_password"); if(flag){ //提示绿色对勾 s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>"; }else{ //提示红色用户名有误 s_password.innerHTML = "密码格式有误"; } return flag; } </script> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--定义表单 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">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="tel">手机号</label></td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td> </tr> <tr> <td class="td_left"><label>性别</label></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" placeholder="请输入出生日期"></td> </tr> <tr> <td class="td_left"><label for="checkcode" >验证码</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> <img id="img_check" src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有账号?<a href="#">立即登录</a></p> </div> </div> </body> </html>
-