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;
}
京公网安备 11010502036488号