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

  • 2020 年 4 月 11 日
  • 筆記

需求：創建一個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(" ")}`)      }  }

 

Tags:

VirMach 便宜 VPS