js案例
关注
分享
扫一扫
文章平均质量分 96
蒲公英芽
这个世界没有原地踏步的说法，你不进步，便只有倒退。
展开
-
vue项目使用canvas画图 实现canvas带背景的橡皮擦 canvas转base64 canvas转file文件方法
用户手动在画板上进行绘制图案，绘制完成后，将绘制好的作品上传到服务器。涉及到的功能点：1. 项目的运行环境是在手机端，canvas 的尺寸单位是px，需要做好不同设备的适配。2. 选择画笔颜色、大小后，笔触要跟随手指的移动画出图案。3. 画板的橡皮擦功能，带有背景图片的canvas，实现橡皮擦功能。4.canvas的一键清除画布功能。5. 上传图片到服务器，将用户画好的作品上传到服务器。原创 2022-11-01 01:07:08 · 8192 阅读 · 2 评论 -
vue项目中使用Js判断图片是否加载完 所有图片加载完成前展示Loading效果
vue项目中使用Js判断图片是否加载完 所有图片加载完成前展示Loading效果。用户创建自己的页面，给创建好的内容页面增加皮肤效果。选择某一皮肤后，当该皮肤中的所有图片都加载完后，再展示皮肤效果；加载图片的时候展示loading效果。原创 2020-11-14 16:23:13 · 5842 阅读 · 0 评论 -
js实现一个函数，将200元红包金额随机分成n份
实现一个函数，将200元红包金额随机分成n份。用到四个变量：res，最后返回的金额数组range，每次生成随机金额的范围preTotal，已经生成的金额的和item，每次生成的随机金额每次生成随机金额后，从范围内减去已经生成的金额，并将该金额添加到preTotal中，循环完成后，用total减去preTotal，计算最后一个数，并添加到结果数组中返回出来。function getRandomNum(n, total) { var res = []; //最后返回的数组原创 2020-06-19 09:07:53 · 5912 阅读 · 2 评论 -
js实现将一个二维数组转换成树结构
用js实现将一个二维数组转换成树结构。例如：将下面的二维数组：var arr = [ ["a", "aa", "aaa", "aaaa"], ["b", "bb", "bbb"], ["a", "ab", "aba"], ["a", "aa", "aab"]]转成下面树结构的对象数组：[{ "name" : "a", "child" : [ { "name" : "aa", "chil原创 2020-06-18 23:01:32 · 3540 阅读 · 2 评论 -
javascript 使用set/get 实现单选 多选按钮组件开发
单选 多选按钮功能需求：自定义按钮图标样式；多选按钮单击显示选中状态，再次单击显示非选中状态；多选按钮可选择多项；单选按钮单击显示选中状态，当点击别的单选按钮时，点击的单选按钮显示选中状态，当前按钮显示非选中状态；多选效果：单选效果：分析：单选按钮功能是在多选按钮的基础上实现的，所以使用类的继承来写。set/get 的使用，可以看作是把对变量的操作执行写在了set 函...原创 2020-02-19 19:58:11 · 560 阅读 · 0 评论 -
原生js实现购物车添加删除商品、计算价格功能
购物车功能需求：根据数据创建购物车内容；实现购物车添加商品功能；实现购物车商品数量的增加、减少；实现购物车商品的删除功能；购物车的全选功能；底部计算总件数、总价；看一下效果：分析：分了三个文件来写，GoodsList.js，用来创建商品列表；ShoppingCart.js，用来创建购物车内容，StepNumber.js，用来创建购物车中，操作商品数量的组件。要分清各个...原创 2020-02-05 17:50:32 · 13774 阅读 · 2 评论 -
原生js实现放大镜组件开发
放大镜组件功能需求：根据图片数组创建图标列表；鼠标滑过图标时，当前图标增加红色边框；鼠标滑过图标时，上方图片区域显示对应的图片，右侧显示放大后的图片内容；鼠标在图片区域移动时，在右侧实现放大效果；下方图标列表，点击左右按钮，实现翻页效果；当图标内容不够一页时，只移动到最后一个图标的位置；以京东的详情页为例，看一下效果：放大镜内容写在 Zoom.js 文件里，下方的图标列表内...原创 2020-02-03 17:31:06 · 425 阅读 · 0 评论 -
原生js实现图片轮播组件开发
轮播图功能需求：默认每间隔3s，图片自动轮播一次；点击左右按钮，实现图片的无缝轮播；点击下方小圆点，实现图片的无缝轮播；可以自定义各轮播图尺寸；当缩放浏览器窗口时，轮播图尺寸随之改变；看一下效果：分析：为了有更好的效果，将图片预加载完成后，再进行图片轮播；因为使用插入css样式来写，Carousel.styles 只执行一次，不能实现多个不同尺寸的轮播图，所以轮播图的宽...原创 2020-02-02 13:52:41 · 779 阅读 · 0 评论 -
原生js实现下拉框选择组件开发
下拉框选择功能需求：点击div后，div显示聚集状态，同时显示隐藏框内容；选择儿童人数后，如果儿童人数大于0，在下方出现对应的儿童年龄选择框数量；成人人数的选择范围是1-7，儿童人数的选择范围是0-4，儿童年龄的选择范围是<1、1-17；点击确认按钮后，将选择好的成人人数和儿童人数显示在最上方的div内；可以控制选择框是否可点击；当显示一个ul列表时，点击另一个ul列表，将上...原创 2020-01-30 10:03:38 · 2302 阅读 · 0 评论 -
原生js实现分页组件开发（一）
原生js实现分页组件功能需求：根据数组内容，按照每页显示固定数量的内容，完成翻页效果；当显示第一页时，上一页按钮不能点击；当显示最后一页时，下一页按钮不能点击。分析：- 因为页码是自动创建的，无法对页码元素进行事件监听，只能使用事件委托来做；- 当点击页码后，要考虑三个操作，一是页码的显示状态，二是页面中内容的显示，三是上一页按钮跟下一页按钮的显示状态和点击状态；- 点击页码后，先将页面中的内容清除，再放入新的内容；- 由于使用了事件委托机制，在点击的时候，需要确定当前操作的元素是页码还是原创 2020-01-28 14:11:45 · 2060 阅读 · 1 评论 -
原生js实现滑块区间组件开发
滑块区间组件功能需求：按照给定的最大值和最小值，生成区间范围，拖动滑块移动时，显示相应的范围区间；点击时，使最近的滑块移动到鼠标点击的位置。分析：- 首先布局要写好，一共有4个元素，两个滑块和两个滑块条。布局时要考虑到后期对滑块和滑块条进行事件监听，尽可能少地出现事件冒泡；- 拖动滑块时，要区分是左边的滑块还是右边的滑块；- 鼠标的click事件和mousedown事件要兼容好，这里统一使用的是mousedown事件；- 滑块条的显示就很简单了，宽度是左、右滑块的定位差值，left值是左滑块的l原创 2020-01-28 13:35:15 · 1634 阅读 · 0 评论 -
原生js实现商品列表组件开发
原生js实现商品列表组件开发功能需求：根据数据创建商品列表来看一下效果：没有太多的逻辑，主要是css的部分。html结构：模拟商品数据，根据数据实例化Main对象。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...原创 2020-01-28 13:15:25 · 3044 阅读 · 0 评论 -
原生js实现满屏图标轮播图，自定义图标显示数量
原生js实现满屏图标轮播图，自定义图标显示数量。功能需求： 1. 根据图标的数量自动生成页面内容； 2. 随着浏览器窗口的缩放，使页面内容自动缩放； 3. 完成图标按钮的轮播图； 4. 扩展：可以自定义展示每页、每行的图标数量；窗口缩放时，页面内容自动缩放，可以考虑使用百分比或者rem单位来布局。创建分页面时，要考虑到数据的总长度，如果每次显示18个图标，一共有30条数据，则第二页只有12个图标；要考虑到当第一次打开页面时，浏览器的比例可能不是屏幕的比例，如果是rem布局的话，需要原创 2020-01-28 13:07:40 · 1407 阅读 · 0 评论 -
原生js实现自定义滚动条组件开发
原生js实现自定义滚动条组件开发功能需求： 1. 按照数据结构创建菜单内容，显示在页面中； 2. 点击一级菜单后，显示对应的二级菜单内容，如果整体内容溢出，则出现滚动条； 3. 滚动条的高度要随着整体内容高度的改变而改变。 4. 鼠标拖动滚动条，整体内容要随着向上滚动。- 这个案例中包括折叠菜单和滚动条两个组件 ，所以可以分开来写，然后整合到一起。- 折叠菜单中要考虑多级菜单出现的情况，使用递归来做，数据的结构一定要统一，方便对数据进行处理。- 滚动条的创建中，有两个比例等式，一是**滚动条原创 2020-01-28 12:50:27 · 1121 阅读 · 2 评论 -
原生js实现折叠菜单组件开发
纯js实现折叠菜单组件开发。功能需求： 1. 根据数据内容创建折叠菜单内容，显示在页面中； 2. 点击一级菜单，如果点击的一级菜单下有对应的子菜单，则让其展开；如果没有子菜单，则不能点击； 3. 要考虑到三级菜单、四级菜单....的显示；因为不确定一共有几级菜单，考虑到多级菜单出现的情况，可以使用递归回调函数；数据结构一定要统一，方便对数据进行操作。原创 2020-01-28 11:32:18 · 1220 阅读 · 0 评论 -
原生js实现拼图效果
原生js实现拼图效果需求：每次刷新页面后，右侧容器内会随机排列碎片图片，鼠标按下拖动到左侧，在正确坐标一定范围内，图片会自动吸附过去，放好的碎片不能再进行拖动。原创 2020-01-13 19:17:43 · 1361 阅读 · 0 评论 -
图片预加载 addEventListener 侦听事件和 callback 回调函数的区别
前言侦听事件和回调函数都可以实现对函数的执行，我们用图片预加载来分析 addEventListener 和 callback 的区别。需求：页面中需要加载大量图片，当图片按顺序加载完后执行对应的操作。分析：大量图片，肯定会涉及到数组遍历，但遍历是同步的，load加载事件是异步的，需要考虑每次遍历的时候加载一张图片避免出现回调地狱，尽可能少创建图片对象每张图片的大小不一样，加载时间也不...原创 2020-01-09 11:06:06 · 1552 阅读 · 0 评论 -
js实现倒计时效果
本文提供两种方法实现倒计时的效果获取到需要倒计时的时间毫秒数，用定时器让这个数字每一秒减1，将毫秒数显示在页面中。通过需要倒计时的时间毫秒数，计算出当前时间加上倒计时时间的未来时间，通过定时器计算这两个的时间差，显示在页面中。先来看最终的效果：页面布局代码：<input type="text"> 时<input type="text"> 分<inp...原创 2020-01-02 19:17:00 · 854 阅读 · 0 评论