前端笔记(使用html\css\jquery造n*n的格子,根据预算购买到最多的商品)
需求:创建一个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的格子,根据预算购买到最多的商品)的更多相关文章
- 前端笔记 (2.CSS)
知识点借鉴于慕课网,菜鸟教程和w3shool CSS方面: CSS全称为“层叠样式表”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 使用CSS样式的一个好处是通过 ...
- 前端笔记二:CSS盒模型
1.标准模型和IE模型 2.标准模型和IE模型的区别 标准模型的height和width只是content的: IE模型的height和width是包含padding和border的 3.CSS如何设 ...
- 新手前端笔记之--初识css
css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签), ...
- 前端笔记(关于css盒模型知识整理)
我以前整理的文章可能也不是特别深入.所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的. 废话不多说,我们现在开始. 说到css盒模型,这是大多面试基础中会经常 ...
- 2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
- 使用 CSS & jQuery 制作一款漂亮的多彩时钟
大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...
- 1.前端笔记之html
title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...
- Java程序猿JavaScript学习笔记(14——扩大jQuery UI)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- 写给后端的前端笔记:浮动(float)布局
写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...
随机推荐
- 一起了解 .Net Foundation 项目 No.18
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Protobuild Pr ...
- OpenWrt tcpdump 抓包
路由器用的是 网件的 4300 刷的是石像鬼双固件 1, 安装支持库opkg updateopkg install libpcapopkg install tcpdump 2, 设置条件开始捕获tcp ...
- 复制图片链接和标题生成Markdown文本
写Markdown的时候常常会需要复制图片链接和标题以插入图片,不借助其他工具的话,一般需要先在Markdown文件中输入插入图片的格式,然后在浏览器中复制图片链接和标题将其依次粘贴到Markdown ...
- C语言程序设计(十一) 指针和数组
第十一章 指针和数组 一旦给出数组的定义,编译系统就会为其在内存中分配固定的存储单元,相应的,数组的首地址也就确定了 C语言中的数组名有特殊的含义,它代表存放数组元素的连续存储空间的首地址 //L11 ...
- Vue2.0 【第一季】第3节 v-for指令:解决模板循环问题
目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...
- 解决idea的pom.xml文件不自动导包问题
在用pom添加新项目的包时,突然发现pom文件不能自动导包,找了半天发现用以下两个步骤就能解决: 一:打开setting 二:找到maven
- Java学习笔记(2)——有关类
Java类的高级特性: {Java管理文件机制:类包. 同一个包中的类互相访问时,可以不指定包名. 同一个包中的类不必存放在同一位置,如com.lang.class1和com.lang.class2可 ...
- git提交更改都是一个作者
为什么提交到github的commit都是一个作者 参考链接 重要知识点讲解 问题如下所示 git是分布式去中心化的管理系统 ssh秘钥对生成.并把id_rsa.pub加入github.com中(这个 ...
- 深入分析mysql为什么不推荐使用uuid或者雪花id作为主键
前言:在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建 ...
- I2C的基本概念和协议
概念 I2C总线是由Philips公司开发的一种简单.双向二线制同步串行总线.它只需要两根线即可在连接于总线上的器件之间传送信息. 主器件用于启动总线传送数据,并产生时钟以开放传送的器件,此时任 ...