Web前端研发实习--学习笔记（7）

最新推荐文章于 2024-06-01 16:06:49 发布

秃头的fan32021

最新推荐文章于 2024-06-01 16:06:49 发布

阅读量102

点赞数

分类专栏： web研发笔记文章标签： css javascript html5

本文链接：https://blog.csdn.net/qq_48026875/article/details/120812005

版权

web研发笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript实战四——商品列表页面

功能

页面加载后GET方式请求指定API；请求返回的数据；

将返回的数据防京东页面商品列表页面实现；

标题超出显示...，鼠标移动到上方显示完整信息；

根据浏览器宽度自适应显示，一行最少显示3个。

<!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>API</title>
    <style>
            *{
                font-family: '楷体';
                font-size:12px;
            }
            #main {
                background-color: beige;
                width:60%;
                min-width:1000px;
                margin: 0 auto;
                border:0px;
                text-align: center;
                overflow: auto;
            }
            .img {
                width: 140px;
                height: 200px;
                padding: 10px;
                margin: 10px auto;

            }
            .total {
                width:250px;
                height: 380px;
                border: 2px solid;
                border-radius:5px;
                margin-left: 5px;
                margin-bottom: 20px;
                margin-right: 5px;
            }
            .price{
                color: red;
                font-size: large;
                text-align: left;
                padding-left: 20px;
            }
            .des{
                width:150px;
                overflow:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
                height: 80px;
                text-align: left;
                margin: 20px auto;
                color:black;
                font-size: medium;
                font-weight: bolder;
            }
            .des:hover{
                height: auto;
                white-space: normal;
            }
            ul {
                list-style: none;
                overflow: hidden;
            }
            ul li {
                float: left;
            }
            div:hover {
            border-color:red;
            }
    </style>
</head>
<body onload="createpeople()">
    <div id="main">
        <ul id="Whole">

        </ul> 
    </div>
</body>
<script>
    var abc
    var people ="";
    function show() {
        this.title = this.innerHTML;
    }
    function createpeople() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'API地址');

        xhr.onreadystatechange = function (e) {
            if (this.readyState == 4 && this.status == 200) {
                var binStr = this.responseText;
                abc = JSON.parse(binStr);
                console.log(abc);
                console.log(binStr);
                for (var i in abc) {
                    people += `<li>  
                            <div class="total">
                                <div class="img" style="background-color:${abc[i]["color"]}"></div>
                                <p class="des" onmouseover="show()">${abc[i]["title"]}</p>
                                <p class="price">￥${abc[i]["price"]}</p>
                            </div>
                        </li>`
                }
                document.getElementById("Whole").insertAdjacentHTML("afterbegin", people)
            }
        };
        xhr.send();
    }
</script>
</html>

秃头的fan32021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端研发实习--学习笔记（7）

JavaScript实战四——商品列表页面功能页面加载后GET方式请求指定API；请求返回的数据；将返回的数据防京东页面商品列表页面实现；标题超出显示...，鼠标移动到上方显示完整信息；根据浏览器宽度自适应显示，一行最少显示3个。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati
复制链接

扫一扫