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

前端笔记(使用html\css\jquery造n*n的格子,根据预算购买到最多的商品)的更多相关文章

  1. 前端笔记 (2.CSS)

    知识点借鉴于慕课网,菜鸟教程和w3shool CSS方面: CSS全称为“层叠样式表”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 使用CSS样式的一个好处是通过 ...

  2. 前端笔记二:CSS盒模型

    1.标准模型和IE模型 2.标准模型和IE模型的区别 标准模型的height和width只是content的: IE模型的height和width是包含padding和border的 3.CSS如何设 ...

  3. 新手前端笔记之--初识css

    css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签), ...

  4. 前端笔记(关于css盒模型知识整理)

    我以前整理的文章可能也不是特别深入.所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的. 废话不多说,我们现在开始. 说到css盒模型,这是大多面试基础中会经常 ...

  5. 2.前端笔记之css

    title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...

  6. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  7. 1.前端笔记之html

    title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...

  8. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  9. 写给后端的前端笔记:浮动(float)布局

    写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...

随机推荐

  1. Spring Boot从入门到精通(八)日志管理实现和配置信息分析

    Spring Boot对日志的处理,与平时我们处理日志的方式完全一致,它为Java Util Logging.Log4J2和Logback提供了默认配置.对于每种日志都预先配置使用控制台输出和可选的文 ...

  2. 什么是容器,什么是Docker?

    此文转载自http://www.cnblogs.com/CloudMan6/p/6751516.html行文时有所改动 什么是容器?什么是Docker? 容器是一种轻量级.可移植.自包含的软件打包技术 ...

  3. mysql实现读写分离

    MySQL读写分离概述 1.读写分离介绍 对于目前单机运行MySQL服务.会导致MySQL连接数过多.最终导致mysql的宕机.因此可以使用多台MySQL服务器一起承担压力.考虑到项目中读写比例的不一 ...

  4. scrapy启动

    创建项目 在开始爬取之前,您必须创建一个新的Scrapy项目. 进入您打算存储代码的目录中,运行下列命令: scrapy startproject scrapytest 第一种scrapy gensp ...

  5. docker的安装,自己写了一个安装docker的脚本,辅助做docker安装的实验(ubuntu)

    #!/bin/bash #获取用户名 [ pwd == '/root' ] && hn="root@$(hostname):~#" || hn="root ...

  6. 利用JDBC工具类添加和查询数据-Java(新手)

    JDBC工具类: 1 package cn.lxr.jdbclx; 2 3 import java.sql.*; 4 5 public class JDBCUtils { 6 private stat ...

  7. [组件封装]微信小程序-日历

    描述 切换月份, 当天文案为今天, 日期背景变色, 日期红点标识, 点击选中日期. 效果 源码 calendar.wxml <view class="component"&g ...

  8. demo26-路径

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. java获取近几天的日期

    最近在写接口的时候老遇见从mysql中获取近几天数据的需求,获取日期这块不是很熟,网上看了很多但是代码量都太大,还是问了下别人,写了三行代码就解决了,不多说 贴代码了 下面是我获取近十天,每天的日期: ...

  10. mac下 yarn Stack trace: ExitCodeException exitCode=127

    问题出在hadoop 为mac系统配置的读取java_home处. 更改 /Users/shaofengfeng/apache/hadoop/libexec/hadoop-config.sh 如下 # ...