JavaScript 案例
关注
分享
扫一扫
文章平均质量分 80
学习笔记记录
_Tough_Girl
这个作者很懒，什么都没留下…
展开
-
前端常用且不可错过的网页炫酷特效
学习前端常用网页炫酷特效原创 2023-04-18 15:01:44 · 1783 阅读 · 0 评论 -
正则表达式案例：表单验证
正则表达式案例：表单验证需求：（1）表单失去焦点，进行验证。（2）如果输入内容为空，提醒用户输入内容。（3）输入内容后，开始进行表单验证，成功，提示用户输入正确，失败，提醒用户重新输入。html 代码：<div class="registerarea"> <h3>注册新用户 <div class="login">我有账号，去<a href="#">登陆</a></div> </h3&g原创 2021-09-25 18:11:22 · 1556 阅读 · 0 评论 -
正则表达式案例：用户名验证
案例：用户名验证功能需求：如果用户名输入合法，则后面提示信息为 ： 用户名合法，并且颜色为绿色。如果用户名输入不合法， 则后面提示信息为： 用户名不符合规范，并且颜色为红色。分析:用户名只能为英文字母，数字，下划线或者短横线组成,，并且用户名长度为 6~16位。首先准备好这种正则表达式模式 /$[a-zA-Z0-9-_]{6,16}^/当表单失去焦点就开始验证。如果符合正则规范,，则让后面的 span 标签添加 right 类。如果不符合正则规范， 则让后面的 span 标签添加 w原创 2021-08-19 00:04:15 · 8250 阅读 · 1 评论 -
闭包案例：1. 循环注册点击事件 2. 循环中的 setTimeout() 3. 计算打车价格
1、循环注册点击事件。2、循环中的 setTimeout()。3、计算打车价格。原创 2021-09-25 17:49:40 · 142 阅读 · 0 评论 -
案例：查询商品案例
案例：查询商品案例把数据渲染到页面中 (forEach)。根据价格显示数据。根据商品名称显示数据(filter)。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>案例：商品查询案例</title> <style> .search { width:原创 2021-09-25 17:02:25 · 145 阅读 · 0 评论 -
案例：面向对象版 tab 栏切换
案例：面向对象版 tab 栏切换功能需求：点击 tab栏，可以切换效果。（切换功能）点击 + 号， 可以添加 tab 项和内容项。（添加功能）点击 x 号，可以删除当前的 tab 项和内容项。（删除功能）双击 tab 项文字或者内容项文字，可以修改里面的文字内容。（修改功能）案例分析：（1）添加功能：点击 + 可以实现添加新的选项卡和内容第一步：创建新的选项卡 li 和新的内容 section 。第二步：把创建的两个元素追加到对应的父元素中。以前的做法：动态创建元素 create原创 2021-09-25 15:20:44 · 567 阅读 · 0 评论 -
案例：记住用户名
案例：记住用户名需求： 如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名。案例分析：① 把数据存起来，用到本地存储。② 关闭页面，也可以显示用户名，所以用到 localStorage。③ 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框。④ 当复选框发生改变的时候，触发 change 事件。⑤ 如果勾选，就存储，否则就移除。代码：<!DOCTYPE html><html lang="en">&l原创 2021-09-24 22:59:28 · 401 阅读 · 0 评论 -
案例：移动端轮播图和返回顶部
案例：移动端轮播图移动端轮播图功能和基本PC端一致。可以自动播放图片。手指可以拖动播放轮播图。案例：返回顶部当页面滚动某个地方，就显示，否则隐藏点击可以返回顶部案例分析：（1）返回顶部① 滚动某个地方显示② 事件： scroll 页面滚动事件③ 如果被卷去的头部（window.pageYOffset ）大于某个数值④ 点击， window.scroll(0,0) 返回顶部案例分析：（1）自动播放功能开启定时器。移动端移动，可以使用 translate 移动 。想原创 2021-09-24 18:10:42 · 328 阅读 · 0 评论 -
案例：网页轮播图
案例：网页轮播图轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。点击右侧按钮一次，图片往左播放一张，以此类推， 左侧按钮同理。图片播放的同时，下面小圆圈模块跟随一起变化。点击小圆圈，可以播放相应图片。鼠标不经过轮播图， 轮播图也会自动播放图片。鼠标经过，轮播图模块， 自动播放停止。案例分析：（1）鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。因为js 较多，我们单独新建js 文件夹，再新建js 文件， 引入页面中原创 2021-09-24 17:00:40 · 363 阅读 · 0 评论 -
案例：筋头云案例
案例：筋头云案例业务需求：鼠标经过某个小 li， 筋斗云跟这到当前小 li位置。鼠标离开这个小 li， 筋斗云复原为原来的位置。鼠标点击了某个小 li， 筋斗云就会留在点击这个小 li 的位置。案例分析：① 利用动画函数做动画效果② 原先筋斗云的起始位置是0③ 鼠标经过某个小li， 把当前小li 的 offsetLeft 位置 做为目标值即可④ 鼠标离开某个小li， 就把目标值设为 0⑤ 如果点击了某个小li， 就把 li 当前的位置存储起来，做为筋斗云的起始位置。...原创 2021-09-23 23:54:20 · 316 阅读 · 1 评论 -
案例：仿淘宝固定右侧侧边栏
案例：仿淘宝固定右侧侧边栏需求：原先侧边栏是绝对定位。当页面滚动到一定位置，侧边栏改为固定定位。页面继续滚动，会让返回顶部显示出来。案例分析：① 需要用到页面滚动事件 scroll ，因为是页面滚动，所以事件源是 document 。② 滚动到某个位置，就是判断页面被卷去的上部值。③ 页面被卷去的头部：可以通过window.pageYOffset 获得，如果是被卷去的左侧 window.pageXOffset。④ 注意，元素被卷去的头部是 element.scrollTop , 如原创 2021-09-23 23:03:00 · 1383 阅读 · 0 评论 -
案例：仿京东放大镜
案例：仿京东放大镜案例分析：整个案例可以分为三个功能模块：① 鼠标经过小图片盒子， 黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能。② 黄色的遮挡层跟随鼠标功能。把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。首先是获得鼠标在盒子的坐标。之后把数值给遮挡层做为 left 和 top 值。此时用到鼠标移动事件，但是还是在小图片盒子内移动。发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。遮挡层不能超出小图片盒子范围。如果小于零，就把坐标设置为0 。如果大于遮挡层最原创 2021-09-23 16:55:24 · 121 阅读 · 0 评论 -
案例：模态框拖拽
案例：模态框拖拽业务需求：弹出框，我们也称为模态框。点击弹出层， 会弹出模态框， 并且显示灰色半透明的遮挡层。点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。鼠标松开，可以停止拖动模态框移动。案例分析：① 点击弹出层， 模态框和遮挡层就会显示出来 display:block;② 点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none;③ 在页面中拖拽的原理： 鼠标按下并且移动， 之后松开鼠标。④原创 2021-09-23 16:33:36 · 336 阅读 · 0 评论 -
案例：获取鼠标在盒子内的坐标
案例：获取鼠标在盒子内的坐标需求： 我们在盒子内移动鼠标，想要得到鼠标距离盒子左右的距离。案例分析:① 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。② 首先得到鼠标在页面中的坐标（e.pageX, e.pageY）。③ 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)。④ 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标。⑤ 如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件 mousemove。代码：<!原创 2021-09-23 16:16:16 · 996 阅读 · 0 评论 -
案例： 发送验证码案例
案例： 发送验证码案例业务需求：点击按钮后，该按钮 60 秒之内不能再次点击，防止重复验证码。案例分析：① 按钮点击之后，会禁用 disabled 为 true。② 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML 修改。③ 里面秒数是有变化的，因此需要用到定时器。④ 定义一个变量，在定时器里面，不断递减。⑤ 如果变量为0，说明到了时间，我们需要停止定时器，并且复原按钮初始状态。代码：<!DOCTYPE html><html lan原创 2021-09-22 23:03:54 · 100 阅读 · 0 评论 -
案例：倒计时效果和电子时钟
案例：倒计时效果案例分析：① 这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）。② 三个黑色盒子里面分别存放时分秒。③ 三个黑色盒子利用 innerHTML 放入计算的小时、分钟、秒数。④ 第一次执行也是间隔毫秒数，因此刚刷新页面会有空白。⑤ 最好采取封装函数的方式， 这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题。代码：<!DOCTYPE html><html lang="en"><head> <原创 2021-09-22 22:50:08 · 487 阅读 · 0 评论 -
案例： 模拟京东快递单号查询
案例： 模拟京东快递单号查询业务需求：（1）按下s 键，就把光标定位到文本框里面。（2）当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。案例分析：（1）按下s 键，就把光标定位到文本框里面。核心思路： 检测用户是否按下了s 键，如果按下 s 键，就把光标定位到文本框里面。使用键盘事件对象里面的 e.keyCode 判断用户按下的是否是 s 键。文本框获得焦点： 使用 javascript 里面的 focus() 方法。（2）当我们在文本框中输入内容时，文本框上面自动显示原创 2021-09-22 17:09:29 · 1238 阅读 · 0 评论 -
案例： 跟随鼠标移动的天使
案例： 跟随鼠标的天使这个天使图片一直跟随鼠标移动。案例分析：① 鼠标不断的移动，使用鼠标移动事件： mousemove。② 在页面中移动，给 document 注册事件。③ 图片要移动距离，而且不占位置，我们使用绝对定位即可。④ 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个 x 和 y 坐标做为图片的 top 和 left 值就可以移动图片。代码：<!DOCTYPE html><html lang="en"><head>原创 2021-09-22 16:33:20 · 1202 阅读 · 0 评论 -
案例：动态生成表格
案例：动态生成表格需求： 根据学生数据动态生成表格，同时还可以删除学生数据。案例分析：（1）因为里面的学生数据都是动态的，我们需要 js 动态生成，这里我们模拟数据，自己定义好数据。数据我们采用对象形式存储。（2）所有的数据都是放到 tbody 里面的行里面。（3）因为行很多，我们需要循环创建多个行（对应多个人）。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"原创 2021-09-22 09:55:31 · 4434 阅读 · 1 评论 -
案例：简单版发布和删除留言案例
案例：简单版发布和删除留言案例发布留言——案例分析：① 核心思路： 点击按钮之后，就动态创建一个 li，添加到 ul 里面。② 创建 li 的同时，把文本域里面的值通过 li.innerHTML 赋值给 li 。③ 如果想要新的留言在后面显示，就用 appendChild ；如果想要在前面显示，就用 insertBefore 。删除留言——案例分析：① 当我们把文本域里面的值赋给 li 的时候，多添加一个删除的链接。② 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的原创 2021-09-22 09:44:13 · 1247 阅读 · 0 评论 -
案例：表单全选与取消全选案例
案例：表单全选与取消全选案例业务需求：点击上面全选复选框，下面所有的复选框都选中（全选）。再次点击全选复选框，下面所有的复选框都不中选（取消全选）。如果下面复选框全部选中，上面全选按钮就自动选中。如果下面复选框有一个没有选中，上面全选按钮就不选中。所有复选框一开始默认都没选中状态。案例分析：（1） 全选和取消全选做法： 让下面所有复选框的 checked 属性（选中状态） 跟随全选按钮即可。（2）下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击原创 2021-09-21 23:12:52 · 1949 阅读 · 1 评论 -
案例：tab 栏切换
案例：tab 栏切换（重点案例）业务需求：当鼠标点击上面相应的选项卡（tab），下面内容跟随变化。案例分析：（1）Tab 栏切换有2个大的模块。（2）上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） ，修改类名的方式。（3）下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。（4）规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。（5）核心思路：给上面的 tab_list 里面的所有小 li 添加自定义属性，属性值从0开始编号。（6原创 2021-09-21 23:28:39 · 9177 阅读 · 3 评论 -
案例：新浪下拉菜单
案例：下拉菜单案例分析：（1）导航栏里面的 li 都要有鼠标经过效果，所以需要循环注册鼠标事件。（2）核心原理： 当鼠标经过 li 里面的第二个孩子 ul 时，显示， 当鼠标离开，则 ul 隐藏。实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新浪下拉菜单</title> <style>原创 2021-09-22 00:08:08 · 1898 阅读 · 0 评论