前端筆記(使用html\css\jquery造n*n的格子,根據預算購買到最多的商品)
摘要:i++){ ul.push(`
- ${li}
需求:創建一個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(" ")}`) } }