JS要点整理-11

伪 event

所有的标签添加点击事件之后, 这个事件的执行函数, 会默认接收一个参数，我们一般会将这个参数命名为 event/ev/e,是一个对象, 它里边有很多属性, 其中一个叫做 target，这个属性的值, 就是你点击的标签

        //改变背景图片
        btn1.onclick = function () {
            outer.classList.remove('close')
        }
        btn2.onclick = function () {
            outer.classList.add('close')
        }
        for (var i = 0; i < images.length; i++) {
            //添加形参可以使用一些功能
            images[i].onclick = function (e) {
                document.querySelector('body').style.background = 'url(' + e.target.src + ')' + ' no-repeat 0 0/100% 100%'
            }
        }

获取验证码倒计时

        // 逻辑

        /**
         *  1. 点击 按钮 获取验证码
         *  2. 打开 提示信息 (禁用按钮)
         *  3. 开始倒计时
         *  4. 当时间到达, 关闭提示信息 (开启按钮)
        */

        getMsg.onclick = function (e) {
            // 打开提示信息
            pEl.style.display = 'block'
            // getMsg.disabled = true
            // 禁用按钮
            e.target.disabled = true

            // 规定的按钮倒计时时间
            var timeOut = 5

            // 修改提示文本, 为正确的时间
            timer.innerText = timeOut

            // 开启倒计时
            var timerId = setInterval(function () {
                timeOut--
                if (!timeOut) {
                    // 关闭定时器
                    clearInterval(timerId)
                    // 关闭提示信息
                    pEl.style.display = 'none'
                    // 取消禁用按钮
                    e.target.disabled = false
                } else {
                    timer.innerText = timeOut
                }
            }, 1000)

        }

            //宫格图
        function fn() {
            for (var i = 0; i < dataList.length; i++) {
            ul.innerHTML += `
            <li>
                <div><img src="${dataList[i].imgurl}" alt=""></div>
                <p>${dataList[i].title}</p>
            </li>
            `
        }
        }
        fn()