前端案例练习
关注
分享
扫一扫
飞天小女侠~
编程中最没用的东西是源代码，最有用的东西是算法和数据结构。
柴静在《看见》里说，每个轻松的笑容的背后，都是一个咬紧牙关的灵魂。
每个出类拔萃的人，都为他现在所站的位置付出了很多很多。
展开
-
vue案例1：购物车案例
1.实现效果：2.涉及到的知识点：toFixed函数、过滤器、reduce高阶函数、v-bind:disabled、v-if3.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view原创 2022-04-20 22:33:55 · 822 阅读 · 0 评论 -
es6学习（二） 函数进阶 this指向问题、深拷贝、浅拷贝
一、函数进阶1.1 函数的定义和调用采用instanceof判断前者是否属于后者。f instanceof Object. 返回true1.2 函数的调用方式2.this指向问题2.1 函数内this的指向2.2 改变函数内部this指向2.2.1 call（）有两个作用：（1）调用函数（2）修改this指向问题。（Father.call(son)将father函数的this指向son）则son就可以使用father的属........原创 2022-04-12 21:15:56 · 397 阅读 · 0 评论 -
es6练习：filter()、forEach()、some()
filter和forEach函数，遇见return不会终止迭代，而是全部遍历一遍。而some遇见return会终止迭代。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten...原创 2022-04-12 13:57:32 · 479 阅读 · 0 评论 -
es6练习：面向对象tab栏
1.（1）功能需求（2）抽象对象原创 2022-04-11 16:19:01 · 255 阅读 · 0 评论 -
js练习：筋斗云案例练习
1.实现效果鼠标经过，筋斗云跟随，鼠标离开，筋斗云回到原来的位置。鼠标点击，筋斗云停在该位置。2.实现思路：鼠标点击时，更改当前的current即可。同时更新记忆变量current，上面图片中的鼠标离开某个小li，就把目标值设为current。（注意：鼠标点击时，不需要再移动，直接更新current即可。点击完后，离开鼠标时会再执行鼠标离开事件（即移动到current位置，筋斗云会停留在当前位置），即可达到想要的效果。）3.代码：<!DOCTYPE html>原创 2022-04-11 14:28:27 · 1312 阅读 · 1 评论 -
js练习：轮播图
1.实现功能：2.实现思路：（1）鼠标放到图片上，显示箭头，用display来做。（2）动态生成小圆圈。（3）小圆圈的排他思想（4）点击小圆圈滚动图片设置自定义属性：this.setAttribute(name, value);获取自定义属性：this.getAttribute(name,value);(5)点击右按钮，滚动一张图片（学习无缝滚动原理）（6）克隆第一张图片放到图片最后面li.cloneNode(true) 设置为t...原创 2022-04-10 17:27:37 · 769 阅读 · 0 评论 -
js练习：动画函数的使用
1.实现效果：鼠标滑过箭头，显示出问题反馈，离开箭头，问题反馈隐藏 2.主要使用了动画函数。注意：direction的定位变成固定定位，否则页面底部会出现左右的滚动条3.代码实现：动画函数：function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function(){ var step = (target - ob...原创 2022-04-10 13:15:19 · 822 阅读 · 1 评论 -
js练习：仿淘宝固定侧边栏练习
1.实现效果：当页面运行到banner区域时，右边侧边栏改为固定定位，当页面运行到主体区域时，右边侧边栏显示返回到顶部。2.思路：（1）给document加scroll事件。（2）获取页面被卷去的部分用window.pageYOffset.(3)不断判断页面滚动了多少。计算右边侧边栏应该待的位置。3.代码：pink老师用了固定定位fixed（固定定位是相对于窗口的距离），我做的还是用绝对定位（绝对定位是相对于页面的距离），都是可以实现的。<!DOCTYPE htm原创 2022-04-09 15:14:11 · 191 阅读 · 0 评论 -
js练习：仿京东放大镜案例
1.实现效果：移动遮挡框，右边的图片响应的放大并移动。2.实现思路：（1）鼠标移动到图片上，遮罩层和右边盒子显示。鼠标移出，遮罩层和右边盒子消失。（2）黄色遮罩层跟随鼠标移动（3）右边图片跟随左边图片移动注意：右边图片的移动方向与左边遮罩层的移动方向相反，因此，右边图片移动距离是负的。右边大盒子：多余的图片不显示，用overflow:hidden.来隐藏3.代码展示<!DOCTYPE html><html lang="en">&.原创 2022-04-07 20:50:12 · 313 阅读 · 0 评论 -
js练习：拖动模态框
1.实现效果：点击链接，弹出模态框。点击关闭，关闭模态框。点击标题部分，可以随意移动模态框的位置。主要是获取鼠标位置。2.思路：3.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n.原创 2022-04-07 19:35:18 · 553 阅读 · 0 评论 -
js练习 发送短信案例
1.实现效果：点击发送后，按钮开始倒计时。同时失去点击功能，倒计时结束后，恢复正常。2.思想：3.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte..原创 2022-04-01 14:18:52 · 265 阅读 · 0 评论 -
倒计时效果
1.实现效果每隔一秒，更新一次时间。2.实现思路3.代码<!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, i.原创 2022-03-30 19:50:26 · 535 阅读 · 0 评论 -
js练习：模拟京东快递单号查询
1.实现效果：当文本框中输入文字时，上面有一个放大文字的框中显示文本框内容。失去焦点时，放大文字的框消失，获得焦点时，放大文字的框显示。2.案例分析3.代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2022-03-29 20:30:07 · 403 阅读 · 0 评论 -
js练习：模拟京东按键输入内容
1.实现效果：在页面中的任何位置，只要按下了s键，就能让输入框获得焦点。2.案例分析3.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width原创 2022-03-29 18:48:17 · 182 阅读 · 0 评论 -
js案例练习：跟随鼠标移动的小天使
1.实现效果：鼠标移动到哪，小天使跟到哪2.思路：（1）为了让鼠标在天使的中央，可以将横坐标和纵坐标分别减去天使高度和宽度的一半。（2）注意设置top和left的值的时候，不要忘记加px3.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I原创 2022-03-29 18:31:05 · 1015 阅读 · 0 评论 -
js练习——显示隐藏文本框内容
输入文件框时，文本框内容默认显示手机两个字，当获得交点时，文本框内容显示为空；当文本框内容为空，失去焦点时，文本框内容显示为手机。主要学习了两个事件：onfocus和onblur：获得焦点和失去焦点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g原创 2022-03-08 11:29:35 · 290 阅读 · 0 评论 -
前端案例——1.仿京东显示隐藏密码明文案例。
<!-- 仿京东显示隐藏密码明文案例 --><!-- 核心思路：点击眼睛按钮，把密码框改为文本框就可以看见里面的密码。 --><!-- 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框 --><!-- 算法：利用flag变量，判断flag的值，是1就切换为文本框，同时flag置0；是0就切换为密码框，同时flag置1 --><head> <style> /* border-botto.原创 2022-03-01 17:17:11 · 1289 阅读 · 0 评论 -
前端案例——2.仿淘宝关闭二维码案例
<!-- 仿淘宝关闭二维码案例 --><!-- 核心思路：利用样式的显示和隐藏完成，display：none隐藏元素；display：block显示元素。 --><!-- 点击按钮，就让这个二维码盒子隐藏起来即可。 --><head> <style> .box{ width:70px; height:83px; border:1px soli..原创 2022-03-01 18:22:21 · 691 阅读 · 0 评论 -
css案例练习 简洁版的小米侧边栏
此案例主要练习，块元素、行内元素、行内块元素。实现以下效果：方法一：在a中设置了块元素div。a是行内元素，在学习行内元素时，要求行内元素只能容纳文本或行内元素。但是特殊情况a中，可以放块元素，但是pink老师讲，最好还是转换成块级元素，更为安全一些。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-原创 2022-03-05 16:39:36 · 782 阅读 · 0 评论 -
css案例练习：五彩导航
<!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"> <title&...原创 2022-03-05 17:12:35 · 1225 阅读 · 0 评论 -
css练习——写一个小三角
效果图：<!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"> <.原创 2022-03-07 19:50:13 · 112 阅读 · 0 评论 -
js案例练习——密码框验证信息
思路：代码：没写绿色的部分<!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">原创 2022-03-08 14:08:41 · 200 阅读 · 0 评论 -
js练习案例——table表格隔行换色
注意事项：设置鼠标移动和移出绑定事件。 设置好相应的类，修改时更好修改，避免修改js代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid...原创 2022-03-08 16:50:38 · 552 阅读 · 0 评论 -
js案例练习——表单全选_取消全选
效果：案例分析：<!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..原创 2022-03-08 17:55:18 · 432 阅读 · 0 评论 -
css练习——土豆视频遮罩
效果：鼠标经过时显示遮罩层复习：遮罩层用绝对定位，不占有位置。因此外面的.box用相对定位。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi.原创 2022-03-09 14:34:04 · 350 阅读 · 0 评论 -
js练习 tab栏切换制作
效果：思想：1.点击每个tab时。要先用排他思想，使得所有li不加上背景，再让点击的tab加上某个类。2.上面的tab与下面显示内容的页面是一一对应的。因此，可以使用自定义属性，使tab加上一个index索引，这样就能知道每次点击的是哪一个tab了。3.最后仍然使用排他思想，当点击tab时，先让所有的内容都不显示，再让对应的内容进行显示。代码：<!DOCTYPE html><html lang="en"><head> <meta原创 2022-03-09 18:15:39 · 742 阅读 · 0 评论 -
新浪下拉菜单
1.实现效果：鼠标滑过时，显示下拉框。2.思路：首先理清楚html元素是如何放置的。横着三个微博是一个ul中放置三个li。竖着看，一个li中放置一个a标签和一个ul标签，ul中又放置三个li。采用子绝父相来进行定位。竖着的一个li采用相对定位，下面的ul采用绝对定位。实现思想： <!-- 算法思想 --> <!-- ①导航栏中的li都有鼠标经过效果，所以需要循环添加注册事件 --> <!-- ②核心原...原创 2022-03-28 17:51:48 · 898 阅读 · 0 评论 -
简单版发布留言案例以及删除留言
1.实现效果：每点发布，就插入一个li元素。2. 实现思路：代码：<!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-wid...原创 2022-03-28 18:33:12 · 599 阅读 · 0 评论 -
案例：动态生成表格
1.实现效果：准备好数据，刷新后加载数据。点击删除按钮后，删除数据。2.代码：<!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-w.原创 2022-03-29 09:11:33 · 334 阅读 · 0 评论