JS高级案例
关注
分享
扫一扫
Jyann~
要坚信，人生所有走过的路,都不会白走
展开
-
九九乘法表（br换行/position定位实现）
方法一：<br>标签实现，br换行方式需要设置div样式：display: inline-block;因为div默认会换行显示注意：innerHTML方法不要子在for循环中循环使用，可以使用变量str接收所有需要生成的HTML内容，再在for循环外一次调用innerHTML。innerHTML属于DOM操作，调用太多次会出现性能问题。<!DOCTYPE html>...原创 2019-07-05 10:32:17 · 982 阅读 · 0 评论 -
商品下架
模拟商品下架动画：一开始设置默认到期时间，也可以自定义到期时间进行倒计时，到期后，执行下架动画，生成下架商品列表。原创 2019-08-14 11:44:39 · 259 阅读 · 0 评论 -
3D滚动幻灯片
思路：1,实现一个6面体：使用手动方式实现一个li，li下通过css transform实现一个6面体2,实现多个6面体：通过JS方式计算总宽高和li的宽高，实现多个6面体3,JS中写CSS样式：实现所有6面体背景图位置4,调整距离：给li整体移动translateZ -180，使其和原始图片大小保持一致5,设置点击事件：动画是在整理ul上进行，使用定时器让所有li间隔翻转...原创 2019-08-19 15:19:49 · 261 阅读 · 0 评论 -
3D幻灯片（带动画层级）
3D幻灯片思路及步骤：生成3D盒子（计算层/行/列）； 坐标计算：分配各个各自的相应坐标； 添加每层盒子的背景图（最上面一层四个面不同背景），修复缝隙； 入场动画初始化； 入场动画； 添加切换动画； 添加第二种切换方式； 添加第三种切换方式； 自动播放...原创 2019-08-20 12:55:17 · 177 阅读 · 0 评论 -
旋转div
需求：一个div围绕另一个div旋转首先让要旋转的div本身先位移，再进行旋转；元素 translate 移动之后，并不修改元素本身的变换源点；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co...原创 2019-08-15 11:32:23 · 3032 阅读 · 0 评论 -
3D盒子
思路：元素 translate 移动之后，并不修改元素本身的变换源点。所以可以给每个面先translate相同距离，再按各个面进行旋转，就能得到一个立方体。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"...原创 2019-08-15 14:51:56 · 218 阅读 · 0 评论 -
韩雪冬效果图片切换
思路：因为图片原本的width是写死的，需要动态获取并设置图片的width占据100%; 通过数组存储所有的动画效果：这里数组存储的是各个li的初始化样式，[{width: 0,left:0,zIndex:0,opacity : 0,top:0；}]，数组里存储的是一个个对象； 通过切换时，切换的是数组中样式，而图片本身顺序不变； 添加上一张，下一张及按钮悬浮动画（使用mTween...原创 2019-08-16 10:15:14 · 434 阅读 · 0 评论 -
鼠标拖动生成画框
需求：鼠标按下拖动生成一个画框注意点：div 的left和top：如果鼠标当前位置>鼠标起始位置，则为鼠标起始位置（鼠标往右拉）；如果鼠标当前位置<鼠标起始位置，则为鼠标当前位置(鼠标往左拉)； 通过当前坐标x/y-鼠标起始坐标x/y得到要生成的div的宽度 ，如果往左拉，鼠标当前坐标-起始坐标可能为负数，所以，需要使用绝对值函数Math.abs()； 鼠标按下移动时动态获...原创 2019-08-16 10:48:44 · 2541 阅读 · 1 评论 -
鼠标拖动画框选中并添加到另一个div效果
需求：鼠标按下后，显示div用于放置所有的li；当鼠标框选住li，并抬起鼠标时，所有的li放进div中思路：先移动鼠标生成画框； 将生成的画框和已有的li进行碰撞，如果碰到了，就设置active，没有就清除active； 在鼠标放开时，找到所有为active的li，将其appendChild进div中问题：不能直接碰撞时，直接appendChild到div中，会将后面的li全部添...原创 2019-08-16 17:02:26 · 873 阅读 · 0 评论 -
两种思路实现无缝滚动幻灯片
1.无缝滚动幻灯片思路一无缝滚动幻灯片思路一：每次图片切换到最后一张再进行点击时，就没有图片了； 所以加一张图片和第一张图片一样，也就是第二组第一张图片（实际就是加完图片后的最后一张）； 每次点击到这张图片时，将图片的索引序号瞬间切换到第一张（设置等于第一张的序号），因为图片一样的所以形成无缝的感觉 重点:切换图片索引序号时，必须同时切换图片的位置 注意这里的navs.length...原创 2019-08-01 17:32:08 · 810 阅读 · 0 评论 -
渐隐渐现幻灯片
需求：让幻灯片切换时有动画过渡效果每个li都绝对定位到一个位置，通过opacity和z-index层级操作其显示，通过transition:1s linear;生成动画过渡效果.picList li { position: absolute; left: 0; top: 0; opacity:...原创 2019-07-25 17:48:05 · 184 阅读 · 0 评论 -
京东简易幻灯片banner图
实现简易京东banner图，上下页切换，圆点切换制作，圆点缩略图制作，圆点缩略图切换，点击圆点及缩略图时同时切换banner/页码备注文字等。技术：导航栏及圆点制作，绑定事件，for循环，数组，三目运算符，自定义索引，定时器，绑定事件中this上下文指向。1.html结构<!DOCTYPE html><html lang="en"><head>...原创 2019-07-05 10:43:27 · 484 阅读 · 0 评论 -
下拉菜单制作
通过开关（自定义状态）记录下拉菜单的展合：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-07-05 10:49:39 · 1197 阅读 · 0 评论 -
简易微信聊天
简易微信聊天：可切换聊天头像，不同头像显示在左右不同侧。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2019-07-05 10:52:59 · 365 阅读 · 0 评论 -
简易聊天
简易聊天：不断发送内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...原创 2019-07-05 10:55:23 · 238 阅读 · 0 评论 -
div遮罩层
实现遮盖层，使一部分区域不可点击编辑等。1.简易遮罩层一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, i...原创 2019-07-05 11:05:15 · 19676 阅读 · 0 评论 -
随机排序
需求：将所有图片及图片上的文字进行随机排序。思路：将图片地址，及图片文字全部存储到数组中（数组中存对象，放图片img和标题title）（真实情况一般都是从后端获取到的json对象），再通过JS将数据渲染到页面上 通过data.map()替换数组中每个值； 通过数组的join("")方法将数组分割成字符串; 将字符串通过innerHTML写到页面中； 点击按钮通过sort()方面进行...原创 2019-07-24 17:14:36 · 642 阅读 · 0 评论 -
文字查找和替换
思路：将文字拆分再拼接通过查找的字符串将整个字符串进行分割，返回数组 循环数组，并给查找的字符串加上高亮标签注意点：再拼接高亮标签时千万不要循环数组每一个去拼接，这样数组最后会多一位高亮标签。直接使用join()方法进行拼接，把要拼接的标签和字符放进去即可。<!doctype html><html lang="en"><head> &...原创 2019-07-24 22:54:12 · 336 阅读 · 0 评论 -
JS定时器：倒计时
1.思路及步骤：获取到当前系统时间并填入输入框中 可更改输入框中的时间，当点击倒计时时，获取输入框中更改后的时间，并将现在距离处的当前时间进行赋值 将输入的时间与当前时间相减得到两个时间的毫秒值 将获取到的毫秒值进行判断，如果小于或等于当前时间，需要提示不能开始倒计时 将毫秒值除以天得到的整数就是倒计时的天数，通过总时长取模天数剩余的时间即剩余的小时数，再除以分即为倒计时分钟数，以此类...原创 2019-07-21 14:06:27 · 3304 阅读 · 1 评论 -
div碰撞
需求：拖动两个元素，当四个边缘碰撞到时，div样式改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2019-08-16 17:35:11 · 608 阅读 · 0 评论