统计
  • 建站日期:2021-03-10
  • 文章总数:275 篇
  • 评论总数:115 条
  • 分类总数:21 个
  • 最后更新:9月4日
文章 技术代码

js实现防抖节流

小椿
首页 技术代码 正文

HTML样式

<body>
    <div>
        <input type="text">
        <ul></ul>
    </div>
</body>

CSS样式

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            margin: 50px auto;
            width: 500px;
        }

        input {
            width: 500px;
            height: 40px;
            outline: none;
            border: 2px solid skyblue;
            border-radius: 10px;
            padding-left: 20px;
            font-size: 25px;
        }

        ul {
            width: 520px;
            border: 2px solid skyblue;
            border-radius: 10px;
            font-size: 18px;
            display: none;
        }

        ul,
        li {
            list-style: none;
        }
    </style>

JS相关代码

<script>
 const oIpt = document.querySelector('input');
        const oUl = document.querySelector('ul');

        // 2, 给 input 标签,添加输入事件 input事件
        oIpt.addEventListener('input', () => {
            // 设定一个定时器,延迟触发执行
            setTimeout(() => {
                // 2-1, 获取时间戳
                const time = new Date();
                let t = parseInt(time.getTime() / 1000);

                // 2-2, 获取输入的数据
                let keyWord = oIpt.value;

                // 3, 执行 jsonp 跨域请求
                // 应该是 定义一个script,和src属性 
                // 使用节点操作,动态生成标签
                const s = document.createElement('script');

                // 给s标签定义src属性

                s.src =
                    `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=7513,32606,1423,32327,31253,32673,32116,26350,22159&wd=${keyWord}&req=2&csor=1&cb=setSearch&_=${t}`;

                // 最终script标签要写入到 body 标签的最后
                const oBody = document.body;
                oBody.appendChild(s);

                // 删除 写入的 script 标签
                oBody.removeChild(s);

            }, 1500);
        })

        // 3, 失去焦点,让ul隐藏
        oIpt.addEventListener('change', () => {
            oUl.style.display = 'none';
        })

        // 定义一个函数,根据返回值结果,生成页面内容
        function setSearch(res) {
            if (res.g === undefined) {
                // 证明是没有搜索结果
                // 隐藏ul
                oUl.style.display = 'none';
            } else {
                console.log(res);
                // 有查询结果
                const arr = res.g;

                // 2, 根据arr中的对象的q属性, 生成li, 写入ul
                let str = '';

                arr.forEach(item => {
                    str += `<li>${item.q}</li>`;
                })

                // 将生成的li写入ul
                oUl.innerHTML = str;

                // 让ul显示
                oUl.style.display = 'block';
            }
        }
    </script>
版权声明 1 本站名称:乡野风情
2 本站网址:http://www.t35.cn/
3 本文网址:http://www.t35.cn/jsdm/260.html
4 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:550966987进行删除处理。
5 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
6 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
7 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
-- 展开阅读全文 --
jQuery一行代码实现选项卡效果
« 上一篇
简单HTML+CSS+JS写出烟花效果
下一篇 »

发表评论