JavaScript初体验(上接HTML5、CSS初体验)
<mark>学习笔记,如有错误,希望尽快在评论区指出,不胜感激。</mark>
仅适用于初学者,建议学完H5、CSS并结合相关视频食用,文章提及内容仅涉及基础,更多内容请自学。
HTML5、CSS初体验.
参考教程 菜鸟教程. bilibili.
1、概念
客户端脚本语言
无需编译,直接可以被浏览器解析执行
2、功能
增强用户和html页面交互过程,控制html元素,实现页面的动态效果,增强用户体验
JavaScript = ECMAScript + JavaScript特有的东西(BOM+DOM)
ECMA(欧洲计算机制造商协会),ECMAScript,所有客户端脚本语言的标准
一、ECMAScript
1、基本语法
* 与html结合
1、内部JS:
<script>js代码</script>
2、外部JS:
<script src="js文件路径"></script>
* 注:<script>可以定义在html页面任何地方,但位置会影响执行顺序。
* <script>可以定义多个。
* 注释
* 单行://内容
* 多行:/* 内容 */
* 数据类型
* 基本数据类型:
1、number:数字(整数/小数/NAN(不是数字的数据类型))
2、string:字符串(无字符的定义)"abc"、'a'、'abc'
3、boolean:true / false
4、null:一个对象为空的占位符
5、undefined:未定义。如果变量没有给初始化,默认值undefined
* 引用数据类型:对象
* 变量
* 一小块储存数据的内存空间
* Java 强类型语言, JavaScript 弱类型语言
* 强类型:在开辟变量存储空间时,定义了空间存储数据的数据类型。
* 弱类型:在开辟变量存储空间时,不定义了空间存储数据的数据类型,可以存放任意类型数据
* 语法:
* var 变量名 = 初始值;
* var a = 9; a = "abc"; //正确
* 运算符
1、一元运算符:++ -- +(正号)//注:JS中,如果运算数不是number类型,会自动进行类型转换
//其他类型转换成number
* string: 按字面值转换,如果字面值不是数字,则转换成 (NAN)
* boolean: true转1,false转0;
* var num1 = +"abc", num2 = +"321";
* typeof(num1) -> number; typeof(num2) -> number;
* num1 -> NAN; num2 -> 321;
2、算数运算符:+ - * / % ......
3、赋值运算符:= += .......
4、比较运算符:> < >= <= == ===(全等于)
* ==与===的区别
* "123" == 123 返回true
* "123" === 123 返回false
* 全等于:先判断类型,类型不同直接返回false
5、逻辑运算符:&& || !
* 其他类型转 boolean:
* 1. number: 0或NAN为假,其他为真
* 2. string: 除空字符串(""),其他为真
* 3. 对象: 所有对象都为true
* 4. null&undefined: 都为false//防止空指针异常
6、三元运算符:? :
* var a = 3, b = 4, c;
* c = a>b?true:false;
* document.write(c);
* 流程控制语句
* if...else...
* switch(变量){case 值:语句;}
* while
* do...while
* for
2、基本对象
Function:函数(方法)对象
* 创建:
* function 方法名称(形参列表){
方法体;
}
* var 方法名 = function(形参列表){
方法体;
}
* 属性:
* length:参数个数
* 特点:
* 1.方法定义式,形参类型可以不用写
* 2.方法是一个对象,如果定义名称相同的方法,后面的会覆盖前面的
* 3.在JS中,方法的调用只与名称有关,与参数列表无关。
* 4.在方法声明中有一个隐藏的内置对象(数组)
* arguments[],封装所有实际参数。
* 解释:function fun(a, b){};
* fun(); // a:undefined b:undefined
* fun(1); // a:1 b:undefined
* fun(1,2,3);// a:1 b:2
* function fun1(){
* alert(arguments[0]);
* }
* fun1(1,2,3);
* //弹出框值为1
* 调用:
* 方法名称(实际参数列表);
Array:数组对象
* 创建:
* var arr = new Array(元素列表);
* var arr = new Array(默认长度);//只有一个参数
* var arr = [元素列表];
* 注:var arr = [1,"abc",true];//成立
* 属性:
* length:数组长度
* 方法:
* 将数组中的元素连接成字符串
* join("连接字符")//连接字符默认为",";
* push();//在数组后添加一个或多个元素,返回新长度。
* 特点:
* 数组类型可变
* 数组长度可变
Data:日期对象
* 创建:
* var data = new Data();
* 方法:
* toLocaleString();//根据本地时间,把Data象转换成字符串。
* getHours();getMinutes();getSeconds();getFullYear();//返回Data对象相应的值
Math:数学对象
* 创建:无需创建直接使用。
Math.方法名();
* 方法:
* random();//返回0 ~ 1 之间的随机数(含0不含1)
* ceil(x);//向上取整
* floor(x);//向下取整
* round(x);//把数四舍五入为最接近的正数
* 应用:取1~100之间的整数
* var num = Math.ceil(Math.random()*100)+1;
* alert(num);
* 属性:
* PI
RegExp:正则表达式对象
* 正则表达式:定义字符串组成规则。
* 1.单个字符:
* 如:[a] [ab] [a-zA-Z0-9_]//该字符只能是字母数字下划线
* 特殊符号代表特殊含义的单个字符:
* \d:单个数字字符[0-9]
* \w:单个单词字符[a-zA-Z0-9_]
* 2.量词符号:
* ?:表示出现0次或1次
* *:表示出现0次或多次
* +:出现1次或多次
* {m,n}:表示 m<=数量<=n
* * m如果缺省:{,n}//最多n次
* * n如果缺省:{m,}//最少m次
* 3.开始结束符号
* ^:开始
* $:结束
* 正则对象:
* 1.创建
* var reg = new regExp("正则表达式");
* var reg = /正则表达式/;
* 2.方法
* test(参数):验证字符串是否符合正则表达式规则,返回boolean类型
* 例: var reg = /^\w{6,12}$/;
* var str = "abcdefghi";
* var flag = reg.test(str);
* alert(flag);
* 用于表单校验
Global对象
* 1.特点:全局对象,Global封装的方法不需要对象就可以直接调用。 方法名();
* 2.方法:
* encodeURI():url编码
* decodeURI():url解码
* encodeURIComponent():url编码,编码字符更多
* decodeURIComponent():url解码
* prarseInt():将字符串转为数字
* 注意判断每个字符是否为数字,直到不是数字为止,将前面的数字部分全部转为number
* URL编码
* 编码:qq邮箱 -> qq%E9%82%AE%E7%AE%B1
* 解码:qq%E9%82%AE%E7%AE%B1 -> qq邮箱
* isNaN():判断一个值是否为NaN
* NaN参与的==全为false
* alert(NaN==NaN); -> false;
* inNaN(NaN); -> true;
二、DOM
概念:Document Object Model 文档对象模型
* 将标记语言的各个组成部分封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作。
*html文档 => DOM树
功能:控制html文档的内容
代码:获取页面标签(元素)对象Element document.getElementById(“id值”);
W3C DOM 标准被分为 3 各不同的部分
* 核心 DOM - 针对任何结构化文档的标准模型
* Document:文档对象
* Element:元素对象
* Attribute:属性对象
* Text:文本对象
* Comment:注释对象
* XML DOM -针对 XML 文档的标准模型
* HTML DOM -针对 HTML 文档的标准模型
1、核心DOM模型
* Document:文档对象
* 创建(获取):在html dom模型中可以使用window对象来获取
* window.document
* document
* 方法:
* 获取Element对象:
* getElementById()//根据id值获取元素对象,id属性一般唯一
* getElementsByTagName()//根据元素名称获取元素对象,返回值是一个数组
* getElementsByClassName()//根据class获取元素对象,返回值是一个数组
* getElementsByName()//根据name获取元素对象,返回值是一个数组
* 注:若元素,class,name属性只有一个,则可以通过var className = document.getElementsByClassName("class属性值")[0];获取Element对象
* 创建其他DOM对象:
* createElement()
* createTextNode()
* createAttribute()
* createComment()
* Element:元素对象
* 创建/获取:通过document来获取和创建
* 方法:
* removeAttribute():删除属性
* setAttribute("属性","名称"):设置属性
* var time = document.getElementById("time");
* time.removeAttribute("属性值");
* time.setAttribute("属性值");
* Node:节点对象,其他 5 个对象的父对象
* 特点:所有dom对象都可以被认为一个节点
* 方法:
* CRUD dom树
* appendChild():向节点的子节点列表中添加新的字节点
* removeChild():删除(并返回)当前节点的子节点
* replaceChild():用新节点替换一个子结点
2、HTML DOM
1.标签体的设置和获取:innerHTML
* <div id="div1">
* div1
* </div>
* <script>
* var div1 = document.getElementById("div1");
* // var test_div1 = div1.innerHTML;
* // document.write(test_div1); 此时打印div1
* div1.innerHTML = "<input name='div' value='div' type='text'>"
* </script>
---------------------------------------------------------------------------
* 对与下面动态表格样例添加标签元素也可这样做:
* table.innerHTML += "" +
* " <tr>" +
* " <td>\n" +
* " <label class=\"checkbox-inline\">\n" +
* " <input type=\"checkbox\" name=\"ch\">\n" +
* " </label>\n" +
* " </td>\n" +
* " <td>" + id + "</td>\n" +
* " <td>" + name + "</td>\n" +
* " <td>" + gender + "</td>\n" +
* " <td><a class=\"btn-sm btn btn-primary active btn-lg\" href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td>\n" +
* " </tr>"
2.使用html元素对象的属性
* Element元素.className = "设置的classname"
3.控制样式
* 1.使用元素的style属性设置
* var image = document.getElementById("icon");
* image.style.width = "200px"
* 2.提前定义好类选择器的样式,通过className属性设置器class值
操作Element对象
操作Element对象:
* 1.修改属性值:
* 点击换图片样例:
* <img src="../images/icon-comt-a.png" id="icon">
* <script>
* var image = document.getElementById("icon");
* var flag = false;
* image.onclick = function () {
* if (flag) {
* image.src = "../images/icon-comt-a.png";
* flag = false;
* }else{
* image.src = "../images/icon-comt.png";
* flag = true;
* }
* }
* </script>
* 2.修改标签体内容
* 属性:innerHTML
* 获取元素对象
* 使用innerHTML属性修改标签体内容
* <var id="number">123</var>
* <script>
* var num = document.getElementById("number");
* alert("换数据");
* num.innerHTML += 4;
* </script>
动态表格案例
部分class属性为bootstrap内的,下次写笔记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息表</title>
<style>
.div_header {
text-align: center;
margin-top: 40px;
}
td, th {
text-align: center;
border: 1px solid;
}
table {
border: 1px solid;
margin: auto;
width: 500px;
}
.div_table {
margin-top: 25px;
}
.div_choose {
margin: auto;
width: 500px;
}
</style>
</head>
<body>
<div class="div_header">
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" class="btn btn-default btn-lg active btn-sm" id="btn_add" value="添加">
</div>
<div class="div_table">
<table id="body_table" class="table table-bordered table-hover">
<caption style="text-align: center">学生信息表</caption>
<thead>
<tr>
<th>选择</th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="checkbox-inline">
<input type="checkbox" name="ch">
</label>
</td>
<td>1</td>
<td>赵</td>
<td>男</td>
<td><a class="btn-sm btn btn-primary active btn-lg" href="javascript:void(0);" onclick="delTr(this);">删除</a>
</td>
</tr>
<tr>
<td>
<label class="checkbox-inline">
<input type="checkbox" name="ch">
</label>
</td>
<td>2</td>
<td>钱</td>
<td>男</td>
<td><a class="btn-sm btn btn-primary active btn-lg" href="javascript:void(0);" onclick="delTr(this);">删除</a>
</td>
</tr>
<tr>
<td>
<label class="checkbox-inline">
<input type="checkbox" name="ch">
</label>
</td>
<td>3</td>
<td>孙</td>
<td>?</td>
<td><a class="btn-sm btn btn-primary active btn-lg" href="javascript:void(0);" onclick="delTr(this);">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div_choose row">
<div class="col-xs-3">
<input class="btn btn-default btn-lg active btn-sm form-control" type="button" value="全选" id="All_election">
</div>
<div class="col-xs-3">
<input class="btn btn-default btn-lg active btn-sm form-control" type="button" value="全不选"
id="dis_All_election">
</div>
<div class="col-xs-3">
<input class="btn btn-default btn-lg active btn-sm form-control" type="button" value="反选" id="reverse_election">
</div>
</div>
<script>
document.getElementById("btn_add").onclick = function () {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
var td_choose = document.createElement("td");
var choose = document.createElement("input");
choose.setAttribute("type", "checkbox");
choose.setAttribute("name", "ch");
td_choose.appendChild(choose);
var td_a = document.createElement("td");
var a = document.createElement("a");
var text_a = document.createTextNode("删除");
a.setAttribute("href", "javascript:void (0);");
a.setAttribute("onclick", "delTr(this)");
a.appendChild(text_a);
td_a.appendChild(a);
var tr = document.createElement("tr");
tr.appendChild(td_choose);
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
var table = document.getElementById("body_table");
table.appendChild(tr);
};
document.getElementById("All_election").onclick = function () {
var tr_all = document.getElementsByName("ch");
for (var i = 0; i < tr_all.length; i++) {
tr_all[i].checked = true;
}
};
document.getElementById("dis_All_election").onclick = function () {
var tr_all = document.getElementsByName("ch");
for (var i = 0; i < tr_all.length; i++) {
tr_all[i].checked = false;
}
};
document.getElementById("reverse_election").onclick = function () {
var tr_all = document.getElementsByName("ch");
for (var i = 0; i < tr_all.length; i++) {
tr_all[i].checked = !tr_all[i].checked;
}
};
function delTr(obj) {
// alert(obj);
var tbody = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
tbody.removeChild(tr);
}
</script>
</body>
</html>
三、BOM
概念
Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象
组成
Window:窗口对象
Navigator:浏览器对象
Screen:显示器记录对象
History:历史记录对象
Location:地址栏对象
Window对象
1.方法
* 与弹出框有关的方法:
* alert()显示带有一段消息和确认按钮的警告框
* confirm()显示带有一段小输及确认、取消按钮的对话框
* 如果用户点击确认返回true
* 如果用户点击取消返回false
* prompt()显示课提示输入的对话框
* 返回用户输入的值
* 与窗口开关有关的方法:
* open();打开窗口,返回Window对象//可以传参
* var win = open("https://www.baidu.com/");
* close();//关闭窗口, 谁调用关谁
* win.close();//没有指定调用对象,关闭默认窗口
* 与定时器有关的方法:
* setTimeout(); 指定毫秒值后调用函数或计算表达式, 一次性定时器
* 参数:1.js代码或者方法 2.毫秒值
* 返回值:唯一标识符,用于取消定时器
* clearTimeout(); 取消有setTimeout()方法设置的timeout.
* setInterval(); 按照指定周期(毫秒值)来调用函数或计算表达式
* clearInterval(); 取消有setInterval()设置的timeout。
2.特点
* window对象不需要创建直接使用。 window.方法名();
* window引用可以省略。 方法名();
3. 属性:
* 获取其他BOM对象
* history
* location
* Navigator
跳转页面案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳转页面</title>
<style>
p{
text-align: center;
color: #A6A6A6;
}
samp{
font-size: large;
color: red;
}
</style>
</head>
<body>
<p><samp id="time">5</samp>秒后自动跳转...</p>
<script>
var time = document.getElementById("time");
var num = 5;
function fun() {
num--;
time.innerHTML = num+"";
if(num==0){
location.href = "aaaaa.html";
}
}
// setTimeout("alert('sdaa')",1000);
setInterval(fun,1000);
</script>
</body>
</html>
Location:地址栏对象
1.创建
* window.location
* location
2.方法
* reload()重新加载当前文档
* document.getElementById("id值").onclick = function () {
* location.reload();
* }
3.属性
* href 设置返回完整的URL
* location.href = "URL";
History:历史记录对象
1.创建:
* window.history
* history
2.方法
* back() 加载history列表中前一个页面
* forward()加载history列表中的后一个页面
* go(参数) 加载history列表中的某一个页面
* 正数表示前讲n个页面
* 负数代表后退n个页面
3.属性
* length 返回当前窗口的列表中的页面个数
四、事件监听机制
概念:操作。如:单击,双击,键盘按下、松开
事件源:组件。如:按钮,文本框
***:代码
注册j监听:事件源发生事件,出发***代码
常见事件:
1、点击事件
* onclick:单击事件
* ondblclick:双击事件
2、焦点事件
* onblur:失去焦点
* onfocus:获取焦点
3、加载事件
* onload:页面或图片加载完成
4、鼠标事件:
* onmousedown:当按下鼠标按钮时运行脚本
* onmousemove:当鼠标指针移动时运行脚本
* onmouseout:当鼠标指针移出元素时运行脚本
* onmouseover:当鼠标指针移至元素之上时运行脚本
* onmouseup:当松开鼠标按钮时运行脚本
5、键盘事件:
* onkeydown:当按下按键时运行脚本
* onkeypress:当按下并松开按键时运行脚本
* onkeyup:当松开按键时运行脚本
6、表单事件:
* onsubmit:确认键被点击
* onreset:重置键被点击
鼠标事件样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样例</title>
</head>
<body>
<div id="mouse" style="width: 150px">
<button onmouseover="f1(this)" onmouseout="f2(this)" onmousedown="f3(this)" onmouseup="f4(this)" style="width: 100%; text-align: center; color: #FFD026">鼠标事件</button>
</div>
<script>
function f1(x) {
x.style.color = "red";
x.innerHTML = "鼠标悬浮";
}
function f3(x) {
x.style.color = "pink";
x.innerHTML = "鼠标点击";
}
function f2(x) {
x.style.color = "green";
x.innerHTML = "鼠标离开";
}
function f4(x) {
x.style.color = "#FFD026";
x.innerHTML = "鼠标放开"
}
</script>
</body>
</html>
成果展示
<mark>道路很远,还需心向远方。</mark>
上接HTML5、css注册页面,表单校验
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="../myCSS/a.css">
<script>
window.onload = function () {
document.getElementById("form").onsubmit = function () {
// return checkUsername();
};
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
document.getElementById("name").onblur = checkName;
document.getElementById("email").onblur = checkEmail;
document.getElementById("phnumber").onblur =checkPhnumber;
document.getElementById("gender").onblur = checkGender;
document.getElementById("brithdata").onblur = checkBrithdata;
};
function checkUsername() {
var username = document.getElementById("username").value;
var test_username = /^\w{6,12}$/;
var flag = test_username.test(username);
var s_username = document.getElementById("s_username");
if (flag) {
s_username.innerHTML = "<span style='color: #A6A6A6; margin-left: 5px; padding-bottom: 0; font - weight:400;'>√</span>"
} else {
s_username.innerHTML = "<span style='color: red; font-size: small; margin-left: 5px; padding-bottom: 0;'>用户名格式错误</span>"
// s_username.innerHTML = "用户名格式错误";
}
return flag;
}
function checkPassword() {
var password = document.getElementById("password").value;
var test_password = /^\w{6,12}$/;
var flag = test_password.test(password);
var s_password = document.getElementById("s_password");
if (flag) {
s_password.innerHTML = "<span style='color: #A6A6A6; font-size: small; margin-left: 5px; padding-bottom: 0'>√</span>"
} else {
s_password.innerHTML = "<span style='color: red; font-size: small; margin-left: 5px; padding-bottom: 0'>密码格式错误</span>"
// s_password.innerHTML = "用户名格式错误";
}
return flag;
}
/*校验是否中文名称组成 */
function checkName() {
var name = document.getElementById("name").value;
var reg = /^[\u4E00-\u9FA5]{2,4}$/; /*定义验证表达式*/
var flag = reg.test(name); /*进行验证*/
if (flag) {
document.getElementById("s_name").innerHTML = "<span style='color: #A6A6A6; font-size: small; margin-left: 5px; padding-bottom: 0'>√</span>"
} else {
document.getElementById("s_name").innerHTML = "<span style='color: red; font-size: small; margin-left: 5px; padding-bottom: 0'>姓名错误</span>"
}
return flag;
}
function checkEmail() {
var email = document.getElementById("email").value;
var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
var flag = reg.test(email);
if (flag) {
document.getElementById("s_email").innerHTML = "<span style='color: #A6A6A6; font-size: small; margin-left: 5px; padding-bottom: 0'>√</span>"
} else {
document.getElementById("s_email").innerHTML = "<span style='color: red; font-size: small; margin-left: 5px; padding-bottom: 0'>邮箱格式错误</span>"
}
return flag;
}
function checkPhnumber() {
var phnumber = document.getElementById("phnumber").value;
var reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
var flag = reg.test(phnumber);
if (flag) {
document.getElementById("s_phnumber").innerHTML = "<span style='color: #A6A6A6; font-size: small; margin-left: 5px; padding-bottom: 0'>√</span>"
} else {
document.getElementById("s_phnumber").innerHTML = "<span style='color: red; font-size: small; margin-left: 5px; padding-bottom: 0'>手机号格式错误</span>"
}
return flag;
}
function checkGender() {
document.getElementById("s_gender").innerHTML = "<span style='color: #A6A6A6; font-size: small; margin-left: 5px; padding-bottom: 0'>√</span>"
}
function checkBrithdata() {
document.getElementById("s_brithdata").innerHTML = "<span style='color: #A6A6A6; font-size: small; margin-left: 5px; padding-bottom: 0'>√</span>"
}
</script>
<!-- <style>-->
<!-- @import "../CSS/a.css";-->
<!-- </style>-->
</head>
<body id="web_bg" style="background-image: url(https://photo.16pic.com/00/15/98/16pic_1598736_b.jpg);">
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_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"></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"></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="请输入邮箱">
<span id="s_email"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right">
<input type="text" name="name" id="name" placeholder="请输入姓名">
<span id="s_name"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="phnumber">手机号</label></td>
<td class="td_right">
<input type="number" name="phnumber" id="phnumber" placeholder="请输入手机号">
<span id="s_phnumber"></span>
</td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<span id="s_gender"></span>
</td>
</tr>
<tr>
<td class="td_left"><label>生日</label></td>
<td class="td_right">
<input type="date" name="brithdata" id="brithday">
<span id="s_brithdata"></span>
</td>
</tr>
<tr>
<td colspan="2" id="td_sub"><input id="btn_sub" type="submit" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有帐号?<a class="text_submit" href="#">立即登陆</a></p>
</div>
</div>
</body>
</html>
css文件
**css文件** ```css * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
margin: auto;
margin-top: 15px;
}
.rg_left {
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_right {
float: right;
margin: 15px;
}
.rg_right > p a{
color: pink;
}
.rg_center {
float: left;
width: 450px;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username,#phnumber,#passworld,#name,#email,#brithday{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
.rg_form{
padding-top: 50px;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
margin: auto;
}