web第六天笔记

函数

      函数必须进行调用才会执行，函数要有返回值，一定要添加return关键字，否则返回值为underfined

      arguments 接受所有实参，并保存到arguments数组里

      函数表达式，立即执行函数(function () { console.log('liqingyu') })()

值传递、引用传递

      

    <script>
        // 值传递
        let a = 10
        let b = 20
        function change(x, y) {
            x = 30;
            y = 50;
        }
        change(a, b);
        alert(a + "--" + b)


        let arr = [1, 3, 4, 5]
        // 引用传递    传地址，发生改变
        function change2(a) {
            a.push(1000)
        }
        change2(arr)
        alert(arr)
    </script>

箭头函数

    <script>
        setInterval(() => {
            console.log('i hate you')
        }, 1000)
    </script>

递归

   <script>
        // 9!  
        function jiecheng(n) {
            if (n === 1) {
                return 1
            } else {
                return n * jiecheng(n - 1)
            }
        }
        let a = jiecheng(10086)
        alert(a)

        // 练习：递归求1~n的和
        // 100+1~99的和 
        function he(n) {
            if (n == 1) {
                return 1
            } else {
                return n + he(n - 1)
            }
        }

        alert(he(5))
    </script>

对象:无序的数据集合

        let obj = {
            uname: '小明',
            age: 21,
            gender: 'nan'
        }

查找对象元素        

         console.log(obj.uname)

         console.log(obj['age'])

对象的增删改查

    <script>
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        // obj.uname
        // obj['age']
        // 改：对象.属性名
        obj.uname = 'GGBond'
        // 增加  对象.新属性名
        obj.sing = function () {
            console.log('sing~')
        }
        // delete 对象.属性名
        delete obj.gender
        console.log(obj)
    </script>

对象的遍历

    <script>
        let obj = {
            uname: '小明',
            age: 21,
            gender: 'nan'
        }
        for (let k in obj) {
            console.log(k)
            console.log(obj[k])
        }
    </script>

数组对象

    <script>
        let arrObj =
            [
                {
                    uname: 'zs',
                    age: 21
                },
                {
                    uname: 'jiangjia',
                    age: 33
                },
                {
                    uname: 'lisi',
                    age: 12
                }
            ]
        console.log(arrObj)
        // arrObj[1]['uname']
        for (let i = 0; i < arrObj.length; i++) {
            for (let k in arrObj[i]) {
                console.log(arrObj[i][k])
            }
        }
    </script>

Math内置对象

        console.log(Math.E)
        console.log(Math.PI)
        // Math.ceil向上取整
        console.log(Math.ceil(3.1415))
        // Math.floor向下取整
        console.log(Math.floor(3.1415))
        // Math.abs   绝对值
        console.log(Math.abs(-3.12))
        // pow 
        console.log(Math.pow(3.12, 10))
        // 开平方根
        console.log(Math.sqrt(9))
        // 随机数  
        // console.log(Math.floor(Math.random() * 11) + 2)
        let random = Math.floor(Math.random() * (10 - 2 + 1)) + 2 //取二到十的整数
        console.log(random)

日期内置对象

        let date = new Date()
        // alert(date)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hh = date.getHours()
        let mm = date.getMinutes()
        let ss = date.getSeconds()

        let gg = date.getDay()
        alert(gg)

        document.write(`${year}年-${month}月-${day}日 ${hh}:${mm}:${ss}`)


        let a = 3.234364
        alert(a.toFixed(4))

获取元素的方法

1.通过css选择器获取

    <div>盒子</div>
    <ul>
        <li>1</li>
        <li class="two">2</li>
        <li>3</li>
        <li id="four">4</li>
    </ul>

    const li2 = document.querySelector('.two')
    console.log(li2)

2.document.querySelectorAll将所有匹配的元素全部获取到，并存放到伪数组

const lis = document.querySelectorAll('li')
console.log(lis)
for (let i = 0; i < lis.length; i++) {
     console.log(lis[i])
}

const li3 = document.querySelector('ul li:nth-child(3)')
console.log(li3)

修改元素内容

    <div class="one">我是一个即将被更改的盒子</div>
    <div class="two">我是一个即将被更改的盒子</div>
    <script>
        // 1、获取元素
        const box1 = document.querySelector('.one')
        const box2 = document.querySelector('.two')
        console.log(box1)
        console.log(box2)
        // 2、操作
        box1.innerText = `<h1>111111</h1>`
        box2.innerHTML = `<h1>2222222</h1>`

    </script>

修改元素属性

 <img src="../images/1.webp" alt="刘德华" title="刘德华">
 <input type="text" placeholder="wedjed" readonly>
 <button disabled>同意该协议</button>
    <script>
        // 1、获取元素
        const img = document.querySelector('img')
        const ipt = document.querySelector('input')
        const btn = document.querySelector('button')
        // 改元素属性   对象.属性=值
        img.src = "../images/2.webp"
        img.title = "我是个大帅哥"

        ipt.type = "password"
        ipt.placeholder = "请输入用户名"
        ipt.readOnly = false
        btn.disabled = false

修改元素样式属性

 <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: rgb(207, 39, 67);
            font-size: 50px;
        }
  </style>

<div class="box1">1111</div>
    <div class="box2 box1"></div>
    <script>
        // 1、获取元素
        const box2 = document.querySelector('.box2')
        const div = document.querySelector('.box1')
        // 2、通过style修改样式
        div.style.width = '500px'
        div.style.fontSize = '16px'
        div.style.backgroundColor = 'pink'
        // 3、通过添加类名 calssName会将原来的类名删除掉，不建议使用

        // box2.className = 'box1'

        // classlist.add（'类名'）追加
        box2.classList.add('box1')
        // box2.classList.remove('box1')    移除
        box2.classList.toggle('box1')        //切换：有则删除，没有则添加
</script>

定时器

// setTimeout\setInterval   定时器
// setTimeout  :某段代码或者函数在多久后执行

// setInterval  间隔一段时间，将代码或者函数执行一次