需求:创建一个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(" ")}`)
}
}