2022-07-12 第六小组顾元皓第四日学习笔记

一.昨日复习：
1.针对一年中某一天，查询这一天是该年的第一天
优化做法：

function getDays(year, month, day) {
            let count = 0;
            switch (month) {
                case 12:
                    count += 30;
                case 11:
                    count += 31;
                case 10:
                    count += 30;
                case 9:
                    count += 31;
                case 8:
                    count += 31;
                case 7:
                    count += 30;
                case 6:
                    count += 31;

                case 5:
                    count += 30;
                case 4:
                    count += 31;
                case 3:
                    count += (isRun(year) ? 29 : 28);
                case 2:
                    count += 31;
                case 1:
                    count += day;


            }
            return count;

        }
        console.log(getDays(2022,12,31));

        function isRun(year) {
            switch (year % 400) {
                case 0:
                    console.log(year + "是闰年");
                    return;

                default:
                    if (year % 4 == 0 && year % 100 != 0) {
                        console.log(year + "是闰年");
                        return;
                    }
                    console.log(year + "不是闰年")

            }

        }

测试结果：
二.今日所学
1.4种循环
1）for循环
案例：

for(let i = 0;i < 10;i++){
            
        }

对于这个循环：1.let i = 0; 初始化条件，当i=0时，循环开始，只走一次，第一次循环开启之前初始化
2.i < 10; 判断条件，会和初始化条件配合循环的执行，决定了循环什么时候停止
3.循环体，循环在重复做什么事情
4.i++ 循环条件，每次循环体执行完毕让i产生变化
注意事项： a. i可以看做是一个局部变量
b. 循环条件是可以根据实际情况更改的
c. 当修改循环条件时，要确保循环可以向着终点前进去改变
d. 我们在开发中，尽量避免死循环
例题1.判断一个数在数组中是否存在，如果存在，返回它的下标，如果不存在，返回-1
当变量的作用域出现了重叠，不要出现重名的情况
尤其是全局和局部，变量最好不好重名

function exists(num,array){
           let index = -1;
           for(let i = 0;i < array.length;i++){
               if(array[i] == num){
                   index = i;
               }
           }
           return index;
       }

       console.log(exists(100,arr));

打印输出数组中的所有元素 console.log(arr[0]);
例题2.找出数组中的最大值，可以用三元，可以用if...else..

let max = arr[0];
        for(let i = 0;i < arr.length;i++){         
            if(max < arr[i]){
                max = arr[i];
            }
        }
        console.log("最大值为：" + max);

2）for in循环
for in语句，能做得事情较少，只能做遍历操作

for(let a in arr){
           console.log(arr[a]);
       }

3）while循环

function hello(){
            let a = 10;
            while(a < 100){
                console.log(a);
                a++;
            }
            return a;
         }

