Web APIs-2023.4.9-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_65590235/article/details/130038018

回顾

如果想让页面的滚动是一种平滑的方式,需要增加如下css样式

 // 如果想让页面的滚动是一种平滑的方式,需要增加如下css样式
      body, html {
            scroll - behavior: smoth;
         }

mouseenter和mouseleave没有冒泡所以不能事件委托不能从ul冒泡到li

mouseenter和mouseleave没有冒泡所以不能事件委托不能从ul冒泡到li
// mouseenter和mouseleave这两个事件是没有冒泡的
// mouseover和mouseout这两个事件是有冒泡的

   // mouseenter和mouseleave没有冒泡   所以不能事件委托  不能从ul冒泡到li
      // mouseenter和mouseleave这两个事件是没有冒泡的
     // mouseover和mouseout这两个事件是有冒泡的
        smallUI.addEventListener('mouseover', function () {

        })


        smallUI.addEventListener('mouseout', function () {

        })

放大镜案例

页面滚动时用pageY 是距离页面最上沿的位置

pageY

实战案例

  <script>
        //  1.滚动相关
        // 代码的两部分:代码的功能 代码执行的时机
        // 监听页面的滚动事件: 得到最新滚出去的距离

        // 如果想让页面的滚动是一种平滑的方式,需要增加如下css样式
        // body, html {
        //     scroll - behavior: smoth;
        //   
        // }
        const elevator = document.querySelector('.xtx-elevator')
        window.addEventListener('scroll', function () {
            const scrollTop = document.documentElement.scrollTop
            if (scrollTop > 1000) {
                elevator.style.opacity = 1
            }
            else {
                elevator.style.opacity = 0
            }
        })

        document.querySelector('#backTop').addEventListener('click', function () {
            // document.documentElement.scrollTop=0
            console.log('返回顶部')
            window.screenTop(0, 0)
        })
        // 2.tab栏切换相关
        const smallUI = document.querySelector('.small ul')
        const middleImg = document.querySelector('.middle img')
        // mouseenter和mouseleave没有冒泡   所以不能事件委托  不能从ul冒泡到li
        // mouseenter和mouseleave这两个事件是没有冒泡的
        // mouseover和mouseout这两个事件是有冒泡的
        smallUI.addEventListener('mouseover', function (e) {
            if (e.target.tagName === 'IMG') {
                document.querySelector('.small ul li.active').classList.remove('active')
                //    parentNode:父元素
                e.target.parentNode.classList.add('active')
                // 中间图片变化
                middleImg.src = e.target.src
                // 大图也需要变化
                largerDiv.style.backgroundImage = `url(${e.target.src})`
            }
        })

        // 鼠标离开 图片大图消失 什么都不用做  就不用写了
        // smallUI.addEventListener('mouseout', function () {

        // })

        const firstDD = document.querySelector('.attrs .item:nth-child(1) .dd')
        const secondDD = document.querySelector('.attrs .item:nth-child(2) .dd')
        firstDD.addEventListener('click', function (e) {
            if (e.target.tagName === 'IMG') {
                //① this.querySelector('active').classList.remove('active')
                // this= ('.attrs .item:nth-child(1) .dd img.active')
                // ②document.querySelector('.attrs .item:nth-child(1) .dd img.active').classList.remove('active')
                // ③
                const activeImg = document.querySelector('.attrs .item:nth-child(1) .dd img.active')
                activeImg.classList.remove('active')

                e.target.classList.add('active')
            }
        })

        secondDD.addEventListener('click', function (e) {
            if (e.target.tagName === 'SPAN') {
                // ①this.querySelector('active').classList.remove('active')
                // this= ('.attrs .item:nth-child(2) .dd img.active')
                //② document.querySelector('.attrs .item:nth-child(2) .dd img.active').classList.remove('active')
                //③
                const activeSpan = document.querySelector('.attrs .item:nth-child(2) .dd span.active')
                activeSpan.classList.remove('active')

                e.target.classList.add('active')
            }
        })

        const tabHead = document.querySelector('.tab-head')
        const panels = document.querySelectorAll('.tab-pane')
        tabHead.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                document.querySelector('.tab-head a.active').classList.remove('active')
                e.target.classList.add('active')
                // 将这个标题对应的内容显示出来, 其他的内容隐藏起来
                // 全部隐藏  干掉所有人, 复活我自己 
                for (let i = 0; i < panels.length; i++) {
                    panels[i].style.display = 'none'
                }
                panels[e.target.dataset.index].style.display = 'block'

            }
        })



        // 3.图片放大相关
        const middleDiv = document.querySelector('.middle')
        const layerDiv = document.querySelector('.layer')
        const largeDiv = document.querySelector('.large')

        middleDiv.addEventListener('mouseenter', function () {
            layerDiv.style.display = 'block'
        })
        middleDiv.addEventListener('mouseleave', function () {
            layerDiv.style.display = 'none'
        })

        middleDiv.addEventListener('mousemove', function (e) {
            // e.offsetX/e.clientX/e.pageX
            // 控制layerDiv的位置
            let targetX = e.clientX - middleDiv.parentNode.offsetLeft - layerDiv.offsetWidth / 2
            // 元素.offsetLeft 距离带定位父元素左沿的距离
            let targetY = e.clientY - middleDiv.parentNode.offsetTop - layerDiv.offsetHeight / 2

            if (targetX < 0) {
                targetX = 0
            }

            if (targetX > middleDiv.offsetWidth - layerDiv.offsetWidth) {
                targetX = middleDiv.offsetWidth - layerDiv.offsetWidth
            }

            if (targetY < 0) {
                targetY = 0
            }

            if (targetY > middleDiv.offsetHeight - layerDiv.offsetHeight) {
                targetY = middleDiv.offsetHeight - layerDiv.offsetHeight
            }
            layerDiv.style.left = `${targetX}px`
            layerDiv.style.top = `${targetY}px`

            largeDiv.style.backgroundPositionX = -targetX * 2 + 'px'
            largeDiv.style.backgroundPositionY = -targetY * 2 + 'px'
        })
    </script>

