前端筆記（使用html\css\jquery造n*n的格子，根據預算購買到最多的商品）

需求：建立一個n*n的格子，n是輸入框的數字，點擊重渲染能夠從新畫一個n*n的格子，鼠標移入格子中，對應的格子背景設變成紅色，點擊對應的格子，背景色變成藍色，再點一次還原顏色。

 

要造格子有好幾種方式，能夠用table、ul和li，或者直接使用徹底的div

這裏爲了方便理解，我使用ul和li。

定義html：

box用於渲染格子

<div class="box"></div>
<div>
    <input type="text" value="10" id="num">
    <input type="button" onclick="render()" value="重渲染">
</div>

css：

這裏咱們使用ul加flex，讓li平分，list-style-type:none;去除li的默認點，li:hover定義鼠標移入時的樣式，定義.blue做爲樣式渲染

.div{
    height: 100%;
}
.box ul{
    display: flex;
    margin: 0;
}
.box ul li{
    width: 10px;
    height: 10px;
    border: 1px solid #000;
    list-style-type:none;
}
li:hover{
    background-color: red;
}
li.blue{
    background-color: blue;
}

js：

ul與li的建立使用數組的join轉字符串

{
    function render(){
        let num=$("#num").val()//定幾*幾格子
        let ul=[],li=[]
        for(let i=0;i<num;i++){
            li.push(`<li></li>`)
        }
        li=li.join("")//li的dom
        for(let i=0;i<num;i++){
            ul.push(`<ul>${li}</ul>`)
        }
        ul=ul.join("")//ul的dom
        $(".box").html(ul)
        $("li").click(function(){//點擊格子
            let isBlue=$(this).hasClass("blue")
            if(isBlue){
                $(this).removeClass("blue")
            }else{
                $(this).addClass("blue")
            }
        })
    }
    render()
}

 

 

需求：根據全部的商品單價(元)，和你的預算(元)，指定一個儘量買得多的商品的方案

 

思路是 先將全部商品的價格按從小到大排序起來，設置這個預算值初始爲0，從最便宜的開始買，每買一個就加上當前的價格，直到超出預算，那超出前的那次就是最好的購買方式。

html:

<div>
    預算：<input type="text" id="ys" value="200"><br>
    商品價格：<input type="text" id="jg" value="50 30 40 55 242 21"><br>
    <input type="button" value="計算" onclick="js()"><br>
    結果：<span id="res"></span>
</div>

js:

使用sort進行數值排序，使用split將字符串拆分紅數組，使用join將數組轉化爲字符串

{
    function js(){
        let ys=$("#ys").val(),jg=$("#jg").val()
        let res=0,km=[]//須要金額 可買
        let arr=jg.split(" ")
        arr.sort((a,b)=>a-b)
        for(let i=0;i<arr.length;i++){
            res+=Number(arr[i])
            console.log(res)
            if(res > Number(ys)){
                res-=Number(arr[i])
                break
            }
            km.push(Number(arr[i]))
        }
        console.log(res,km)
        $("#res").text(`須要金額：${res}，可買物品：${km.join(" ")}`)
    }
}