![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
案例
kino2046
这个作者很懒,什么都没留下…
展开
-
案例:仿京东放大镜
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><meta...原创 2020-04-30 17:29:41 · 407 阅读 · 0 评论 -
案例:鼠标滚轮改变div高度
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e...原创 2020-04-30 17:29:36 · 484 阅读 · 0 评论 -
案例:鼠标拖拽
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahtt...原创 2020-04-30 17:29:33 · 309 阅读 · 0 评论 -
案例:键盘控制div位置缩放
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp...原创 2020-04-30 17:29:30 · 180 阅读 · 0 评论 -
案例:下拉菜单
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e...原创 2020-04-30 17:28:58 · 190 阅读 · 0 评论 -
案例:自定义一个右键菜单
(另一种笔记里找)自定义右键菜单-contextmenu右键菜单事件-e.preventDefault()/returnfalse阻止默认事件-e.clientX/e.clientY鼠标位置获取<!DOCTYPEhtml><htmllang="en"><head>&l...原创 2020-04-30 17:28:55 · 171 阅读 · 0 评论 -
案例:鼠标拖拽
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-C...原创 2020-04-30 17:28:52 · 117 阅读 · 0 评论 -
event案例:留言板-事件委托
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-C...原创 2020-04-30 17:28:48 · 150 阅读 · 0 评论 -
案例28:无限极菜单-递归
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahtt...原创 2020-04-30 17:28:45 · 195 阅读 · 0 评论 -
案例27:百度音乐全选-onchange监听单选框复选框
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><me...原创 2020-04-30 17:28:41 · 274 阅读 · 0 评论 -
案例26:查找替换文字
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"href="./index.css"><...原创 2020-03-26 14:33:26 · 347 阅读 · 0 评论 -
案例25:随机打乱图片
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><linkrel="styl...原创 2020-03-26 14:33:22 · 936 阅读 · 0 评论 -
案例24:伪3D图片切换
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahtt...原创 2020-03-26 14:33:18 · 210 阅读 · 0 评论 -
案例23:文字搬运工
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>文字搬运工</title><linkrel="stylesheet"href="./index.css"></h...原创 2020-03-26 14:33:15 · 199 阅读 · 0 评论 -
案例1-微信聊天-用开关
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA...原创 2019-08-28 15:09:06 · 198 阅读 · 0 评论 -
案例2-京东轮播图-一组数据不能同时操作-用for循环
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-U...原创 2019-08-28 17:37:48 · 104 阅读 · 0 评论 -
案例3-选项卡-自定义属性-索引值-btn[ i ].index = i
<script>var btns = document.querySelectorAll(".btn");var inners = document.querySelectorAll("div");/* 点击第 0 个按钮,需要 让第0个div 也对应显示 点击第 1 个按钮,需要 让第1个div 也对应显示 点击第 2 个按钮,需要 让第...原创 2019-09-01 14:11:47 · 481 阅读 · 0 评论 -
案例3-选项卡-另一种记录当前选择的
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-C...原创 2019-09-01 14:17:57 · 98 阅读 · 0 评论 -
案例4-拼图-一次循环-取模
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-C...原创 2019-09-01 20:46:27 · 186 阅读 · 0 评论 -
案例4-拼图-循环套循环-注意“声明”“加等”“背景定位”
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-C...原创 2019-09-01 20:11:40 · 121 阅读 · 0 评论 -
案例5-九九乘法表-br/版本
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-C...原创 2019-09-05 22:53:17 · 161 阅读 · 0 评论 -
案例5-九九乘法表-定位版本
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-C...原创 2019-09-05 22:57:21 · 124 阅读 · 0 评论 -
案例5-九九乘法表-颠倒的
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-C...原创 2019-09-05 22:59:23 · 540 阅读 · 0 评论 -
案例6-输入正确的QQ号码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ...原创 2019-09-06 13:33:26 · 809 阅读 · 0 评论 -
案例7-数据筛选
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ...原创 2019-09-06 13:34:19 · 298 阅读 · 0 评论 -
案例8-封装选项卡-传参
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e...原创 2019-09-08 23:07:30 · 120 阅读 · 0 评论 -
案例9-封装选择器方法
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equ...原创 2019-09-08 23:56:43 · 174 阅读 · 0 评论 -
案例10-修改input的值-重要!
工作中重复的功能模块先删除,简化,第一个模块实现了,后面的循环就可以<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initi...原创 2019-09-09 00:17:46 · 463 阅读 · 0 评论 -
案例11-闭包-传参-几种简写方式-重要!
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp...原创 2019-09-09 00:55:34 · 111 阅读 · 0 评论 -
案例12-星期几、分数判断-switch及穿透性的好处
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><metaname="viewport"...原创 2019-09-14 11:36:21 · 111 阅读 · 0 评论 -
案例13-购物车-重要!
第一步:第二步:闭包第三步:完成剩余部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-s...原创 2019-09-14 23:33:31 · 114 阅读 · 0 评论 -
案例14-QQ延时显示弹框
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-...原创 2019-09-15 00:04:55 · 141 阅读 · 0 评论 -
案例15-自动播放轮播图-用延迟器setInterval
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-...原创 2019-09-15 00:17:00 · 214 阅读 · 0 评论 -
案例16-自动消失的提示框
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-...原创 2019-09-15 00:19:02 · 114 阅读 · 0 评论 -
案例17-自动选项卡
第一步:第二步:封装函数第三步:原创 2019-09-15 00:55:46 · 107 阅读 · 0 评论 -
案例18-移动的盒子
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-...原创 2019-09-15 01:24:38 · 80 阅读 · 0 评论 -
案例19-站长之家导航
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e...原创 2019-10-03 09:20:53 · 136 阅读 · 0 评论 -
案例22-倒计时
老师版本varinput=document.querySelectorAll('#fill_ininput');vartarget=document.querySelector('#targetstrong');vargo=document.querySelector('#go');varps=document.querySelecto...原创 2019-10-03 09:26:43 · 131 阅读 · 0 评论 -
案例20-选项卡套选项卡
整合之前/***1.大的外层的选项卡*2.大的选项卡内部有一个小的选项卡*3.功能*1.自动切换*2.鼠标经过切换*//***第一步:用两个变量控制选项卡的显示**第二步:给元素绑定鼠标经过的事件*-外层的选项卡*-内层选项卡*第三步:自动...原创 2019-10-03 09:23:00 · 297 阅读 · 0 评论 -
案例21-日期推算
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e...原创 2019-10-03 09:25:54 · 233 阅读 · 0 评论