
案例
文章平均质量分 72
Henry_ww
这个作者很懒,什么都没留下…
展开
-
Ajax - 案例 - 英雄信息列表
a原创 2021-09-06 15:02:53 · 549 阅读 · 0 评论 -
JavaScript - WebAPI - 案例 - 点名系统/打地鼠/计时器/今日代办
点名系统<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>点名系统</title> <style type="text/css"> * { font-family: "微软雅黑"; /*transition-duration: ;*/ }原创 2021-08-19 21:28:22 · 548 阅读 · 0 评论 -
JavaScript - WebAPI - 案例 - 盒子拖拽
1.1-拖拽盒子 - 基本流程思路分析本小节知识点:鼠标拖拽复习鼠标事件:onclick:鼠标点下去并且弹起来触发(单击一次)ondblclick:鼠标连续点击两次(双击)onmousedown:鼠标按下就触发onmouseup: 鼠标弹起触发onmouseover:鼠标移入onmouseout:鼠标移出onmousemove:鼠标移动鼠标拖拽:(1)先按下 (2)然后移动 (3)最后松开<!DOCTYPE html><html lang="zh-C原创 2021-08-19 19:16:58 · 907 阅读 · 6 评论 -
JavaScript - WebAPI - 定时器 - 案例 - 京东倒计时秒杀
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-17 14:53:57 · 335 阅读 · 0 评论 -
JavaScript - WebAPI - 事件对象 - 案例 - 放大镜
需求分析1.小图片鼠标移入时:出现遮罩层,并将遮罩部分放大在右边显示2.小图片鼠标移动时:遮罩层与大图片相应移动2.1:鼠标在遮罩层中心位置2.2:遮罩层边界检测,遮罩层不能超出图片范围2.3:遮罩层与大图片相应移动 假如 遮罩层大小50px 50px 大图片100px 100px,那么每当遮罩层鼠标移动1px,大图片应该移动2px。(100/50)3.小图片鼠标移出时:遮罩层与大图片隐藏<!DOCTYPE html><html lang="en"> .原创 2021-08-14 20:24:16 · 160 阅读 · 0 评论 -
JavaScript - WebAPI - 事件对象 - 案例 - 天使跟随
需求分析:移动鼠标,改变图片的位置思路分析:1.监听鼠标在网页的移动事件 网页:window 鼠标移动:onmousemove2.让图片的位置与事件对象的触发点位置一直 界面元素定位 相对于 页面的左上角距离<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatib.原创 2021-08-14 20:20:14 · 117 阅读 · 0 评论 -
JavaScript -WebAPI - 案例 - 轮播图动画函数封装
1原创 2021-08-14 20:08:34 · 140 阅读 · 0 评论 -
JavaScript - WebAPI - 滚动家族 - scroll家族 - 案例 - 固定导航栏
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-14 13:55:54 · 137 阅读 · 0 评论 -
JavaScript - WebAPI - 动画 - 案例 - 360开机动画隐藏
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-14 13:49:45 · 183 阅读 · 0 评论 -
JavaScript - WebAPI - 动画 - 案例 - 手风琴图
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-14 13:47:46 · 226 阅读 · 0 评论 -
JavaScript - WebAPI - offset家族 - 案例 - 点击盒子向右移动
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-11 20:57:10 · 274 阅读 · 0 评论 -
JavaScript - WebAPI - 本地存储 - 案例 - 登陆提交信息
提交<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /原创 2021-08-11 20:53:18 · 165 阅读 · 0 评论 -
JavaScript -webAPI - DOM操作 - 案例 -仿百度搜索
案例:模拟百度搜索框需求分析:1.键盘松开txt : 根据搜索内容显示对应搜索列表ul2.鼠标移入li元素:颜色变红3.鼠标移出li元素:颜色变原先颜色4.鼠标点击li元素: (1)搜索框显示点击的li元素文本 (2)情况内容列表ul思路分析:事件三要素1 获取元素:2 注册事件:3 事件处理:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /原创 2021-08-10 22:33:20 · 160 阅读 · 0 评论 -
JavaScript -webAPI - DOM操作 - 案例 - 监听输入框值的变化
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-10 22:30:16 · 229 阅读 · 0 评论 -
JavaScript - webAPI - DOM节点 - 案例 - 关闭二维码
需求:点击二维码图片右上角的小叉叉,关闭二维码思路:给子元素添加一个点击事件,点击之后移除父元素<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" .原创 2021-08-10 22:20:40 · 214 阅读 · 0 评论 -
JavaScript - WebAPI - 案例 - location对象 - 验证用户信息跳转网页
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-10 20:44:30 · 163 阅读 · 0 评论 -
JavaScript -WebAPI - 案例 - Tab栏切换
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g.原创 2021-08-09 10:27:29 · 176 阅读 · 0 评论 -
JavaScript - WebAPI - 属性补充 - 案例 - attributes系列 - 京东商品展示
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-09 10:21:58 · 124 阅读 · 0 评论 -
JavaScript -WebAPI - 属性补充 - 案例 - attributes系列 - 隔行变色
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-09 10:19:54 · 113 阅读 · 0 评论 -
JavaScript - WebAPI - 排他思想 - 案例 - 筋斗云
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-09 10:08:34 · 138 阅读 · 0 评论 -
JavaScript - WebAPI - 案例 - 点餐系统
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-09 10:03:05 · 670 阅读 · 0 评论 -
JavaScript - WebAPI - 案例 - 二维码显示和隐藏
二维码显示和隐藏需求分析:鼠标移入小盒子:显示大盒子,设置大盒子display属性为block鼠标移出小盒子:隐藏大盒子,设置大盒子display属性为none思路分析:事件三要素1 获取元素:2 注册事件:3 事件处理:在这里插入代码片...原创 2021-08-07 17:31:24 · 398 阅读 · 0 评论 -
JavaScript - WebAPI - 案例 - 按钮禁用表单事件
按钮禁用表单事件需求分析:1.点击启用:设置所有的表单元素distabled属性false2.点击禁用:设置所有的表单元素distabled属性true思路分析:事件三要素1 获取元素:2 注册事件:3 事件处理:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compat原创 2021-08-07 17:06:00 · 254 阅读 · 0 评论 -
JavaScript - WebAPI - 案例 - 开关灯
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2021-08-07 16:39:39 · 273 阅读 · 0 评论 -
响应式布局 bootstrap栅格系统
阿里百秀案例制作3.1 技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图: 本设计图采用 1280px 设计尺寸项目结构搭建Bootstrap 使用四步曲:创建文件夹结构创建 html 骨架结构引入相关样式文件书写内容...原创 2021-07-26 15:26:31 · 498 阅读 · 0 评论 -
案例 - 购物车
4. 案例 - 购物车4.0 案例-购物车-项目初始化目标: 初始化新项目, 清空不要的东西, 下载bootstrap库, 下载less模块vue create shopcaryarn add bootstrapyarn add less less-loader@5.0.0 -D图示:按照需求, 把项目页面拆分成几个组件, 在components下创建MyHeader组件MyFooter组件MyGoods组件 - 商品MyCount组件然后引入到原创 2021-07-22 16:42:32 · 879 阅读 · 7 评论 -
案例:todo
根据已有的文件让vue文件跑起来怎么做?1.根据已有的 package.json 下依赖包 yarn install / yarn(可以省略 install)完成todo案例完整效果演示todo案例-创建工程和组件目标: 新建工程, 准备好所需的一切需求1: 创建新工程需求2: 分组件创建 – 准备标签和样式分析: ①:初始化todo工程 ②:创建3个组件和里面代码 ③:把styles的样式文件准备好 ④: App.vue引入注册使用, 最外层容器类原创 2021-07-19 12:16:41 · 735 阅读 · 5 评论 -
案例-品牌管理(数据缓存)侦听器-watch
案例-品牌管理(数据缓存)目标: 侦听list变化, 同步到浏览器本地需求: 把品牌管理的数据实时同步到本地缓存分析: ① 在watch侦听list变化的时候, 把最新的数组list转成JSON字符串存入到localStorage本地 ② data里默认把list变量从本地取值, 如果取不到给个默认的空数组效果: 新增/删除 – 刷新页面 – 数据还在在之前的案例代码基础上接着写 // 定义过滤器结构 filters: { shijian:(val) =&g原创 2021-07-12 12:01:56 · 185 阅读 · 0 评论 -
computed 案例-反选
案例-反选目标: 反选功能需求: 点击反选, 让所有小选框, 各自取相反勾选状态分析:①: 小选框的勾选状态, 在对象的c属性②: 遍历所有对象, 把对象的c属性取相反值赋予回去即可图示:methods:{ btn(){ // 遍历所有对象,吧对象的c属性取相反值赋予回去即可 this.arr.forEach(item=>item.c = !item.c) }}<template> <div>原创 2021-07-12 10:44:18 · 151 阅读 · 0 评论 -
computed 案例-全选影响小选
案例-全选影响小选目标: 全选影响小选需求1: 获取到全选状态 – 改装isAll计算属性需求2: 全选状态同步给所有小选框分析:①: isAll改成完整写法, set里获取到全选框, 勾选的状态值②: 遍历数据数组, 赋给所有小选框v-model关联的属性图示:<template> <div> <span>全选:</span> <input v-model="isAll" type="checkbox"/&原创 2021-07-12 10:36:23 · 143 阅读 · 0 评论 -
computed 案例-小选影响全选
案例-小选影响全选目标: 小选框都选中(手选), 全选自动选中需求: 小选框都选中(手选), 全选自动选中分析:① 先静态后动态, 拿到静态标签和数据② 循环生成复选框和文字, 对象的c属性和小选框的选中状态, 用v-model双向绑定③ 定义isAll计算属性, 值通过小选框们统计c属性状态得来图示:模板标签和数据(直接复制在这基础上写vue代码)<template> <div> <span>全选:</span>原创 2021-07-12 10:18:33 · 207 阅读 · 0 评论 -
vue案例-品牌管理(总价和均价)
案例-品牌管理(总价和均价)目标: 基于之前的案例, 完成总价和均价的计算效果此处只修改了变化的代码<tr style="background-color: #EEE"> <td>统计:</td> <td colspan="2">总价钱为: {{ allPrice }}</td> <td colspan="2">平均价: {{ avgPrice }}</td></tr>原创 2021-07-12 09:14:29 · 226 阅读 · 0 评论 -
vue案例:-品牌管理(时间格式化)
案例-品牌管理(时间格式化)目标: 复制上个案例, 在此基础上, 把表格里的时间用过滤器+moment模块, 格式化成YYYY-MM-DD 格式图示:下载moment处理日期的第三方工具模块moment官网文档: http://momentjs.cn/docs/#/displaying/yarn add moment引入定义过滤器, 把时间用moment模块格式化, 返回我们想要的格式<script>import 'bootstrap/dist/css原创 2021-07-11 16:46:27 · 109 阅读 · 0 评论 -
vue案例:品牌管理
案例-品牌管理(铺)目标: 数据铺设需求1: 把默认数据显示到表格上需求2: 注意资产超过100的, 都用红色字体标记出来细节: ① 先铺设静态页面 — 去.md文档里, 复制数据和标签模板 ② 此案例使用bootstrap, 需要下载, 并导入到工程main.js中 ③ 用v-for配合默认数据, 把数据默认铺设到表格上显示 ④ 直接在标签上, 大于100价格, 动态设置red类名图示:因为案例使用了bootstrap, 工程化开发, 模块化用npm/yarn下载引原创 2021-07-11 15:46:11 · 393 阅读 · 0 评论