前端小项目
关注
分享
扫一扫
文章平均质量分 51
前端小项目练习，还有涉及到的小知识点哦
liun_n
这个作者很懒，什么都没留下…
展开
-
web前端 本地录制音频后放入audio标签中 使用navigator.mediaDevices.getUserMedia
web前端 本地录制音频后放入audio标签中 使用navigator.mediaDevices.getUserMedia。原创 2022-11-03 19:33:15 · 869 阅读 · 0 评论 -
前端小项目 QuizApp 答题卡片
介绍页面显示一张卡片，上面有题目和选项，选择某个选项后点击提交，卡片内容换成其他题目。答完指定数目题目后会显示用户的答题结果，再次点击按钮可以重新答题。代码每次用户点击提交按钮时判断当次的答题结果，正确的话给标志位加一，然后销毁上一题的节点，渲染下一题的内容。简单版本，只写了javascript，没有样式。html:<p class="question_title"></p><div class="answer_list"></div><原创 2021-11-18 13:09:44 · 844 阅读 · 0 评论 -
前端小项目Notification 弹出定时消失的提示框
介绍每点击一下按钮，窗口右下角就弹出一个消息框，后一个消息框放在前一个的下面，并且每个消息框的显示时间都一样，显示时间达到后，此消息框消失。思路：窗口右下角定位一个盒子，用来放消息框，盒子高度由消息框撑开。按钮点击后，生成一个消息框（div标签+文案+样式类），并设置定时器清除消息框节点，把消息框添加到右下角盒子里。⚠️ 待改进：给消息框的显示和消失设置过渡效果。代码html:<button>Toast Notification</button><div cla原创 2021-11-16 12:44:31 · 1212 阅读 · 0 评论 -
前端小项目 HoverBoard 方格矩阵hover随机颜色动画
介绍整体是有很多方格组成的矩阵，鼠标滑入每个方格会随机显示不同的颜色，鼠标滑出2s后颜色消失。给方格设置 transtion-duration ，那滑入滑出的时间都是一致的，可以再给方格的hover态设置 transition-duration 为0，那么移入方格时的动画时间就是0 ，不影响移出时间了。代码无html，css：body{ font-size: 0; background-color: black;}ul{ display: inline-block;原创 2021-11-11 09:57:38 · 616 阅读 · 0 评论 -
前端小项目 TodoList
介绍：在输入框中输入待办事项，点击回车，TodoList 里增加一条Todo，如果点击回车时输入框未聚焦则无效。点击某条Todo，可更改状态，右击可删除此条Todo。添加、删除Todo以及Todo的当前状态都将保存在 localStroage中，进入页面时会渲染到页面上。我用了两个方法第一种：在添加Todo时，给每个Todo 的 li 标签添加属性 key （获取当前Todo是第几个），在更改 Todo 状态时根据 key 获取缓存对应的某条数据，然后修改状态值。这个方法不好，这样使用key原创 2021-11-04 20:17:41 · 965 阅读 · 0 评论 -
前端小项目10 # Hidden Search Widget 隐藏搜索小部件
知识点取消input点击时的边框input placehoder的样式修改CSS选择器优先级原生JS操作DOM常用方法原生JS操作class属性CSS 过渡transition介绍点击搜索框内最右侧????图标，搜索框逐渐宽度缩小直至只剩下搜索图标，再次点击图标，搜索框恢复原样。代码HTML: <div> <input id="search-input" type="text" placeholder="Search..."> <原创 2021-09-26 19:50:06 · 255 阅读 · 0 评论 -
前端小项目9 # Good,Cheap,Fast 控制滑动开关打开数量
知识点CSS实现switch滑动开关按钮创建数组原生JS操作DOM常用方法介绍有三个开关按钮，最多只能打开两个开关，如果打开三个，则默认关闭最后打开开关的前一个。代码HTML:<h3>How do you want your project to be?</h3><div class="switch_box"> <label for="">Good</label> <button class="swit原创 2021-09-14 20:43:27 · 230 阅读 · 0 评论 -
前端小项目8 # RotatingNavigationAnimation 侧边旋转导航动画
知识点介绍点击导航栏按钮，主页面以窗口左上角为圆心，逆时针旋转适当角度，旋转留出的空余部分显示导航菜单。代码html:css:javascript:原创 2021-09-07 10:25:52 · 237 阅读 · 0 评论 -
前端-瀑布流
宽度一致，高度不同根据父元素宽度以及每列宽度计算出列表个数，列表默认0图片依次放在最短列的下面父容器高度取列表最大值父元素相对定位，子元素绝对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...原创 2019-03-23 18:22:11 · 298 阅读 · 0 评论 -
前端小项目7 # BlurryLoading 背景图模糊加载，文字逐渐透明
知识点文字垂直水平居中background 属性模糊效果透明效果原生JavaScript获取DOM定时器介绍模糊的背景图上有当前的背景图加载进度的文字“0%”，随着背景图越来越清晰，加载进度逐渐接近“100%”，进度文字样式越来越透明。代码html:<div class="content"></div><p class="loading-text"></p>css:body{ margin: 0; paddi原创 2021-09-06 15:32:35 · 380 阅读 · 0 评论 -
前端小项目6 # ProgressSteps 流程/步骤节点进度条
介绍代码本练习涉及到的知识点css实现元素背景色从左侧滑动到右侧:root原声JS操作class原创 2021-09-02 09:16:21 · 1520 阅读 · 0 评论 -
前端小项目5 # AutoTextEffect 文字自动出现效果可改速度
介绍页面上自动出现文字，可以更改文字显示的速度。本练习涉及的知识点flex布局递归闭包定时器标签的innerText拼接空字符串不展示空格代码HTML：<p class="text-line"></p><div class="control"> <label for="speed">速度(单位：毫秒):</label> <input type="number" value="5" step="1"原创 2021-08-26 19:15:05 · 343 阅读 · 0 评论 -
前端小项目4 # ButtonRippleEffect 按钮点击涟漪效果
介绍ButtonRippleEffect 点击按钮产生水波涟漪效果。本练习涉及的知识点鼠标事件HTML中鼠标点击的坐标信息JS操作DOM节点JS操作class属性animation 动画transform 转换鼠标连续点击同一个位置时offsetX/offsetY不一样（参考：https://www.cnblogs.com/paul-xiao/p/14539039.html）代码HTML:<div class="ripple-btn">click me 1<原创 2021-08-25 13:52:05 · 376 阅读 · 0 评论 -
前端小项目3 # DoubleClickHeart 双击图片产生爱心动效
介绍点击图片，在点击处显示爱心动画效果并更新累计点击次数。代码HTML:<div class="content"> <p>you licked it <span id="click-num">0</span> times</p> <div class="current-photo"> </div> </div>css :需要引入外部图标字体库<link r原创 2021-08-24 16:53:17 · 440 阅读 · 0 评论 -
前端小项目2 # EventKeyCode 显示键盘按键信息
随意按下一个键盘键，屏幕上显示对应的键信息。<div id="title"> <div class="key"> Press any key to get the keyCode </div></div><div id="content"> <div class="key"> <span id="key"></span> <sma原创 2021-08-24 10:26:15 · 305 阅读 · 0 评论 -
前端小项目 # ExpendingCards 水平图像手风琴
1. flex布局2. 原生JavaScript获取DOM3. 原生JavaScript操作class属性4. getElementByTagName与querySelectorAll的对比5. 数组与类数组的区别、转换6. CSS transtion属性原创 2021-08-19 20:50:39 · 144 阅读 · 0 评论