结构： let a = 10; 初始化条件
a < 100 循环判断条件
打印输出循环体
a++ 循环条件
while循环的执行流程：
1.初始化条件
2.判断条件
3.执行循环体
4.自增
while循环与 for循环比较：
while循环：初始化条件不好控制循环条件不好控制写函数时，返回值便于管理
for循环：每个for循环的初始化条件都是隔离的每个for循环的a++都是隔离的
例题：
今年是2022年。今天我们公司有10个人每年公司会以百分之10的比重招人问：哪一年公司人数突破100人。

 function count(){
            let year = 2022;
            let sum = 10;
            while(sum <= 100) {
                sum *= 1.1;
                year++;
            }
            return year + "年人数超过了100人，人数是：" + sum;
        console.log(count());

4）do...while循环
循环： do...while循环
let a 初始化条件
do 做什么事
log 循环体
a > 100 判断条件
a++ 循环条件
do...while和while的区别：
do...while先执行一次，再判断。无论条件是否成立，至少执行一次
while：如果条件不成立，一次都不走
死循环：
for(;😉{}
while(true){}
do{}while(true);
2. 常见JS内置函数
Array：
1.concat()连接
2.join('-')设置分隔符连接数组为一个字符串
3.pop()删除最后一个元素
4.sort()排序，从小到大排序
Global：
1.isNaN()：判断一个值是不是数字
2.parseFloat()：把一个整数转换成小数
3.parseInt()：把一个小数转成整数，取整
4.number()：把一个值转成number类型
5.string()：把其他类型转成字符串110 120 119
String：
1.charAt(1)：取出指定位置的字符
2.indexOf('a')：判断指定的字符是否存在，如果存在返回下标，如果不存在，返回-1
3.lastIndexOf('a')：从后往前找
4.replace('a','b')：替换字符串
5.split('-')：根据-去拆分字符串，得到一个数组
6.substring(1,6)：字符串截取
Math：
1.ceil()向上取整
2.floor()向下取整
3.round()四舍五入
4.random()随机，生成一个0-1的随机数
5.tan() sin cos cot
6.E PI
Date：
1.new Date();获取系统当前日期
2.getDate()：返回日期的日 1~31
3.getHours()：返回时间中的时0~23
4.getMinutes()：返回时间中的分
5.getSeconds()：返回时间中的秒
6.getTime()：获取系统当前时间
7.getYear()：获取年
1.根据id去抓取HTML元素
let div1 = document.getElementById("div1");
console.log(div1);
2.根据class抓取HTML元素，得到的时一堆元素
let divs = document.getElementsByClassName("div1");
console.log(divs[0]);
3.根据tag抓取HTML元素，得到的是一堆元素
let divs = document.getElementsByTagName("div");
console.log(divs[0]);

        新方法
        1.根据选择器去抓取一个元素
        let div = document.querySelector('.div2');
        console.log(div);
        2.根据选择器去抓取全部元素
        let divs = document.querySelectorAll('.div1');
        console.log(divs[0]);

        let div = document.querySelector("div");
        获取元素内部的文本，不会获取到内部的HTML标签
        console.log(div.innerText);
        获取元素内部的所有内容，包括HTML标签
        console.log(div.innerHTML);

        改变元素的内容
        div.innerText = "<h1>我是通过JS来的</h1>";
         div.innerHTML = "<h1>我是JS来的</h1>";
常见事件     onclick：单击事件
            ondblclick：双击事件
            onblur：失去焦点
            onfocus：获得焦点
            onchange：改变
            onload：加载

例题.需求：当用户名admin，密码123456时，提示登录成功！否则，提示用户名或密码错误思路：给按钮添加单击事件当点击按钮时，获取用户名和密码框输入的值，然后进行判断，if()登录成功else用户名或密码错误！
```
function login() {
let username = document.querySelector("#username").value;
let password = document.querySelector("#password").value;
if(username == "admin" && password == "123456"){
alert("登录成功！");
} else {
alert("用户名或密码错误！");
}
}

 例题.在用户名的文本框中输入用户名，
                如果用户名为admin，则在span中显示用户名已被占用否则，显示用户名可用！
  分析: 需要给文本框添加onchange，onblur，出发函数 需要向span中写入内容！innerText innerHTML

三级联动：```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <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" onchange="setQu()">
        <option>---请选择市---</option>

    </select>
    <select id="qu">
        <option>---请选择区---</option>
    </select>
    <script>
        function changeshi() {
            document.querySelector("#shi").innerHTML = "<option>---请选择市---</option>"
        }
        function changequ() {
            document.querySelector("#qu").innerHTML = "<option>---请选择区---</option>"
        }
        function setShi() {
            // changequ();
            let sheng = document.querySelector("#sheng").value;
            let shi = document.querySelector("#shi");
            let html = shi.innerHTML;
            console.log(shi);

            if (sheng == "jl") {
            // document.querySelector("#qu").innerHTML("<option>---请选择区---</option>");
                html = '<option value="cc"> 长春市</option><option value="sp"> 四平市</option>'
                shi.innerHTML = html;

            }
            if (sheng == "ln") {
                // document.querySelector("#qu").innerHTML("<option>---请选择区---</option>");
                html = '<option value="sy"> 沈阳市</option><option value="dl">大连市</option>'
                shi.innerHTML = html;
                
            }
        }
        function setQu() {
            let shi = document.querySelector("#shi").value;
            let qu = document.querySelector("#qu");
            let html = qu.innerHTML;
            console.log(qu);
            if (shi == "cc") {
                
                html = '<option value="cyq"> 朝阳区</option><option value="edq"> 二道区</option><option value="ngq"> 南关区</option>'
                qu.innerHTML = html;
            }
            if (shi == "sp") {
              
                html = '<option value="txq"> 铁西区</option><option value="tdq"> 铁东区</option><option value="lsx"> 梨树县</option>'
                qu.innerHTML = html;
            }
            
            if (shi == "sy") {
                
                html = '<option value="hpq"> 和平区</option><option value="shq"> 沈河区</option><option value="hgq"> 皇姑区</option>'
                qu.innerHTML = html;
            }
            if (shi == "dl") {
               
                html = '<option value="zsq"> 中山区</option><option value="shkq"> 沙河口区</option><option value="jzq"> 金州区</option>'
                qu.innerHTML = html;
            }

        }
    </script>
</body>

</html>