微博热搜的制作

最新推荐文章于 2023-10-18 10:27:08 发布

张有泽

最新推荐文章于 2023-10-18 10:27:08 发布

阅读量1.3k

点赞数 3

分类专栏： Web前端文章标签： javascript html5 css ajax css3

本文链接：https://blog.csdn.net/m0_56252710/article/details/124184787

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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>
</head>

<body>
    <style>
        .big {
            width: 600px;
            height: 500px;
            margin: auto;

        }

        #inp {
            position: absolute;
            width: 600px;
            height: 35px;
            border: 1px solid #ccc;
            margin-top: 10px;
            border-radius: 10px;
            text-indent: 2em;
            font-size: 14px;


        }

        #but {
            position: relative;
            left: 530px;
            top: 2px;
            width: 70px;
            height: 35px;
            border: 0px;
            margin-top: 10px;
            background-color: white;
            border-radius: 2px;
        }

        .show {
            margin-top: 20px;
            width: 600px;
            height: auto;
            border: 1px solid #ccc;
            border-radius: 10px;
            display: none;

        }

        a {
            height: 35px;
            line-height: 35px;
            width: 600px;
            display: inline-block;
            text-indent: 1em;
            font-weight: 60px;
            font-size: 16px;
            text-decoration: none;
            color: black;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }


        a:hover {
            color: orange;
            background-color: #ccc;
        }

        span {
            width: 70px;
            height: 35px;
            line-height: 35px;
            float: right;
            vertical-align: top;
        }

        li {
            width: 30px;
            height: 35px;
            line-height: 35px;
            float: left;
            vertical-align: top;
            list-style: none;
        }

        h1 {
            width: 200px;
            margin: auto;
        }
    </style>
    <div class="big">
        <h1>微博 ‧ 热搜榜</h1>
        <input id="inp" type="text" placeholder="">
        <input id="but" type="button" value="搜索">
        <div id="keyshow" class="show"></div>
        <!--使用原生js写一网页 -->
    </div>

    <script>
        //步骤一:创建异步对象
        //什么是 XMLHttpRequest 对象？
        // XMLHttpRequest 对象用于在后台与服务器交换数据。
        // XMLHttpRequest 对象是开发者的梦想，因为您能够：
        // 在不重新加载页面的情况下更新网页
        // 在页面已加载后从服务器请求数据
        // 在页面已加载后从服务器接收数据
        // 在后台向服务器发送数据
        var ajax = new XMLHttpRequest();
        //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
        ajax.open('get', 'https://tenapi.cn/resou/', true);
        //步骤三:发送请求
        ajax.send();
        //步骤四:注册事件 onreadystatechange 状态改变就会调用
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的　　　　
                var data = JSON.parse(ajax.responseText);

                //以下函数为获取数组长度，然后循环将数据渲染到页面
                for (var i = 0; i < data.list.length; i++) {
                    //创建一个a标签用来显然数据条
                    var a = document.createElement('a');
                    // 将数据添加到标签中，并创建子标签，注意子标签的写法，要用()包含起来
                    a.innerHTML = ("<li>" + (i + 1) + "." + "</li>") + data.list[i].name + ("<span>" + ((data.list[i].hot) / 10000).toFixed(0) + "万" + "</span>");
                    // 将a标签添加链接
                    a.href = data.list[i].url;
                    // HTML DOM appendChild() 方法可向节点的子节点列表的末尾添加一个新的子节点。、
                    // 这里是循环添加a标签到页面中
                    document.getElementById('keyshow').appendChild(a);
                    // 获取标签id
                    var inp = document.getElementById('inp');
                    //给inp标签的placeholder属性添加动态的数据
                    inp.placeholder = "大家都在搜:  " + data.list[0].name;
                }
                //显示热搜框，在数据获取渲染完之后显示
                document.getElementById('keyshow').style.display = 'block';
            }
        }
        // 添加一个函数，当键盘按下时，触发事件
        document.getElementById('inp').onkeyup = function () {
            // 获取输入框的值
            var val = document.getElementById('inp').value;
            // 获取a标签存储在a数组中
            var a = document.getElementsByTagName('a');
            // 创建一个数组，用来存储搜索到的数据
            for (var i = 0; i < a.length; i++) {
                // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                // 如果没有找到匹配的字符串，则返回 -1。
                //匹配到则显示该条记录
                if (a[i].innerHTML.indexOf(val) != -1) {
                    a[i].style.display = 'block';
                } else {
                    a[i].style.display = 'none';
                }
            }
        }
    </script>
</body>

</html>