JavaScript基础
文档连接
*概念：一门客户端脚本语言
*运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
*脚本语言：不需要编译，直接就可以被浏览器解析执行
*功能：
*可以增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验
*JavaScript发展史：
1.1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C--，后更名为scriptease
2.1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript，同年java1.0发布，后来网景公司和SUN公司共同修改了LiveScript,命名为JavaScript
3.1996年，微软抄袭JavaScript开发出了JScript语言
4.1997年，ECMA(欧洲计算机制造商协会)统一规范了各客户端脚本语言命名为：ECMAScript,所有客户端脚本用语言的标准
*JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）
*ECMAScript：客户端脚本语言的标准
1.基本语法：
1.与html结合方式
1.内部js：
*定义<script>,标签体内容就是js代码
2.外部js:
*定义<script>,通过src引入外部的js文件
*注意：
1.<script>标签可以定义在html页面的任意位置，但是定义的位置会影响执行的顺序
2.<script>标签可以定义多个
2.注释
1.单行注释： //注释内容
2.多行注释：/* 注释内容*/
3.数据类型
1.原始数据类型（基本数据类型）：
1.number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2.String:字符串。 字符串 'abc' "a" "abc"
3.boolean:true和false
4.null:一个对象为空的占位符
5.undefined:未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
2.引用数据类型：对象
4.变量
*变量：一小块存储数据的内存空间
*Java语言是强类型语言，JavaScript是弱类型语言
强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
弱类型：在开辟变量存储空间时，不定义空间将来存储的数据类型，可以存放任意类型的数据
*语法：
*var 变量名 = 初始化值;
*typeof运算符：获取变量的类型
*注意：null运算后得到的是object(这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。)
5.运算符（基本规则同于Java）
1.一元运算符：只有一个运算数的运算符
++ -- +（正号）-（负号）
*注意：在JS中，如果运算数不是运算符所要求的类型（如正负号要求的必须为number类型），那么JS引擎会自动的将运算数进行类型转换
*其他类型转number：
*string 转 number，按照字面值转换；如果字面值不是数字，则转为NaN（不是数字的数字）（NaN与任意数字运算结果为NaN）
*boolean转number，true转换为1，false转换为0
2.算数运算符：
+ - * / % ...
3.赋值运算符：
= += -=...
4.比较运算符：
> < >= <= == ===(全等于)
*比较方式
1.类型相同：直接比较
*字符串：按照字典顺序比较；按位逐一比较，直到得出大小为止
2.类型不同：先进行类型转换，再比较
*=== 全等于，在比较之前，先判断类型，如果类型不一样则不相等
5.逻辑运算符：
&& || ！
&&：短路与
||：短路或
！：非
*其他类型转boolean
1.number：0或NaN为假，非0为真
2.string：除了空字符串（""），其他都为真
3.null&undefined:都是false
4.对象：所有对象都为true
6.三元运算符：
？ ：表达式
*语法：
表达式？值1：值2；
6.流程控制语句：
1.if...else..
2.switch
*在Java中，switch语句可以接收的数据类型：byte int short char ,枚举（1.5） String(1.7)
*switch(变量){
case 值：
}
*在JS中，switch语句可以接收任意的原始数据类型
3.while
4.do...while...
5.for
7.JS特殊语法：
1.语句以分号结尾,如果一行只有一条语句时,分号可以省略(不建议)
2.变量的定义使用var关键字，也可以省略不用
8.JS练习：九九乘法表
*代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
td{
border: 1px solid;
}
</style>
</head>
<body>
<script>
document.write("<table align ='center'>");
for(var i = 1; i<=9;i++){
document.write("<tr>");
for(var j =1;j<=i; j++){
document.write("<td>");
document.write(j + "*" +i + "=" +i*j + "  ");
document.write("</td>");
}
/* document.write("<br>"); */
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>
*用var修饰时：定义的变量是局部变量
* 不用var修饰时：定义的变量是全局变量(不建议)
2.基本对象：
Function:
1.创建：
1.var fun = new Function(形式参数列表，方法体);//了解即可
2.function 方法名(形式参数列表){
方法体
}
3.var 方法名 = function(形参列表){
方法体
}
2.方法：
3.属性：
length:代表形参的个数
4.特点：
1.方法定义时，形参的类型不用写
2.方法是一个对象，如果定义名称相同的方法，会覆盖之前定义的方法
3.在JS中，方法的调用只与方法的名称有关，和参数的列表无关
4.在方法声明中有一个隐藏的内置对象（数组），arguments,封装了所有的实际参数
5.调用：
方法名称（实际参数列表）；
Array
1.创建：
1.var arr = new Array(元素列表);
2.var arr = new Array(默认长度);
3.var arr = [元素列表];
2.方法
join(参数):将数组中的元素按照指定的分隔符拼接成字符串
push():在数组的尾部添加一个或多个指定元素
3.属性
length：数组的长度
4.特点
1.JS中，数组元素的类型是可变的；
2.JS中，数组的长度是可变的，
Boolean:相当于boolean的包装类对象
Date
1.创建
var date = new Date();
2.方法
1.tolocaleString()：返回当前Date对象对应的时间本地字符串个数
2.getTime():返回当前时间到1970/1/1（时间原点）的毫秒时间差
Math
1.创建
*特点：Math对象不用创建，直接Math.方法名（；） 调用
2.方法
random():返回0-1之间的随机数,含0不含1；
ceil(x):对数进行上舍入。(向上取整)
floor(x):对数进行下舍入（向下取整）
round(x):把数四舍五入为最接近的整数。（四舍五入）
3.属性
PI
Number：number的包装类对象
String：string 的包装类对象
RegExp：正则表达式对象
1.正则表达式：定义字符串的组成规则；
1.单个字符:[]
如：[a] [ab] [a-zA-Z0-9_]
*特殊符号代表特殊含义的单个字符
\d:单个数字字符[0-9]
\w:单个单词字符[a-zA-z0-9_]
2.量词符号：
?:表示出现0次或一次
*:表示出现0次或多次
+:表示出现1次或多次
{m,n}:表示 m<= 数量 <=n
*m如果缺省：{,n}:表示最多n次
*n如果缺省：{m,}:表示最少m次
3.开始结束符号
*^:开始
*$:结束
2.正则对象：
1.创建
1.var reg = new RegExp("正则表达式");
2.var reg = /正则表达式/;
2.方法
1.test(参数):验证指定的字符串是否符合正则表达式的规范
Global
1.特点：全局对象，Global中封装的方法不需要对象就可以直接调用； 方法();
2.方法：
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多（（会将特殊字符也编码）
decodeURIComponent():url解码
parseInt():将字符串转换成数字
*逐一判断每一个字符是否为数字，直到不是数字为止，将前边的数字部分转换成number，如果第一个字符不是数字就会转换成NaN
isNaN():判断一个值是否是NaN
*NaN六亲不认，连自己都不认，NaN参与的==比较全部为false
eval():将JS的字符串转换成js的代码并执行
3.URL编码
将中文字符按照指定字符集将每个字节转换为16进制数并在之前加上%的操作
如：你好世界 = %E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C
*DOM简单学习
*功能：控制html文档的内容
*代码：获取页面标签（元素）对象 Element
*document.getElementById("id值");通过元素的id获取元素对象
*操作Element对象：
1.修改属性值：
1.明确获取的对象是哪一个
2.查看API文档，找其中哪些属性可以设置
2.修改标签体内容：
*属性 innerHTML
1.获取元素对象
2.使用innerHTML属性修改标签体内容
*事件：
*onclick---单击事件
*功能：某些组件执行了某些操作之后，触发了某些代码的执行。
*如何绑定事件
1.直接在html标签上，指定事件的属性（操作），属性值就是js代码
*缺点：直接在标签上绑定，耦合度高,不利于维护
2.通过js获取元素对象,指定事件属性，设置一个函数
*案例：电灯开关
*代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/off.gif" id="light">
<input type="button" id="button" value="开/关" />
<script type="text/javascript">
/*
案例分析：
1.获取图片对象
2.获取开关button对象
3.绑定单击事件
4.通过函数修改src属性更换图片
*/
var light = document.getElementById("light");
var button = document.getElementById("button");
var flag= true;//代表电灯关着的
function fun(){
if(flag){
light.src = "img/on.gif";
flag=false;
}
else{
light.src = "img/off.gif";
flag = true;
}
}
button.onclick = fun;
</script>
</body>
</html>
*BOM
1.概念：Browser Object Model 浏览器对象模型
*将浏览器的各个组成部分封装成对象。
2.对象组成：
*Window：窗口对象
1.创建
2.方法
1.与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
*防止用户误操作
* 返回值：
*如果点击确定返回true
*如果点击取消返回false
prompt() 显示可提示用户输入的对话框。
*返回值：获取用户输入的信息
2.与打开关闭有关的方法
open() 打开一个新的浏览器窗口或查找一个已命名的窗口
*参数：打开的地址
*返回值：一个新的Window对象
close() 关闭浏览器窗口。
*谁调用关谁
3.与定时器有关的方法
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
*参数
1.js代码或调用函数或函数对象
2.毫秒值
*返回值：当前计时器的唯一标识（编号）
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
*参数：需要取消的计时器标识
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
3.属性
1.获取其他DOM对象
history
location
Navigator
Screen
2.获取DOM对象
document
4.特点
*Window对象不需要创建可以直接使用 windows调用。 windows.方法名():
*window引用可以省略，直接方法名调用 方法名();
*案例：轮播图
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img id="img" src="img/banner_1.jpg" width="100%">
<script type="text/javascript">
//获取图片对象
var img = document.getElementById("img");
//定义循环计时器,2秒执行一次fun
setInterval(fun,2000);
//将图片序列定义成变量
var number = 1;
function fun(){
//每执行一次funnumber加1
number++;
if(number>3){//三张图片轮播,如果大于三重置为1
number=1;
}
//修改图片的src
img.src = "img/banner_"+number+".jpg";
}
</script>
</body>
</html>
*Navigator：浏览器对象
*Screen：显示器屏幕对象
*History：历史记录对象
*这里的历史记录指的是：用户在当前窗口访问过的URL
1.创建
1.window.history
2.history
2.方法
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。
3.属性
*length 返回当前窗口访问过的 URL 数量。
*Location：地址栏对象
1.方法
reload() 重新加载当前文档（刷新）
2.属性
href 设置或返回完整的URL
*案例:自动跳转首页
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒后自动跳转首页...
</p>
<script >
var time = document.getElementById("time");
setInterval(fun1,1000)
var second = 5;
function fun1(){
second--;
time.innerHTML = second;
if(!second){
location.href ="http://www.baidu.com";
}
}
</script>
</body>
</html>
*DOM
*概念：Document Object Model 文档对象模型
*将标记语言稳当的各个组成部分，封装成对象。可以使用这些对象来对标记语言文档进行CRUD的动态操作
*DOM将html文档表达为树结构
*什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。
*DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
*W3C DOM 标准被分为 3 个不同的部分：
*核心 DOM - 针对任何结构化文档的标准模型
*Document:文档对象
*Element:元素对象
*Attribute:属性对象
*Text:文本对象
*Comment:注释对象
*Node:节点对象，其他5个的父对象
*XML DOM - 针对 XML 文档的标准模型
*HTML DOM - 针对 HTML 文档的标准模型
*核心DOM模型：
*Document:文档对象
1.创建（获取）:在html dom 模型中可以使用window对象来获取
1.window.document
2.document
2.方法：
1.获取Element对象：
1.getElementById() 根据ID属性值获取元素对象。id属性值一般唯一
2.getElementsByTagName() 根据元素名称获取元素对象们。返回值是一个数组
3.getElementsByClassName() 根据class属性值获取元素对象们。返回值是一个数组
4.getElementsByName() 根据name属性值获取元素对象们。返回值是一个数组
2.创建其他DOM对象：
createAttribute() 创建属性节点。
createComment() 创建注释节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
3.属性：
*Element:元素对象
1.获取、创建：通过document来获取和创建
2.方法：
removeAttribute() 删除指定的属性。
setAttribute() 设置属性
*Node:节点对象，其他5个的父对象
*特点：所有DOM对象都可以被认为是一个节点
*方法：
*CRUDdom树的方法：
appendChild() 向节点的子节点列表的结尾添加新的子节点。
removeChild() 删除（并返回）当前节点的指定子节点。
replaceChild() 用新节点替换一个子节点。
*属性：
*parentNode 返回当前节点的父节点。
*案例：动态表格
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
</table>
<script type="text/javascript">
/*
案例分析：
1.添加
1.给添加按钮绑定单击事件
2.获取文本框中的内容
3.创建td，设置td中的内容为文本框的内容
4.创建tr
5.将td添加到tr中
6.获取table，将tr添加到table中
2.删除
1.确定点的是哪一个超链接
<a href="javascript:void(0);" onclick="delTr(this);">删除</a>
2.怎么删除
*/
//1.给添加按钮绑定单击事件
var btn_add = document.getElementById("btn_add");
btn_add.onclick = function(){
//2.获取文本框中的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3.创建td，设置td中的内容为文本框的内容
//3.1创建id的td
var td_id = document.createElement("td");
//设置td中的内容为文本框的内容
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
//3.2创建name的<td>
var td_name = document.createElement("td");
//设置td中的内容为文本框的内容
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//3.3创建gender的<td>
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//创建a标签的<td>
var td_a = document.createElement("td");
//创建a标签
var ele_a = document.createElement("a");
//设置a标签的属性
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this);");
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
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 table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
function delTr(obj){
//获取当前元素下的父节点的父节点的父节点；即:a标签的父节点td的父节点tr的房源节点table
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
*HTML DOM:
*HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
1.标签体的设置和获取：innerHtml
*使用innerHtml优化动态表格案例（table中添加tr和td的步骤）
var table = document.getElementsByTagName("table")[0];
table.innerHTML += "<tr>\r\n" +
" <td>"+id+"</td>\r\n" +
" <td>"+name+"</td>\r\n" +
" <td>"+gender+"</td>\r\n" +
" <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\r\n" +
" </tr>";
2.使用html元素对象的属性
3.控制元素样式
1.使用元素的style属性来设置
如：
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size ---> fontSize
div1.style.fontSize = "20px";
2.提前定义好类选择器的样式。通过元素的className属性值来设置class
如：
div2.className = "d1";
div2.className = "d2";
事件监听机制
*概念：某些组件被执行了某些操作后，触发某些代码的执行。
*事件：就是某些操作：单击，双击，键盘按下了，鼠标移动了
*事件源：组件；如：按钮 文本输入框。。。
*监听器：代码。
*注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
*常见的事件：
1.点击事件：
1.onclick:单击事件
2.ondblclick:双击事件
2.焦点事件：
1.onfocus:元素获得焦点
2.onblur:元素失去焦点
*一般用于表单校验
3.加载事件：
1.onload:一张页面或一幅图像完成加载。
*支持该事件的标签:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
*支持该事件的对象:image, layer, window
4.鼠标事件：
1.onmousedown 鼠标按钮被按下。
*浏览器引擎调用监听器代码时传递了一个参数event，可以用来操作Event对象属性
*属性：
button:获取鼠标那个键被点击了（0，1，2）
2.onmouseup 鼠标按键被松开。
3.onmousemove 鼠标被移动。
4.onmouseover 鼠标移到某元素之上
5.onmouseout 鼠标从某元素移开。
5.键盘事件：
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开。
6.选择和改变：
1.onselect 文本被选中。
2.onchange 域的内容被改变。
7.表单事件：
1.onsubmit 确认按钮被点击。
*可以阻止表单提交，一般用于表单校验
*当监听器返回true就提交返回false就阻止提交
2.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%;
}
.over{
background-color: pink;
}
.out{
background-color: white;
}
</style>
<script type="text/javascript">
//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.判断如果选中,改为不选中,如果未选中,改为选中
/* if(cbs[i].checked){
cbs[i].checked = false;
}else{
cbs[i].checked = true;
} */
//3.设置所有的cb状态为反
cbs[i].checked = !cbs[i].checked;
}
}
document.getElementById("firstcb").onclick = function(){
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置所有的cb的状态和第一个cb相同
cbs[i].checked = this.checked;
}
}
//给所有的tr绑定移到元素之上和移出元素事件
var trs = document.getElementsByTagName("tr");
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 type="text/javascript">
/*
分析：
*/
window.onload = function(){
document.getElementById("form").onsubmit = function(){
return chekUsername() && chekPassword();
}
document.getElementById("username").onblur = chekUsername;
document.getElementById("password").onblur = chekPassword;
}
function chekUsername(){//验证用户名的方法
//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 chekPassword(){//验证密码的方法
//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="#" method="get" id="form">
<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>
