濮阳租房网:前端条记(使用htmlcssjquery造n*n的格子,凭据预算购买到最多的商品)

admin 1个月前 (09-24) 科技 47 1

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

 

,

申博Sunbet

申博Sunbet www.sunbet.xyz是Sunbet指定的Sunbet官网,Sunbet提供Sunbet(Sunbet)、Sunbet、申博代理合作等业务。

Sunbet声明:该文看法仅代表作者自己,与本平台无关。转载请注明:濮阳租房网:前端条记(使用htmlcssjquery造n*n的格子,凭据预算购买到最多的商品)

网友评论

  • (*)

最新评论

  • 环球UG官网开户网址 2020-09-24 00:11:49 回复

    联博以太坊www.326681.com采用以太坊区块链高度哈希值作为统计数据,联博以太坊统计数据开源、公平、无任何作弊可能性。联博统计免费提供API接口,支持多语言接入。冲冲冲,上热门!!!

    1

文章归档

站点信息

  • 文章总数:642
  • 页面总数:0
  • 分类总数:8
  • 标签总数:1010
  • 评论总数:267
  • 浏览总数:7544