今日重点
循环
函数
事件
用户登录界面
设置用户名界面
二级联动
学习心得
作为零基础的我今天已经学的有点吃力了，同学和老师都在耐心帮助我，但是我接受的能力不是很强，觉得学的太多，一时间无法接受，继续努力吧。
学习内容
循环（了解）
1.for
let i=0 初始化条件， i=0时 循环开始 初始化条件只走一次 第一次循环开始之前走一次
判断条件 和初始化条件 配合i<10
循环体 重复做什么事情
i++ 循环条件 每次循环体执行完毕 ，让 i产生变化，
for 循环 的 执行步骤
i可以看作一个局部变量 i++ 自增1 i+=2 自增2
循环条件是可以根据实际情况更改的
更改循环条件时，要确保 循环可以向着终点前进去改变，
尽量避免死循环
函数（了解，但是运用不熟练）
parseFloat 整数转化成小数
parseInt 小数转化整数 取整
number 把一个值转换成number类型
string 把其他类型转换成 字符串
charAt 取出指定位置的字符
indexof() 判断指定的字符是否存在，如果存在，返回下标，如果没有，返回-1
lastIndexOf 从后往前找
事件（了解）
就是 我们和html 标签元素发生交互时产生的的行为
on开头
onclick 单击事件
ondblclick 双击事件
onblur 失去焦点 （文本框）
onfocus 获得焦点
onchange 改变
onload 加载
当设置了对应的时间之后，会执行目标函数
用户登录界面（了解，会做了）
<!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("用户名或密码错误") } } </script> </body> </html>
界面（了解）
设置用户名界面（了解）
<!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>
二级联动（了解，还不太会做）
<!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>
