#日常刷题#

最新推荐文章于 2024-09-21 11:29:05 发布

前端VC

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量224

点赞数

分类专栏：刷题文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_63267832/article/details/132645758

版权

刷题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 监听对象

描述：

请补全JavaScript代码，要求如下：
1. 监听对象属性的变化
2. 当"person"对象的属性发生变化时，页面中与该属性相关的数据同步更新
注意：
1. 必须使用Object.defineProperty实现且触发set方法时更新视图
2. 可以使用预设代码"_render"函数

思路：

创建observe函数，先进行对目标的检测是否合法，对于person对象属性发生变化时候，使用

Object.defineProperty来对对象进行属性的修改，以实现触发set方法实现对象属性的更新

作答：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            ul {
                list-style: none;
            }
        </style>
        <ul></ul>

        <script>
            var ul = document.querySelector('ul');
        var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
        function render(element) {
            var str = `<li>姓名：<span>${person.name}</span></li>
                       <li>性别：<span>${person.sex}</span></li>
                       <li>年龄：<span>${person.age}</span></li>
                       <li>身高：<span>${person.height}</span></li>
                       <li>体重：<span>${person.weight}</span></li>`
            element.innerHTML = str;
        }
        render(ul);
            // 补全代码
        function Observe(target) {
    if (typeof target !== 'object' || target == null) {
        return target
    }
    for (var key in target) {
        defineReactive(target, key, target[key])
    }
}
function defineReactive(target, key, value) {
    Object.defineProperty(target, key, {
        get: function () {
            return value
        },
        set: function (newVal) {
            if (newVal !== value) {
                value = newVal
                render(ul)
            }

        }

    })
}
Observe(person)

        </script>
    </body>
</html>

2.购物面板

描述：

请补全JavaScript代码，要求如下：
1. 当点击"-"按钮时，商品数量减1
2. 当点击"+"按钮时，商品数量加1
3. 每当点击任意按钮时，购物面板中相关信息必须同步更新
注意：
1. 必须使用DOM0级标准事件（onclick）

作答：

let total_zjsl = 0
let total_klsl = 0
let dom_zjtaiduola = document.querySelector('#zjtaiduola')
let dom_zjsl = document.querySelector('#zjsl')
let dom_zjtaishaola = document.querySelector('#zjtaishaola')
let dom_kltaiduola = document.querySelector('#kltaiduola')
let dom_klsl = document.querySelector('#klsl')
let dom_kltaishaola = document.querySelector('#kltaishaola')
let dom_total = document.querySelector('#total')

function redraw() {
    dom_zjsl.innerText = total_zjsl
    dom_klsl.innerText = total_klsl
    dom_total.innerText = total_zjsl * 28 + total_klsl * 5
}

dom_zjtaiduola.onclick = function() {
    if(total_zjsl > 0) total_zjsl --
    redraw()
}
dom_zjtaishaola.onclick = function() {
    total_zjsl ++
    redraw()
}

dom_kltaiduola.onclick = function() {
    if(total_klsl > 0) total_klsl --
    redraw()
}
dom_kltaishaola.onclick = function() {
    total_klsl ++
    redraw()
}

3.接口

描述：

请补全JavaScript代码，完成函数的接口功能。要求如下：
1. 函数接收两种类型的参数，分别为"get?"和"update?name=xxx&to=yyy"，"name"、"to"为参数，"xxx"、"yyy"分别为参数对应的值。
2. 当参数为"get?"时，返回data数据
3. 当参数为"update?name=xxx&to=yyy"时，将data中所有"name"为"xxx"的项，更改为"name"值为"yyy"

思路：

现将参数进行分割去除？判断参数类型，在对剩下参数进行分割，对对象进行修改属性

作答：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            let data = [
                {name: 'nowcoder1'},
                {name: 'nowcoder2'}
            ]
            
         const _api = string => {
            // 补全代码
                let cs = string.split('?')[0];
                 if(cs=='get'){
                   return data
                  }
                 if(cs=='update'){
                  let query=string.split('?')[1]
                  let name = query.split('&')[0].split('=')[1];
                  let to= query.split('$')[1].split('=')[1];
                     for(let item of data){
                          if(item.name==name){
                          item.name=to;
                         }
                  }
         
};
        </script>
    </body>
</html>

4.切换Tab栏目

描述：

请补全JavaScript代码，实现效果如下：
1. 当点击某个栏目（题库、面试、学习、求职）时，该栏目背景色变为'#25bb9b'，其它栏目背景色位'#fff'。
2. 当选中某个栏目时，下方内容就展示索引值相同的类名为".items"的"li"元素
注意：
1. 必须使用DOM0级标准事件（onclick）
2. 已使用自定义属性存储了栏目的索引值。点击栏目获取索引值，使用索引值控制类名为"items"下的"li"元素

作答：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            .options li {
                float: left;
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border: solid 1px #ddd;
            }

            .items li {
                width: 405px;
                height: 405px;
                display: none;
                border: solid 1px #ddd;
            }
        </style>
    </head>
    <body>
        <ul class='options'>
            <li data-type="0" style='background-color: #25bb9b;'>题库</li>
            <li data-type="1">面试</li>
            <li data-type="2">学习</li>
            <li data-type="3">求职</li>
        </ul>
        <ul class='items'>
            <li style="display: block;">牛客题库，包含编程题、选择题等</li>
            <li>为你的面试提供一站式服务</li>
            <li>校招学习来牛客</li>
            <li>求职中有什么难题，可以联系我们</li>
        </ul>

        <script>
            var options = document.querySelector('.options');
            var optionItems = [].slice.call(document.querySelectorAll('.options li'));
            var items = [].slice.call(document.querySelectorAll('.items li'));
            // 补全代码
        options.onclick = function(e){
    for(let i in optionItems){
        if(e.target===optionItems[i]){
            optionItems[i].style.backgroundColor = '#25bb9b'
            items[i].style.display = 'block'
        }else{
            optionItems[i].style.backgroundColor = '#fff'
            items[i].style.display = 'none'
        }
    }
}
        </script>
    </body>
</html>

5.双向绑定

描述：

请补全JavaScript代码，要求如下：
1. 监听对象属性的变化
2. 当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新
3. 将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新
注意：
1. 必须使用Object.defineProperty实现且触发set方法时更新视图
2. 必须使用DOM0级标准事件（oninput）
3. 可以使用预设代码"_render"函数

作答：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <style>
            ul {
                list-style: none;
            }
        </style>
        <input type="text">
        <ul></ul>

        <script>
            var ul = document.querySelector('ul');
            var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
            var inp = document.querySelector('input');
            inp.value = person.weight;
            const _render = () => {
                var str = `<li>姓名：<span>${person.name}</span></li>
                           <li>性别：<span>${person.sex}</span></li>
                           <li>年龄：<span>${person.age}</span></li>
                           <li>身高：<span>${person.height}</span></li>
                           <li>体重：<span>${person.weight}</span></li>`
                ul.innerHTML = str;
                inp.value = person.weight;
            }
            _render(ul);
            // 补全代码
        function Observe(target) {
    if (typeof target !== 'object' || target == null) {
        return target
    }
    for (var key in target) {
        defineReactive(target, key, target[key])
    }
}
function defineReactive(target, key, value) {
    Object.defineProperty(target, key, {
        get: function () {
            return value
        },
        set: function (newVal) {
            if (newVal !== value) {
                value = newVal
                _render(ul)
            }

        }

    })
}
Observe(person)
 
inp.oninput = function(){
    person.weight = this.value
}
        </script>
    </body>
</html>