数据正倒显示_为什么数据显示是倒着的-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript动态展示买卖数据的示例。通过解析JSON数据，该示例能够将买卖双方的交易量、价格及市场总额等信息以列表形式展现出来，并采用不同的颜色区分买卖双方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        li{ float: left; list-style: none; margin-right: 10px; width: 100px;}
        ul,ol{ overflow: hidden }
        ul{ color: red; }
        ol{ color: green; }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div class="sell">
        <!-- <ul>
            <li>买</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
        </ul> -->
    </div>
    <div class="buy">
        <!-- <ol>
            <li>卖</li>
            <li>0.0012</li>
            <li>3</li>
            <li>0.00360000</li>
        </ol> -->
    </div>

<script>
    var json={
        "code": 0, 
        "data": {
            "sell": [
                {
                    "volume": 0.0012, 
                    "price": 3, 
                    "marketAmount": "0.00360000"
                }, 
                {
                    "volume": 8.49, 
                    "price": 10, 
                    "marketAmount": "84.90000000"
                }
            ], 
            "buy": [
                {
                    "volume": 0.0124, 
                    "price": 5, 
                    "marketAmount": "0.06200000"
                },
                {
                    "volume": 0.0356, 
                    "price": 5, 
                    "marketAmount": "0.07800000"
                }
            ]
        }
    }

    if(json.code==0){
        var sell=json.data.sell; //找到数据 卖
        var sellHtml="";
        for (var i = sell.length - 1; i >= 0; i--) {  //循环 倒序显示
            var sellData=sell[i];
            var num=i+1;
            sellHtml+="<ul><li>卖"+num+"</li><li>"+sellData.volume+"</li><li>"+sellData.price+"</li><li>"+sellData.marketAmount+"</li></ul>";
        };
        $('.sell').html(sellHtml);

        var buy=json.data.buy; //买
        var buyHtml="";
        for (var i = 0; i < buy.length; i++) {
            var buyData=buy[i];
            var num2=i+1;
            buyHtml+="<ol><li>买"+num2+"</li><li>"+buyData.volume+"</li><li>"+buyData.price+"</li><li>"+buyData.marketAmount+"</li></ol>";
        };
        $('.buy').html(buyHtml);
    };

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