2022面试题汇总

前端贾公子

已于 2022-04-27 16:05:18 修改

阅读量718

点赞数 1

分类专栏：面试文章标签：前端

于 2022-04-27 14:38:24 首次发布

本文链接：https://blog.csdn.net/qq_63358859/article/details/124445614

版权

面试专栏收录该内容

6 篇文章 4 订阅

订阅专栏

浏览器下两个页面的通讯都有什么方式？

使用css与js做一个九宫格动画

请输出如下的代码打印结果

js如何实现页面地址发生变化，但页面不发生跳转，请用js实现

请用多种方式实现垂直居中，实现的方式越多越好

请实现一个getValue函数，该函数可以从一个深层对象中获取到该对象上的值

小程序中如果希望多个Page共享一个对象（多页页面可以读写一个对象），如何实现

浏览器下两个页面的通讯都有什么方式？

1.一个窗口更新localStorage，另一个窗口监听window对象的”storage”事件，来实现通信。(但是两个界面需要同源)

2.page1将要传递的信息存储在cookie中，page2使用setInterval每隔一定时间读取cookie信息，即可随时获取要传递的信息。

3.html5引入了一个跨文档通信的API，这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。-

使用css与js做一个九宫格动画

要求，未抽奖时，所有奖品背景均为白色，当点击“抽奖”时，从左上角开始，逆时针依次（每1s切换一次）

选中（选中：即背景变为红色）每个奖品，逆时针转完2圈后，停在右下角。

<style>
    body {
        margin: 0;
        padding: 0;
        background: #f4f4f4;
    }

    #box {
        width: 310px;
        height: 310px;
        display: flex;
        flex-wrap: wrap;
    }

    .option {
        width: 100px;
        height: 100px;
        background: #fff;
        text-align: center;
        line-height: 100px;
        border: 1px solid red;
        transform: all .5s;

    }

    #start {
        width: 100px;
        height: 100px;
        background: #fff;
        text-align: center;
        line-height: 100px;
        border: 1px solid red;
        cursor: pointer;

    }
</style>

<body>
    <div id="box">
        <div class="option">1</div>
        <div class="option">2</div>
        <div class="option">3</div>
        <div class="option">4</div>
        <div id="start">抽奖</div>
        <div class="option">6</div>
        <div class="option">7</div>
        <div class="option">8</div>
        <div class="option">9</div>
    </div>
</body>
<script>
    let btn = document.getElementById('start')
    let options = document.getElementsByClassName('option')
    btn.onclick = function () {
        let timer
        let num = 0
        let res = 0
        if (timer == null) {
            timer = setInterval(() => {
                num++
                let arr = [0, 3, 5, 6, 7, 4, 2, 1]
                for (let i = 0; i < options.length; i++) {
                    options[i].style.backgroundColor = '#fff'
                }
                options[arr[res]].style.backgroundColor = 'pink'
                console.log(arr[num], arr[res]);
                res++
                if (res >= arr.length) res = 0
                if (num >= 21) {
                    clearInterval(timer)
                    timer = null
                }
            }, 1000);
        }
    }
</script>

请输出如下的代码打印结果

//bdca

Promise里为同步b，同步d .then异步，状态为成功后立即调用，异步定时器a

setTimeout(() => {
    console.log('a');
}, 0);


new Promise((resolve, reject) => {
    console.log('b');
    resolve(1);
}).then(() => {
    console.log('c');
});
console.log('d');

js如何实现页面地址发生变化，但页面不发生跳转，请用js实现

<script>
    function changeUrl(name, value) {
        let url = location.href
        let reg = eval('/([\?|&]/' + name + '=}[^&]*/gi]')
        valeu = value.toString().replace(/(^\s*)|(\s*$)/g, '')
        if (!value) {
            let url2 = url.replace(reg, '')
        } else {
            if (url.match(reg)) {
                let url2 = url.replace(reg, '$1' + value)
            } else {
                let url2 = url + (url.indexOf('?') > -1 ? '&' : '?') + name + '=' + value
            }
        }
    }
    history.replaceState(null, null, url2)
<script>

请用多种方式实现垂直居中，实现的方式越多越好

<div class="wrapper">

<div class="center-box" title="我要被垂直居中"></div>

</div>

    .wrapper {
        position: relative;
        background: pink;
        width: 500px;
        height: 500px;
    }

    .center-box {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        margin: auto;
        background-color: blue;
        width: 100px;
        height: 100px;
    }

  .wrapper {
        position: relative;
        background: pink;
        width: 500px;
        height: 500px;
    }

    .center-box {
        width: 100px;
        height: 100px;
        background-color: blue;
        line-height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }

    .wrapper {
        position: relative;
        background: pink;
        width: 500px;
        height: 500px;
    }

    .center-box {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .wrapper {
        background: pink;
        width: 500px;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .center-box {
        width: 100px;
        height: 100px;
        background-color: blue;
    }

请实现一个getValue函数，该函数可以从一个深层对象中获取到该对象上的值

数接受两个参数，一个是需要获取值的原始对象(originObj)，第二个参数是需要从深层对象中获取value使用的key的路径(keyPath)。


    var obj = {
        a: {
            b: {
                c: {
                    d: 1
                }
            }
        }
    };
    var res = getValue(obj, 'a.b.c.d');
    console.log(res); // 打印出1
    var res2 = getValue(obj, 'a.b');
    console.log(res2); // 打印出{c: {d: 1}}

    function getValue(originObj, keyPath) {
        let keys = keyPath.split('.'),
            result,
            index = 0
        console.log(keys);
        const fn = obj => {
            if (index >= keys.length) return
            result = obj[keys[index++]]
            if (result == null || typeof result !== 'object') return
            fn(result)
        }
        fn(originObj)
        return result
    }

小程序中如果希望多个Page共享一个对象（多页页面可以读写一个对象），如何实现

在A页面获取globalData 里的地址存在变量 a，在B页面获取globalData 里的地址存在变量 b；

2.当在A页面修改了地址后，重新赋值a=新地址，globalData.地址 = 新地址；

3.在打开B页面时，再重新获取最新的地址

    App({
        globalData: {
            data: {
                namme: 'jyc',
                age: 22
            }
        }

    })


    Page({
        const app = getApp(),
        data: {
            data: app.globalData.data
        },


        onClick() {
            app.globalData.data = {
                namme: 'zs',
                age: 18
            }
            this.setData({
                data: app.globalData.data
            })
        }

    });



    // 页面2

    Page({
        const app = getApp(),
        data: {
            data: app.globalData.data
        },


        onClick() {
            app.globalData.data = {
                namme: 'zs',
                age: 18
            }
            this.setData({
                data: app.globalData.data
            })
        }

    });

前端贾公子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2022面试题汇总

浏览器下两个页面的通讯都有什么方式？1.一个窗口更新localStorage，另一个窗口监听window对象的”storage”事件，来实现通信。(但是两个界面需要同源)2.page1将要传递的信息存储在cookie中，page2使用setInterval每隔一定时间读取cookie信息，即可随时获取要传递的信息。3.html5引入了一个跨文档通信的API，这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。-使用cs...
复制链接

扫一扫