![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端案例练习
飞天小女侠~
编程中最没用的东西是源代码,最有用的东西是算法和数据结构。
柴静在《看见》里说,每个轻松的笑容的背后,都是一个咬紧牙关的灵魂。
每个出类拔萃的人,都为他现在所站的位置付出了很多很多。
展开
-
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 · 780 阅读 · 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 · 370 阅读 · 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 · 451 阅读 · 0 评论 -
es6练习:面向对象tab栏
1.(1)功能需求(2)抽象对象原创 2022-04-11 16:19:01 · 227 阅读 · 0 评论 -
js练习:筋斗云案例练习
1.实现效果鼠标经过,筋斗云跟随,鼠标离开,筋斗云回到原来的位置。鼠标点击,筋斗云停在该位置。2.实现思路:鼠标点击时,更改当前的current即可。同时更新记忆变量current,上面图片中的鼠标离开某个小li,就把目标值设为current。(注意:鼠标点击时,不需要再移动,直接更新current即可。点击完后,离开鼠标时会再执行鼠标离开事件(即移动到current位置,筋斗云会停留在当前位置),即可达到想要的效果。)3.代码:<!DOCTYPE html>原创 2022-04-11 14:28:27 · 1240 阅读 · 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 · 709 阅读 · 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 · 779 阅读 · 1 评论 -
js练习:仿淘宝固定侧边栏练习
1.实现效果:当页面运行到banner区域时,右边侧边栏改为固定定位,当页面运行到主体区域时,右边侧边栏显示返回到顶部。2.思路:(1)给document加scroll事件。(2)获取页面被卷去的部分用window.pageYOffset.(3)不断判断页面滚动了多少。计算右边侧边栏应该待的位置。3.代码:pink老师用了固定定位fixed(固定定位是相对于窗口的距离),我做的还是用绝对定位(绝对定位是相对于页面的距离),都是可以实现的。<!DOCTYPE htm原创 2022-04-09 15:14:11 · 174 阅读 · 0 评论 -
js练习:仿京东放大镜案例
1.实现效果:移动遮挡框,右边的图片响应的放大并移动。2.实现思路:(1)鼠标移动到图片上,遮罩层和右边盒子显示。鼠标移出,遮罩层和右边盒子消失。(2)黄色遮罩层跟随鼠标移动(3)右边图片跟随左边图片移动注意:右边图片的移动方向与左边遮罩层的移动方向相反,因此,右边图片移动距离是负的。右边大盒子:多余的图片不显示,用overflow:hidden.来隐藏3.代码展示<!DOCTYPE html><html lang="en">&.原创 2022-04-07 20:50:12 · 280 阅读 · 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 · 516 阅读 · 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 · 240 阅读 · 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 · 451 阅读 · 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 · 338 阅读 · 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 · 163 阅读 · 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 · 960 阅读 · 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 · 253 阅读 · 0 评论 -
前端案例——1.仿京东显示隐藏密码明文案例。
<!-- 仿京东显示隐藏密码明文案例 --><!-- 核心思路:点击眼睛按钮,把密码框改为文本框就可以看见里面的密码。 --><!-- 一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框 --><!-- 算法:利用flag变量,判断flag的值,是1就切换为文本框,同时flag置0;是0就切换为密码框,同时flag置1 --><head> <style> /* border-botto.原创 2022-03-01 17:17:11 · 1224 阅读 · 0 评论 -
前端案例——2.仿淘宝关闭二维码案例
<!-- 仿淘宝关闭二维码案例 --><!-- 核心思路:利用样式的显示和隐藏完成,display:none隐藏元素;display:block显示元素。 --><!-- 点击按钮,就让这个二维码盒子隐藏起来即可。 --><head> <style> .box{ width:70px; height:83px; border:1px soli..原创 2022-03-01 18:22:21 · 651 阅读 · 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 · 703 阅读 · 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 · 1188 阅读 · 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 · 85 阅读 · 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 · 176 阅读 · 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 · 527 阅读 · 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 · 398 阅读 · 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 · 329 阅读 · 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 · 708 阅读 · 0 评论 -
新浪下拉菜单
1.实现效果:鼠标滑过时,显示下拉框。2.思路:首先理清楚html元素是如何放置的。横着三个微博是一个ul中放置三个li。竖着看,一个li中放置一个a标签和一个ul标签,ul中又放置三个li。采用子绝父相来进行定位。竖着的一个li采用相对定位,下面的ul采用绝对定位。实现思想: <!-- 算法思想 --> <!-- ①导航栏中的li都有鼠标经过效果,所以需要循环添加注册事件 --> <!-- ②核心原...原创 2022-03-28 17:51:48 · 857 阅读 · 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 · 568 阅读 · 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 · 313 阅读 · 0 评论