2022-07-12 第五小组 孔海波 学习笔记

今日学习情况：理解
心情：80%（愉悦）
今日学习重点：
1.循环

for循环

for(let i = 0; i < 5; i++){
  console.log(i)
}

let i = 1 表示初始化条件、i < 5 表示判断条件、i++ 表示循环条件、{console.log(i);}表示循环体

`实例1：求数组的最大值和最小值

arr = [61, 92, -8, 96, 33.2, -805, 122, 77, 5, 0, -991]
let max = arr[0]
let min = arr[0]
for(i = 1; i < arr.length; i++){
  max = max > arr[i] ? max : arr[i]
  if(min > arr[i])
    min = arr[i]
}
console.log("arr数组最大值是" + max + "，最小值是" + min)

实例2：判断一个数数组是否存在，有返回下标，无返回-1

let arr = [61, 92, -8, 96, 33.2, -8005, 122, 77, 5, 0, -9999991]`
let num = -9
for(i = 0; i < arr.length; i++){
  if(num === arr[i]){
  console.log(num + "存在数组中,他的下标是" + i);
  break
  }            
  if(i === arr.length - 1)
    console.log(-1)
  }
}

实例2我们还可以通过自定义函数的方法实现

for in循环
    for in 只能做遍历循环

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

i的值是数组 arr 的下标赋值给 i

while 和 do while 循环
    相较于for循环，whlie(do...while)初始化条件和循环条件不好控制。当在函数中，while返回值好处理

while(条件表达式){
  循环体
  循环条件
}

do{
  循环体
  循环条件
}while(条件表达式)

do...while是先执行一次再判断
实例3：2022年公司10个人，每年招人比重10%，那年公司人数突破100人？

function getyAndp(first, last){
  year = 2022
  people = first
  while(people < last){
    people *= 1.1
    year++
  }
return "公司到" + year + "年人数突破100人,人数是：" + people
}
console.log(getyAndp(10, 100))

此实例中return返回的是一个字符串，函数返回多个值时还可以通过数组返回。

2.在JavaScript中抓取html元素

根据id抓取html元素

let div1 = document.getElementById('div1')

根据class抓取HTML元素

let divs = document.getElementsByClassName('div1')

注意：由于class并不唯一，所以抓取的元素可能有很多，所以divs是数组形式

根据标签抓取HTML元素

l`et divs = document.getElementsByTagName('div')

根据选择器去选择一个元素

let div = document.querySelector("#div1")

根据选择器去选择全部元素

let div2 = document.querySelectorAll('div')

JavaScript实现交互
标签中事件使用script中的函数，例子如下：

<body>
    <button class="button" type="button" onclick ="jump()">按钮</button>
    <input type="text" onblur="fo()">
    <script >
        //点击按钮，弹出弹窗
        function jump(){
            alert("鸡你太美")
        }
        function fo(){
            alert("鸡你太太美")
        }

        /**
         * onclick 单击事件
         * ondbclick 双击事件
         * onblur 失去焦点
         * onfocus 获得焦点
         * onchange 改变
         * onload 加载
         * onscroll 鼠标滚动
         * 
         */

    </script>

实例4： admin 123456 *登录成功，用户名或密码错误 *单击按钮时，获取账号密码

<body>
    <p>
        账号：<input type="text" id="username">
    </p>
    <p >
        密码：<input type="password" id="password">
    </p>
    <p id="ppp">
        <button class="a" onmouseenter="pao()" onclick="login()">登录</button>
    </p>
    
    <script>
       function login(){
        let admin = document.querySelector('#username')
        let password = document.querySelector('#password')
        if(admin.value === 'admin' && password.value === '123456')
            alert("登录成功")
        else
            alert("用户名或密码错误")
       }
    </script>
</body>

实例5：追不上的的按钮,当鼠标移动到按钮，按钮就会移动到另一个地方

    <p id="ppp">
        <button class="a" onmouseenter="pao()" onclick="login()">登录</button>
    </p>
    
    <script>
       function pao(){
        let admin = document.querySelector('#ppp')
        admin.innerHTML = "<button onmouseenter='hui()' id='ppp' class='b' onclick='login()'>登录</button>"
       }
       function hui(){
        let admin = document.querySelector('#ppp')
        admin.innerHTML = "<button class='a' onmousemove='pao()' onclick='login()'>登录</button>"
       }
posted @ 2022-07-12 18:37  五笔输入法  阅读(35)  评论(0)    收藏  举报