m0_56047852 2021-11-29 09:28 采纳率: 87.5%
浏览 31
已结题

谁能帮我做个js屏幕自适应吗？好的必采纳

<!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>折叠菜单</title>
    <style>
        ul{list-style: none;padding: 0;margin: 0;}
        div{width: 150px;border: 1px solid #5d7851;margin: 1px;}
        div li{background: #5f5178;border-bottom:1px solid #fff ;}
        div th{background: #5f5178;border-bottom:1px solid #fff ;}
        div li a{text-decoration: none;color: #fff;font-size: 16px;height: 40px;line-height: 63px;padding-left: 10px;}
        div li a:hover{text-decoration: underline;}
        .wrap {width: 150px;display: none;}
        .wrap li{background: white;margin: 0;}
        .wrap li a{color: #5f383a;font-size: 16px;}
        #left{width: 160px;float: left;overflow: hidden;}
        #right{width: 600px;float: left;margin-left: -10px;display: inline;overflow: hidden;}
    </style>
    <div id="left">
      <div id="fold">  
        <ul>
            <li>
                <a href="#">鞋类</a>
                <ul class="wrap">
                    <li><a href="#">经典老爹鞋</a></li>
                    <li><a href="#">新款帆布鞋</a></li>
                </ul>
            </li>
            <li>
                <a href="#">玩具类</a>
                <ul class="wrap">
                    <li><a href="#">经典黄鸡玩偶</a></li>
                    <li><a href="#">新款小单车玩具</a></li>
                </ul>
            </li>
            <li>
                <a href="#">裤子类</a>
                <ul class="wrap">
                    <li><a href="#">经典裤子</a></li>
                    <li><a href="#">新款皮裤</a></li>
                </ul>
            </li>
        </ul>
      </div>
    </div>
    <divv id="right">
        <table border="1" cellspacing="0" cellpadding="9px">
            <thead>
                <th><input type='checkbox'></th>
                <th>商品</th>
                <th>数量</th>
                <th>单价</th>
                <th>状态</th>
                <th>库存</th>
                <th>小计</th>
            </thead>
            <tbody>
                <tr>
                    <td><input type='checkbox'></td>
                    <td>经典老爹鞋</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        69.1
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox'></td>
                    <td>新款帆布鞋</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        19.1
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox'></td>
                    <td>经典黄鸡玩偶</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        9.99
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox'></td>
                    <td>新款小单车玩具</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        16.1
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox'></td>
                    <td>经典裤子</td>
                    <td>
                        <button class="del">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        10.2
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
                <tr>
                    <td><input type='checkbox'></td>
                    <td>新款皮裤</td>
                    <td>
                        <button class="jian">-</button>
                        <input type="number" maxlength="2" value="0" disabled>
                        <button class="add">+</button>
                    </td>
                    <td>
                        60.1
                    </td>
                    <td>
                        有货
                    </td>
                    <td>20</td>
                    <td class="xiaoji"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5"></td>
                    <td>总计</td>
                    <td class="total"></td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script src="jquery-3.6.0.js"></script>
    <script>
         $('#fold>ul>li:first').find('.wrap').css({"display":"block"});
         $('#fold>ul>li').click(function(){
             $(this).siblings('li').find('wrap').css('display',"none");
             $(this).find('.wrap').css('display',"block");
         })
         $(".add").click(function  () {
        var num = $(this).prev().val();
        if(num==20){
            return;
        }
        
        $(this).prev().val(parseInt(++num));
        $(this).parent().next().next().next().text(20-num) 
         if ($(this).parent().next().next().next().text()==0) {
            $(this).parent().next().next().text('无货')
        }
         money ()
    })
    $(".del").click(function  () {
        
        var num = $(this).next().val();
        if(num==0){
            return;
        }
        $(this).next().val(parseInt(--num));
        $(this).parent().next().next().next().text(20-num)
        
            $(this).parent().next().next().text('有货')
            money ()
    })
    
    function money () {
        var price=$('.add').parent().next();
        var num= $('.add').prev();
        var xiaoji = $('.xiaoji');
        var sum = 0.0;
        for (var i=0;i<price.length;i++) {
            var price1 = parseFloat(price.eq(i).text());
            var num1 = parseFloat(num.eq(i).val());
        //    alert(price1*num1)
            xiaoji.eq(i).text((price1*num1).toFixed(2))
            sum+=price1*num1;
        }
        $('.total').text(sum.toFixed(2));
    }
    </script>
</head>
<body>  
</body>
</html>
  • 写回答

1条回答 默认 最新

  • 你好！机器人 2021-11-29 09:57
    关注

    宽度用百分比，字体大小用rem(可以了解下flexible.js)，你也可以用媒介查询@media

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 12月7日
  • 已采纳回答 11月29日
  • 创建了问题 11月29日

悬赏问题

  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料