其他分享
首页 > 其他分享> > 2022-7-12学习 第七组 刘昀航

2022-7-12学习 第七组 刘昀航

作者:互联网

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

@

目录


2022-7-12学习 第七组 刘昀航

前情提要

  1. switch..case的效率问题case的后面是字面量(常量)
  2. 不要强行使用Switch
  3. 函数命名规则:小驼峰式

一、for循环

for循环的执行步骤:

        1.let i = 0;初始化条件,当i = 0时,循环开始
        2.i<10;判断条件,会和初始化条件配合循环的执行
        3.循环体,循环在做什么事
        4.i++ 循环条件,每次循环体执行完毕让i产生了变化
for (let i = 0; i < 10; i++) {
            console.log(i)           
        }

练习:

         找出数组的最大值:
        for (let i = 0; i < arr.length; i++) {
            if(arr[i]>max){
                max = arr[i]
            }
        }
        console.log(max)
        
判断一个数在数组中是否存在,如果存在返回他的下标,如果不存在,返回-1
		 function ishave(num, arr) {
        let index = -1;
        for (let i = 0; i < arr.length; i++) {
            if (num == arr[i]) {
                index = i
            }
        }
        return index;

    }

二、for in循环

1.for in语句,能做的事情很少,只能做遍历操作
2.可以为a是arr数组的下标通过映射给a
代码如下(示例):

		let arr = [1,2,3,4,5]
        
        for (const key in arr) {
            console.log(key)
        }

三、while 和 do...while循环

1.while

		1.初始化条件
        2.判断条件
        3.执行循环体
        4.自增

代码如下(示例):

		let a = 0;
        while(a<100){
            a++;    
            console.log('哈哈哈')
        }

练习:

问题:公司有10个人,每年增10%,哪一年突破100人,今年2022年
  let people = 10;
			    let year = 0;
			    while(people<101){
			        people = people*1.1 
			        year++;
			    }
			    console.log(2022+year+'年突破100人')

do... while

do{
        console.log(a);
        a++;
    }while(a<100);

``


四、内置函数

 Array:
            1.concat()连接
            2.join()设置分隔符连接数组为一个字符串
            3.删除最后一个元素
            4.pop()删除最后一个元素
            5.sort()排序,从小到大排序
    Global:
            1.isNaN():判断一个值是不是数字
            2.parseFloat():把一个整数转化为小数
            3.parsetInt():把一个小数转化为整数(去掉小数点)
            4.number():把一个值转成number类型
            5.string():把其他类型转换为字符串
    String:
            1.charAt():取出指定位置的字符
            2.判断指定的字符是否存在,如果存在返回下标
            3.lastIndexOf('a'):从后往前找
            4.replace('a','b'):把一个值转成number类型
            5.split('-')根据-去拆分字符串,得到一个数组
            6.substring(1,6):字符串截取
    Math:
            1.ceil():向上取整
            2.floor():向下取整
            3.round():四舍五入
            4.ramdom()随机:生成一个0-1的随机数
    Date:
            1.new Date();获取系统当前时间
            2.getDate():返回日期的日
            3.getHours():返回时间中的2-23
            4.getMinutes():返回时间中的分
            5.getSeconds():返回时间的秒

五、抓取html元素的方法

六、事件

事件就是我们和html标签元素发生交互时产生的

练习:

1.模仿登录案例

<p>用户名:<input  type="text" id="username"></p>
    <p>密码:<input type="password" id="password"></p>
    <p><input type="button" onclick="yanzheng()" value="登录"></p>
	
    <script>
       function yanzheng(){
           let username = document.getElementById('username').value
           let password = document.getElementById('password').value
           if(username == 'admin'&& password ==123456){
                alert('登录成功!')
           }
           alert('登录失败!')
        }
    </script>

2.校验用户

用户名:<input type="text" id="username" onblur="tishi()">
<span id="aaa"></span>

<script>
    function tishi(){
        let username = document.getElementById('username').value;
        let span1 = document.getElementById('aaa')
        if(username == 'admin'){
            span1.innerText = "该用户已存在!"
        }else{
          span1.innerText ="该用户可用"  
        }      
    }
</script>

3.三级联动

<body>
    <select id="sheng" onchange="setShi()">
        <option value="">---请选择省---</option>
        <option value="jl">吉林省</option>
        <option value="ln">辽宁省</option>


    </select>

    <select id="shi" onchange="setQu()">
        <option value="">---请选择市---</option>
    </select>

    <select id="qu">
        <option value="">---请选择区---</option>

    </select>

    <script>
        function setShi() {
            let sheng = document.getElementById('sheng').value;
            let shi = document.getElementById('shi');
            let qu = document.getElementById('qu');
            let html = shi.innerHTML;
            if (sheng == 'jl') {
                html = '<option value="cc">长春市</option><option value="sp">四平市</option>';
                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
                shi.innerHTML = html;
            }
            if (sheng == 'ln') {
                html = '<option value="sy">沈阳市</option><option value="dl">大连市</option>';
                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
                shi.innerHTML = html;
            }
            qu.innerHTML="<option >--待选择--</option>"
            
        }

        function setQu() {
            let shi = document.getElementById('shi').value;
            let qu = document.getElementById('qu');
            let html = qu.innerHTML;

            if (shi == 'cc') {
                html = '<option value="sy">双阳区</option><option value="jy">净月区</option>';
                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
                qu.innerHTML = html;
            }
            if (shi == 'sp') {
                html = '<option value="yt">伊通满族自治县</option><option value="td">铁东区</option>';
                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
                qu.innerHTML = html;
            }
            if (shi == 'sy') {
                html = '<option value="hu">皇姑区</option><option value="sjt">苏家屯区</option>';
                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
                qu.innerHTML = html;
            }
            if (shi == 'dl') {
                html = '<option value="zx">中山区</option><option value="xg">西岗区</option>';
                // 把拼接好的下拉菜单选项通过innerHTML放回到下拉菜单
                qu.innerHTML = html;
            }

        }
    </script>
</body>

标签:12,qu,innerHTML,刘昀航,html,let,2022,shi,下拉菜单
来源: https://www.cnblogs.com/beibei725/p/16471844.html