今日重點(diǎn)
循環(huán)
函數(shù)
事件
用戶登錄界面
設(shè)置用戶名界面
二級聯(lián)動(dòng)
學(xué)習(xí)心得
作為零基礎(chǔ)的我今天已經(jīng)學(xué)的有點(diǎn)吃力了，同學(xué)和老師都在耐心幫助我，但是我接受的能力不是很強(qiáng)，覺得學(xué)的太多，一時(shí)間無法接受，繼續(xù)努力吧。
學(xué)習(xí)內(nèi)容
循環(huán)（了解）
1.for
let i=0 初始化條件， i=0時(shí) 循環(huán)開始 初始化條件只走一次 第一次循環(huán)開始之前走一次
判斷條件 和初始化條件 配合i<10
循環(huán)體 重復(fù)做什么事情
i++ 循環(huán)條件 每次循環(huán)體執(zhí)行完畢 ，讓 i產(chǎn)生變化，
for 循環(huán) 的 執(zhí)行步驟
i可以看作一個(gè)局部變量 i++ 自增1 i+=2 自增2
循環(huán)條件是可以根據(jù)實(shí)際情況更改的
更改循環(huán)條件時(shí)，要確保 循環(huán)可以向著終點(diǎn)前進(jìn)去改變，
盡量避免死循環(huán)
函數(shù)（了解，但是運(yùn)用不熟練）
parseFloat 整數(shù)轉(zhuǎn)化成小數(shù)
parseInt 小數(shù)轉(zhuǎn)化整數(shù) 取整
number 把一個(gè)值轉(zhuǎn)換成number類型
string 把其他類型轉(zhuǎn)換成 字符串
charAt 取出指定位置的字符
indexof() 判斷指定的字符是否存在，如果存在，返回下標(biāo)，如果沒有，返回-1
lastIndexOf 從后往前找
事件（了解）
就是 我們和html 標(biāo)簽元素發(fā)生交互時(shí)產(chǎn)生的的行為
on開頭
onclick 單擊事件
ondblclick 雙擊事件
onblur 失去焦點(diǎn) （文本框）
onfocus 獲得焦點(diǎn)
onchange 改變
onload 加載
當(dāng)設(shè)置了對應(yīng)的時(shí)間之后，會(huì)執(zhí)行目標(biāo)函數(shù)
用戶登錄界面（了解，會(huì)做了）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p> 賬號：<input type="text" id="username"> </p> <p> 密碼：<input type="password" id="password"> </p> <p> <input type="button" value="登錄" onclick="login()"> </p> <script> function login (){ let username = document.querySelector("#username").value; let password = document.querySelector("#password").value; if(username=="admin" && password=="123456"){ alert("登錄成功") } else{ alert("用戶名或密碼錯(cuò)誤") } } </script> </body> </html>
界面（了解）
設(shè)置用戶名界面（了解）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
用戶名：<input type="text" id="username" onblur="login()">
<span></span>
<script>
function login() {
let username = document.querySelector("#username").value;
let span= document.querySelector("span");
if (username == "admin") {
span.innerText = "用戶名已被占用!";
}
else {
span.innerText = "用戶名可用！";
}
}
</script>
</body><div class=""></div>
</html>
二級聯(lián)動(dòng)（了解，還不太會(huì)做）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <select id="sheng" onchange="setShi()"> <option>---請選擇省---</option> <option value="jl">吉林省</option> <option value="ln">遼寧省</option> </select> <select id="shi"> <option>---請選擇市---</option> <!-- <option value="cc">長春市</option> <option value="sp">四平市</option> <option value="sy">沈陽市</option> <option value="dl">大連市</option> --> </select> <script> function setShi() { let sheng = document.querySelector("#sheng").value; console.log(sheng); let shi = document.querySelector("#shi"); let html = shi.innerHTML; if (sheng == 'jl') { html += "<option value='cc'>長春市</option><option value='sp'>四平市</option>"; shi.innerHTML = html; } if (sheng == 'ln') { html += "<option value='sy'>沈陽市</option><option value='dl'>大連市</option>"; shi.innerHTML = html; } } </script> </body> </html>
浙公網(wǎng)安備 33010602011771號