# 11.场景题

# 1.实现一个div方块随着鼠标移动？

js中的鼠标事件：

（1）click: 当用户单击元素时触发。

（2）dblclick: 当用户在相同的元素上快速连续单击两次时触发。

（3）mousedown: 当鼠标按钮被按下时触发。

（4）mouseup: 当按下的鼠标按钮被释放时触发。

（5）mouseover: 当鼠标指针移到元素上时触发。

（6）mouseout: 当鼠标指针从元素上移出时触发。

（7）mousemove: 当鼠标指针在元素上移动时连续触发。

上面这些事件可以使用 addEventListener 绑定到dom上，包括document。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        const boxDom = document.getElementById('box')
        let overFlag = false, pressFlag = false;
        boxDom.addEventListener('mouseover', () => {
            overFlag = true
        })
        boxDom.addEventListener('mouseout', () => {
            overFlag = false
        })
        boxDom.addEventListener('mousedown', () => {
            if (overFlag) {
                pressFlag = true
            }
        })
        boxDom.addEventListener('mouseup', () => {
            pressFlag = false
        })
        document.addEventListener('mousemove', e => {
            if (pressFlag) {
                boxDom.style.left = e.clientX - 50 + 'px'
                boxDom.style.top = e.clientY - 50 + 'px'
            }
        })
    </script>
</body>

</html>

# 2.用栈实现一个队列，只能使用数组的 pop() 方法和 push() 方法

可以使用数组长度，但不可以使用数组下标，也不能调用数组的其他方法

class myQueue {
    constructor() {
        this.inStack = []
        this.outStack = []
    }
    push(value) {
        this.inStack.push(value)
    }
    shift() {
        if (this.outStack.length === 0) {
            while (this.inStack.length) {
                this.outStack.push(this.inStack.pop())
            }
        }
        return this.outStack.pop()
    }
}

const q = new myQueue()
q.push(1)
q.push(2)
console.log(q.shift());
console.log(q.shift());
q.push(3)
q.push(4)
console.log(q.shift());
console.log(q.shift());

# 3.实现一个JSONP

function jsonp(url,callbackName){
    return new Promise((resolve,reject) => {
        const script = document.createElement('script')
        script.src = `${url}?callback=${callbackName}`
        window[callbackName] = function(data){
            resolve(data)
            document.body.removeChild(script)
            delete window[callbackName]
        }
        script.onerror = () => {
            reject(new Error('failed'))
            document.body.removeChild(script)
            delete window[callbackName]
        }
        document.body.appendChild(script)
    })
}
const url = 'http://localhost:3000/api/greeting'
jsonp(url,'handle').then(data => {
    console.log(data);
})

# 4.前端怎么获取页面中哪个元素是最多的

function findMostElement() {
    const elements = document.querySelectorAll('*')
    const obj = {}
    for (let ele of elements) {
        const tagName = ele.tagName
        obj[tagName] = (obj[tagName] || 0) + 1
    }
    let maxCount = 0, resEle = null;
    for (let [key, count] of Object.entries(obj)) {
        if (maxCount < count) {
            maxCount = count
            resEle = key
        }
    }
    return resEle
}
console.log(findMostElement());

← 项目 →