web--06

函数

<script>
        //定义函数
        function sayHi() {
            console.log('hello,function!')
        }

        // 函数必须进行调用，才会执行;
        // 调用函数时的形参没有数量限制,当有多个形参时使用 , 分隔;
        // 调用函数传递的实参与形参的顺序一致;
        sayHi()
        let age = 21

        // 函数要有返回值，一定要添加return关键字，否则返回值为undefined
        function getSum() {
            console.log(a + b)
            return a + b
            arguments  接收所有实参，并保存到arguements数组里
            console.log(arguments)
            let sum = 0
            console.log(age)
            for (let i in arguments) {
                sum += arguments[i]
            }
            return sum
        }
        let e = getSum(3, 4, 3, 4, 65, 7, 44, 5, 6, 7, 5)

        console.log(e)

    </script>

匿名函数

<script>
        function sayHi(fn) {
            fn()
            console.log('nihao')
         }
        function () {
            console.log('jiangjia')
        }
        sayHi(sayHello)


        function sayHi()

        setInterval(function () {
            console.log('你真傻')
        }, 1000)--时间的单位是ms
    </script>

函数表达式

<script>
         let a = function getSum() {
             console.log('jiangjia')
         }
         a()

        // 立即执行函数--常用于外部js.
        (function () { console.log('liqingyu') })()
    </script>

值传递,引用传递

<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>
        //注意区分大小写,写在形参的尾部
        function getCir(r, PI = 3.14) {
            return PI * r * r
        }
        let a = getCir(3)
        console.log(a)
    </script>

箭头函数

 <script>
         setInterval(function () {console.log('i love you')}, 1000)
相当于
         setInterval(() => {console.log('i hate you')}, 1000)
 </script>

递归

<script>
        // 9!  
        // 9*8! 递归是将问题持续分解到最小化
        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>

数组遍历

<script>
        let arr = ['a', 2, 3, 4, 5, 6]
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i])
        }
</script>

字符串的常见方法

    <script>
        let str = '你是who'
        //分割元素
        console.log(str.split('w'))
        //从第二个元素截取到第四个元素
        console.log(str.substring(2, 4))
        //判断数组从哪个元素开始
        console.log(str.startsWith('你'))
        //判断到哪结束
        console.log(str.endsWith('你'))
        //判断是否包含该元素
        console.log(str.includes('w'))
</script>

对象

 <script>
        // let arr = [160, 160]
        // 对象：无序的数据集合
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }

        // 查找对象元素
        console.log(obj.uname)
        console.log(obj['age'])


        let obj2 = {
            uname: '刘德华',
            age: 60,
            sing: function () {
                console.log('我要唱歌了')
            }
        }
        obj2.sing()

</script>

对象的增删查改

<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: 'zhangfei',
            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内置对象

<script>
        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)
</script>

日期内置对象

<script>
        //获取现在时间
        let date = new Date()
        //获取年
        let year = date.getFullYear()
        //获取月(从0开始计算所以需要+1)
        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))
</script>

dom

<button>提交</button>
    <script>
        const btn = document.querySelector('button')
        // console.dir(btn)
        console.log(typeof (btn))

    </script>

获取元素的方法

<body>
    <div>盒子</div>
    <ul>
        <li>1</li>
        <li class="two">2</li>
        <li>3</li>
        <li id="four">4</li>
    </ul>
    <script>
        // 1、通过css选择器获取             ('字符串')    :狂（嘎嘎）推荐
        const li2 = document.querySelector('.two')
        console.log(li2)
        const li = document.querySelector('li')
        console.log(li)
        // 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)


        // 其他
        console.log(document.getElementsByTagName('div'))
        console.log(document.getElementById('four'))
        console.log(document.getElementsByClassName('two'))
   </script>
</body>

修改元素内容

<body>
    <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>jiangjia</h1>`
        //innerText不能识别标签而innerHTML可以识别标签
        box2.innerHTML = `<h1>chensongjie</h1>`
    </script>
</body>

修改元素属性

<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

</script>

修改元素样式

 

<body>
    <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>
</body>

随机点名案列

<body>
    <div>jiangjia</div>
    <script>

        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
        // 1、获取元素
        const box = document.querySelector('div')
        // 2、获取随机数   n-0    m---arr.length-1 
        let random = Math.floor(Math.random() * arr.length)
        // 3、改内容
        box.innerHTML = `${arr[random]}`
    </script>

定时器

<script>
        // setTimeout\setInterval   定时器
        // setTimeout  :某段代码或者函数在多久后执行
        // setTimeout(code||function,time(ms))
        // 返回值是一个整数，代表定时器编码
        let timer = setTimeout('console.log("我是一秒之后执行的代码")', 1000)
        console.log(timer)
        let timer2 = setTimeout('console.log("我是4秒之后执行的代码")', 4000)
        console.log(timer2)
        //    传的是函数名,不是函数调用
        let timer3 = setTimeout(fn, 3000)
        function fn() {console.log('6666666')}

        // setTimeout(函数或一段代码，延迟时间，实参……)
        let timer4 = setTimeout(function (a, b) {
        console.log(a + b)}, 2000, 1, 4)

        let obj = {
            uname: 'gouxin',
            a: 3,
            b: 4,
            sum: function () {
                console.log(this)
                console.log(this.a)

            }
        }
        obj.sum()
        // setTimeout(obj.sum, 1000)
        // 定时器的第一个参数如果是对象方法，this不再指向对象，指向全局环境
        // setTimeout(function () { obj.sum() }, 1000)

        解决办法
        //1.改变为函数调用
        let a = setTimeout(obj.sum.bind(obj), 1000)
        clearTimeout(a)



        // setInterval  2.间隔一段时间，将代码或者函数执行一次
        let timer = setInterval(' console.log(\'6666666\')', 1000)   /为转义字符
        clearInterval(timer)清除定时器
        let timer2 = setInterval(function (a, b) {
            console.log(a + b)
        }, 1000, 2, 3)
        clearInterval(timer2)
    </script>