渲染界面

const arr = [{
    content: '今天要吃个大汉堡',
    done: false
},
{
    content: '复习本地存储的知识点',
    done: true
},
{
    content: '今天要吃定这个实战',
    done: false
}
]
// 1.使用数据渲染界面
let temp = 0
let todolist = document.querySelector('#todolist')
render()

function render() {
    // 列表的渲染


    for (let i = 0; i < arr.length; i++) {
        // 重新渲染之前清空
        todolist.innerHTML = ''
        const newLi = document.createElement('li')
        if (arr[i].done === true) {
            temp++
            newLi.classList.add('completed')
            newLi.innerHTML = `<input type="checkbox" checked>
                                        <p>${arr[i].content} </p>
                                        <a href="javascript:;"></a>`
        } else {
            newLi.innerHTML = `<input type="checkbox">
                                        <p>${arr[i].content} </p>
                                        <a href="javascript:;"></a>`
        }
        todolist.appendChild(newLi)
    }
}

// 数量显示的渲染
// ①  let temp = 0
document.querySelector('#total').innerHTML = arr.length
document.querySelector('#done').innerHTML = temp
document.querySelector('#undone').innerHTML = arr.length - temp

// ②
const doneCount = document.querySelectorAll('input:checked').length
document.querySelector('#total').innerHTML = arr.length
document.querySelector('#done').innerHTML = doneCount
document.querySelector('#undone').innerHTML = arr.length - doneCount

// ③
const newArr = arr.filter(function (e) {
    return e.done
})
document.querySelector('#total').innerHTML = arr.length
document.querySelector('#done').innerHTML = newArr
document.querySelector('#undone').innerHTML = arr.length - newArr

// 数量显示的渲染
// ①  let temp = 0
// document.querySelector('#total').innerHTML = arr.length
// document.querySelector('#done').innerHTML = temp
// document.querySelector('#undone').innerHTML = arr.length - temp

// ②
// const doneCount = document.querySelectorAll('input:checked').length
// document.querySelector('#total').innerHTML = arr.length
// document.querySelector('#done').innerHTML = doneCount
// document.querySelector('#undone').innerHTML = arr.length - doneCount

// ③
const newArr = arr.filter(function (e) {
    return e.done
})
document.querySelector('#total').innerHTML = arr.length
document.querySelector('#done').innerHTML = newArr
document.querySelector('#undone').innerHTML = arr.length - newArr