初識javascript
JavaScript：
- 概念：一門客戶端腳本語言
- 運行在客戶端瀏覽器中的。每個瀏覽器都有JavaScript的解析引擎
- 腳本語言：不須要編譯，直接就能夠被瀏覽器解析執行了
- 功能：
- 能夠來加強用戶和html頁面的交互過程，能夠來控制html元素，讓頁面有一些動態的效果，加強用戶的體驗。
- JavaScript發展史：
- 1992年，Nombase公司，開發出第一門客戶端腳本語言，專門用於表單的校驗。命名爲 ： C-- ，後來改名爲：ScriptEase
- 1995年，Netscape(網景)公司，開發了一門客戶端腳本語言：LiveScript。後來，請來SUN公司的專家，修改LiveScript，命名爲JavaScript
- 1996年，微軟抄襲JavaScript開發出JScript語言
- 1997年，ECMA(歐洲計算機制造商協會)，制定出客戶端腳本語言的標準：ECMAScript，就是統一了全部客戶端腳本語言的編碼方式。
- JavaScript = ECMAScript + JavaScript本身特有的東西(BOM+DOM)
ECMAScript：客戶端腳本語言的標準
- 基本語法：
- 與html結合方式
內部JS：javascript
定義<script>，標籤體內容就是js代碼
外部JS：html
定義<script>，經過src屬性引入外部的js文件
- 注意：
1. <script>能夠定義在html頁面的任何地方。可是定義的位置會影響執行順序。 2. <script>能夠定義多個。 - 註釋
- 單行註釋：//註釋內容
- 多行註釋：/註釋內容/
- 數據類型：
- 原始數據類型(基本數據類型)：
- number：數字。 整數/小數/NaN(not a number 一個不是數字的數字類型)
- string：字符串。 字符串 "abc" "a" 'abc'
- boolean: true和false
- null：一個對象爲空的佔位符
- undefined：未定義。若是一個變量沒有給初始化值，則會被默認賦值爲undefined
- 引用數據類型：對象
- 原始數據類型(基本數據類型)：
- 變量
- 變量：一小塊存儲數據的內存空間
- Java語言是強類型語言，而JavaScript是弱類型語言。
- 強類型：在開闢變量存儲空間時，定義了空間未來存儲的數據的數據類型。只能存儲固定類型的數據
- 弱類型：在開闢變量存儲空間時，不定義空間未來的存儲數據類型，能夠存聽任意類型的數據。
- 語法：
- var 變量名 = 初始化值;
- typeof運算符：獲取變量的類型。
- 注：null運算後獲得的是object
- 運算符
- 一元運算符：只有一個運算數的運算符
++，-- ， +(正號)- ++ --: 自增(自減)
- ++(--) 在前，先自增(自減)，再運算
- ++(--) 在後，先運算，再自增(自減)
- +(-)：正負號
- 注意：在JS中，若是運算數不是運算符所要求的類型，那麼js引擎會自動的將運算數進行類型轉換
- 其餘類型轉number：
- string轉number：按照字面值轉換。若是字面值不是數字，則轉爲NaN（不是數字的數字）
- boolean轉number：true轉爲1，false轉爲0
- 其餘類型轉number：
- ++ --: 自增(自減)
算數運算符java
+,-,*,/,% ...正則表達式
賦值運算符數組
= += -+....瀏覽器
比較運算符app
< >= <= == ===(全等於)dom
- 比較方式
- 類型相同：直接比較
- 字符串：按照字典順序比較。按位逐一比較，直到得出大小爲止。
- 類型不一樣：先進行類型轉換，再比較
- ===：全等於。在比較以前，先判斷類型，若是類型不同，則直接返回false
- 類型相同：直接比較
- 比較方式
- 邏輯運算符
&& || !- 其餘類型轉boolean：
- number：0或NaN爲假，其餘爲真
- string：除了空字符串("")，其餘都是true
- null與undefined（變量未指向）:都是false
- 對象：全部對象都爲true
- 其餘類型轉boolean：
三元運算符
var c = a > b ? 1:0;
? : 表達式
var a = 3;
var b = 4;ecmascript- 語法：
- 表達式? 值1:值2;
- 判斷表達式的值，若是是true則取值1，若是是false則取值2；
- 語法：
- 一元運算符：只有一個運算數的運算符
- 流程控制語句：
- if...else...
- switch:
- 在java中，switch語句能夠接受的數據類型： byte int shor char,枚舉(1.5) ,String(1.7)
- switch(變量):
case 值:
- switch(變量):
- 在JS中,switch語句能夠接受任意的原始數據類型
- 在java中，switch語句能夠接受的數據類型： byte int shor char,枚舉(1.5) ,String(1.7)
- while
- do...while
- for
- JS特殊語法：
- 語句以;結尾，若是一行只有一條語句則 ;能夠省略 (不建議)
- 變量的定義使用var關鍵字，也能夠不使用
- 用： 定義的變量是局部變量
- 不用：定義的變量是全局變量(不建議)
- 練習：99乘法表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>99乘法表</title> <style> td{ border: 1px solid; } </style> <script> document.write("<table align='center'>"); //1.完成基本的for循環嵌套，展現乘法表 for (var i = 1; i <= 9 ; i++) { document.write("<tr>"); for (var j = 1; j <=i ; j++) { document.write("<td>"); //輸出 1 * 1 = 1 document.write(i + " * " + j + " = " + ( i*j) +" "); document.write("</td>"); } /*//輸出換行 document.write("<br>");*/ document.write("</tr>"); } //2.完成表格嵌套 document.write("</table>"); </script> </head> <body> </body> </html> - 與html結合方式
- 基本對象：
- Function：函數(方法)對象
- 建立：
- var fun = new Function(形式參數列表,方法體); //忘掉吧
- function 方法名稱(形式參數列表){
方法體
} - var 方法名 = function(形式參數列表){
方法體
}
- 方法：
- 屬性：
length:表明形參的個數 - 特色：
- 方法定義是，形參的類型不用寫,返回值類型也不寫。
- 方法是一個對象，若是定義名稱相同的方法，會覆蓋
- 在JS中，方法的調用只與方法的名稱有關，和參數列表無關
- 在方法聲明中有一個隱藏的內置對象（數組）
- arguments,封裝全部的實際參數
- 調用：
方法名稱(實際參數列表);
- 建立：
- Array:數組對象
- 建立：
- var arr = new Array(元素列表);
- var arr = new Array(默認長度);
- var arr = [元素列表];
- 方法
join(字符串型的分隔符參數):將數組中的元素按照指定的分隔符拼接爲字符串
push() 向數組的末尾添加一個或更多元素，並返回新的長度。 - 屬性
length:數組的長度 - 特色：
- JS中，數組元素的類型可變的。
- JS中，數組長度可變的。
- 建立：
- Boolean
- Date：日期對象
- 建立：
var date = new Date(); - 方法：
toLocaleString()：返回當前date對象對應的時間本地字符串格式
getTime():獲取毫秒值。返回當前如期對象描述的時間到1970年1月1日零點的毫秒值差
- 建立：
- Math：數學對象
- 建立：
- 特色：Math對象不用建立，直接使用。 Math.方法名();
- 方法：
random():返回 0 ~ 1 之間的隨機數。 含0不含1[0,1)
ceil(x)：向上取整
floor(x)：向下取整
round(x)：把數四捨五入爲最接近的整數。 - 屬性：
PI
- 建立：
- Number
- String
- 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次 - 通常使用正則表達式會使用開始結束符號
- ^:開始
- $:結束
- 單個字符:[]
- 正則對象：
- 兩張方法建立
- var reg = new RegExp("正則表達式，eg：^\w{6,12}$");
- var reg = /正則表達式,eg:^\w{6,12}$/;兩根反斜槓防止轉義
- 方法
- test(字符串變量的參數):驗證指定的字符串是否符合正則定義的規範，由正則對象調用，返回值爲boolean
- test(字符串變量的參數):驗證指定的字符串是否符合正則定義的規範，由正則對象調用，返回值爲boolean
- 兩張方法建立
- 正則表達式：定義字符串的組成規則。
- Global
- 特色：全局對象，這個Global中封裝的方法不須要對象就能夠直接調用。 方法名();
- 方法：
encodeURI():url編碼
decodeURI():url解碼
encodeURIComponent():url編碼,編碼的字符更多
decodeURIComponent():url解碼
parseInt():將字符串轉爲數字
* 逐一判斷每個字符是不是數字，直到不是數字爲止，將前邊數字部分轉爲number
isNaN():判斷一個值是不是NaN
* NaN六親不認，連本身都不認。NaN參與的==比較所有爲false，特用此方法
eval(解析的js代碼):將 JavaScript 字符串，並把它做爲腳本代碼來執行。
- Function：函數(方法)對象
BOM
- 概念：Browser Object Model 瀏覽器對象模型
- 將瀏覽器的各個組成部分封裝成對象。
- 組成：
- Window：窗口對象
- Navigator：瀏覽器對象
- Screen：顯示器屏幕對象
- History：歷史記錄對象
- Location：地址欄對象
- Window：窗口對象
- 建立
- 方法
- 與彈出框有關的方法：
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
* 若是用戶點擊肯定按鈕，則方法返回true
* 若是用戶點擊取消按鈕，則方法返回false
prompt() 顯示可提示用戶輸入的對話框。
* 返回值：獲取用戶輸入的值 - 與打開關閉有關的方法：
close() 關閉瀏覽器窗口。
* 誰調用我 ，我關誰
open() 打開一個新的瀏覽器窗口
* 返回新的Window對象 與定時器有關的方式
setTimeout() 在指定的毫秒數後調用函數或計算表達式。
* 參數：
1. js代碼(字符串)或者方法對象(fun)
2. 毫秒值
* 返回值：惟一標識，用於取消定時器
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。函數setInterval() 按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
- 與彈出框有關的方法：
- 屬性：
- 獲取其餘BOM對象：
history
location
Navigator
Screen: - 獲取DOM對象
document
- 獲取其餘BOM對象：
- 特色
- Window對象不須要建立能夠直接使用 window使用。 window.方法名();
- window引用能夠省略。 方法名();
- Location：地址欄對象
- 建立(獲取)：
- window.location
- location
- 方法：
- reload() 從新加載當前文檔。刷新
- 屬性
- href 設置或返回完整的 URL。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自動跳轉</title> <style> p { text-align: center; } #time { color: red; } </style> </head> <body> <p> <span id="time">5</span> 秒以後，自動跳轉到首頁... </p> <script> var time = document.getElementById("time"); var second = 5; function show() { second--; if (second <= 0) { location.href="https://www.baidu.com"; } time.innerHTML = second + ""; } setInterval(show, 1000); </script> </body> </html> - 建立(獲取)：
- History：歷史記錄對象
- 建立(獲取)：
- window.history
- history
- 方法：
- back() 加載 history 列表中的前一個 URL。
- forward() 加載 history 列表中的下一個 URL。
- go(參數) 加載 history 列表中的某個具體頁面。
- 參數：
- 正數：前進幾個歷史記錄
- 負數：後退幾個歷史記錄
- 參數：
- 屬性：
- length 返回當前窗口歷史列表中的 URL 數量。
- 建立(獲取)：
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：文檔對象
- 建立(獲取)：在html dom模型中可使用window對象來獲取
- window.document
- document
- 方法：
- 獲取Element對象：
- getElementById() ： 根據id屬性值獲取元素對象。id屬性值通常惟一
- getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
- getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組
- getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組
- 建立其餘DOM對象：
createAttribute(name)
createComment()
createElement()
createTextNode()
- 獲取Element對象：
- 建立(獲取)：在html dom模型中可使用window對象來獲取
- Element：元素對象
- 獲取/建立：經過document來獲取和建立
- 方法：
- removeAttribute()：刪除屬性
- setAttribute()：設置屬性
- Node：節點對象，其餘5個的父對象
- 特色：全部dom對象均可以被認爲是一個節點
- 方法：
- CRUD dom樹：
- appendChild()：向節點的子節點列表的結尾添加新的子節點。
- removeChild() ：刪除（並返回）當前節點的指定子節點。
- replaceChild()：用新節點替換一個子節點。
- CRUD dom樹：
- 屬性：
- parentNode 返回節點的父節點。
- Document：文檔對象
- HTML DOM
1. 標籤體的設置和獲取：innerHTML
2. 使用html元素對象的屬性
3. 控制元素樣式
1. 使用元素的style屬性來設置
如：
//修改樣式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. 提早定義好類選擇器的樣式，經過元素的className屬性來設置其class屬性值。
事件簡單學習
- 功能： 某些組件被執行了某些操做後，觸發某些代碼的執行。
- 造句： xxx被xxx,我就xxx
- 我方水晶被摧毀後，我就責備對友。
- 敵方水晶被摧毀後，我就誇獎本身。
- 造句： xxx被xxx,我就xxx
- 如何綁定事件
- 直接在html標籤上，指定事件的屬性(操做)，屬性值就是js代碼
- 事件：onclick--- 單擊事件
- 經過js獲取元素對象，指定事件屬性，設置一個函數
- 代碼：
<body> <!-- onclick在屬性值裏耦合度高 --> <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> - 直接在html標籤上，指定事件的屬性(操做)，屬性值就是js代碼
- 案例1：電燈開關
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電燈開關</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
/*
分析：
1.獲取圖片對象
2.綁定單擊事件
3.每次點擊切換圖片
* 規則：
* 若是燈是開的 on,切換圖片爲 off
* 若是燈是關的 off,切換圖片爲 on
* 使用標記flag來完成
*/
//1.獲取圖片對象
var light = document.getElementById("light");
var flag = false;//表明燈是滅的。 off圖片
//2.綁定單擊事件
light.onclick = function(){
if(flag){//判斷若是燈是開的，則滅掉
light.src = "img/off.gif";
flag = false;
}else{
//若是燈是滅的，則打開
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
事件監聽機制：
- 概念：某些組件被執行了某些操做後，觸發某些代碼的執行。
- 事件：某些操做。如： 單擊，雙擊，鍵盤按下了，鼠標移動了
- 事件源：組件。如： 按鈕 文本輸入框...
- 監聽器：代碼。
- 註冊監聽：將事件，事件源，監聽器結合在一塊兒。 當事件源上發生了某個事件，則觸發執行某個監聽器代碼。
- 常見的事件：
- 點擊事件：
- onclick：單擊事件
- ondblclick：雙擊事件
- 焦點事件
- onblur：失去焦點，用於表單校驗
- onfocus:元素得到焦點。
- 加載事件：
- onload：一張頁面或一幅圖像完成加載。
- 鼠標事件：
- onmousedown 鼠標按鈕被按下。
- 定義方法是，定義一個形參接受對象，obj.button;0爲左鍵2爲右鍵1爲滾輪鍵
- onmouseup 鼠標按鍵被鬆開。
- onmousemove 鼠標被移動。
- onmouseover 鼠標移到某元素之上。
- onmouseout 鼠標從某元素移開。
- onmousedown 鼠標按鈕被按下。
- 鍵盤事件：
- onkeydown 某個鍵盤按鍵被按下。回車提交表單
- onkeyup 某個鍵盤按鍵被鬆開。
- onkeypress 某個鍵盤按鍵被按下並鬆開。
- onkeydown 某個鍵盤按鍵被按下。回車提交表單
- 選擇和改變
- onchange 域的內容被改變。用於下拉頁表
- onselect 文本被選中。
- 表單事件：
- onsubmit 確認按鈕被點擊。提交校驗，阻止表單提交，return false;
- 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>
相關文章
- 1. javascript[1] — 初識 javascript
- 2. 初識JavaScript
- 3. 初識JavaScript Promises
- 4. JavaScript初識(三)
- 5. 初識JavaScript(一)
- 6. JavaScript初識
- 7. 初識Javascript（1）
- 8. 初識javascript
- 9. 初識Javascript
- 10. javascript初識
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • 適用於PHP初學者的學習線路和建議
- • YAML 入門教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. javascript[1] — 初識 javascript
- 2. 初識JavaScript
- 3. 初識JavaScript Promises
- 4. JavaScript初識(三)
- 5. 初識JavaScript(一)
- 6. JavaScript初識
- 7. 初識Javascript（1）
- 8. 初識javascript
- 9. 初識Javascript
- 10. javascript初識