HTML5
舞空~
一只普通的程序猿,记录自己的点点滴滴,希望博客能帮助到你们哈!努力加油!喜欢的麻烦给个赞,谢谢!
展开
-
推荐四种好看的加载动画,需要的自取
好看的四种加载动画,效果如图:代码:<!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原创 2021-08-11 17:47:42 · 652 阅读 · 0 评论 -
vue中用户自定义短信模板设置,功能为点击添加有光标时在光标后面拼接数据,没光标时在短信模板后面直接拼接数据
点击添加有光标时在光标后面拼接数据,没光标时在短信模板后面直接拼接数据原创 2021-03-13 16:51:08 · 1139 阅读 · 0 评论 -
自己动手写一个上传组件(支持多个上传),并展示上传进度
我只是写一个demo,至于文件列表的展示,删除,下载自己根据自己的项目写就好了,例子我用的是elemengUI写的,具体可以根据自己的需求修改效果展示如图:点击上传(这边我传的文件比较小,所以看上去有点误差,进度是可以正常展示的)最后我将上传成功返回列表数据展示在页面,可以根据自己具体需求修改展示列表的样式布局为了方便观看,下面是源码截图,最后会附上源码:附上源码:<template> <div> <h3>上传组件</h3>原创 2020-12-17 15:30:46 · 323 阅读 · 0 评论 -
数组的排序和数组根据对象的某个字段排序
数组根据对象的某个字段排序,如图:希望文档能帮助到您,最后求个赞,谢谢~原创 2020-12-03 15:56:53 · 730 阅读 · 0 评论 -
详细解读深浅拷贝,实现深拷贝最好的方法就是递归方法
1.对浅拷贝和深拷贝的理解浅拷贝和深拷贝都是对于JS中的引用类型而言的,浅拷贝就只是复制对象的引用堆和栈的关系,简单类型Undefined,Null,Boolean,Number和String是存入堆,直接引用,object array 则是存入桟中,只用一个指针来引用值),如果拷贝后的对象发生变化, 原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。2.浅拷贝:浅拷贝的意思就是只复制引用(指针),而未复制真正的值。// 数组浅拷贝 let A = [{ id: 1, name:原创 2020-12-03 14:31:31 · 875 阅读 · 2 评论 -
实现一个数组过滤掉另一个数组元素的方法
问题描述:工作中经常遇到一个数组列表需要过滤掉另外另外一个数组的元素,剩下的组成一个新的数组,思路就是利用数组的filter方法,将判断的属性如例子的name属性放到一个判断数组,然后利用filter方法过滤即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width原创 2020-12-02 17:57:08 · 3810 阅读 · 4 评论 -
vue 项目中使用阿里巴巴矢量图标库iconfont最简单方便的方法
1.打开iconfont阿里巴巴官网https://www.iconfont.cn2.把需要的图标添加到购物车3.打开购物车,添加至项目,项目如果没有就新建一个即可4.然后打开自己的项目,就可以看到自己的项目里面添加的图标了5.这时候就可以看到自己的项目了,点击生成css文件在线链接和js在线链接6.在vue项目中的public的index.html中引入,完成以后就可以正常使用了<!-- 导入最新阿里巴巴矢量库地址 --> <link rel="style原创 2020-10-19 16:43:55 · 508 阅读 · 2 评论 -
vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答);
1.业务要求:一个简单的在线问卷调查,有单选,多选,简答题,侧栏显示题号,通过题号颜色判断,盖题目是否已答,答题完整才能提交;前提:首先正常项目中数据肯定是后台请求回来的,所以数据格式必须和后端商量好,在此我就先写个假数据代替了,需要和后端商量好数据的格式效果图如下:答题前显示:当我答题了以后,题号对应显示该题答题状况:此时点击提交按钮,提示"未打完,请继续答卷":完整答题提示:基本已完成业务需求,另外如果需要点击题号滚动到选中题,只需要利用锚点就可以了,在此就不做介绍了最后上代码,原创 2020-07-21 18:21:49 · 6724 阅读 · 13 评论 -
transform和animation同时作用于同一个元素
如图,对下面方格进行了倾斜和旋转的动画,会发现动画执行时,元素又变回了正方形,而没有倾斜,如何保持倾斜状态下旋转呢?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>转换加动画&l原创 2020-07-21 16:16:13 · 466 阅读 · 0 评论 -
css3动画animation基础详解,给元素添加多个动画时动画不分先后同时执行
效果如图:上面添加了两个动画,一为旋转,二为变色,当给section元素添加这两个动画时,两个动画不分先后同时执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D基础动画</title> <style> html{ height: 100%;原创 2020-07-21 14:53:39 · 5944 阅读 · 1 评论 -
css3动画的过渡
效果图:右边是动画,左边是过渡,过渡需要提前设置好过渡的样式,时间,速率等等属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D的过渡</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></scrip原创 2020-07-21 14:43:25 · 233 阅读 · 0 评论 -
css设置模糊背景
在设置背景的类样式中设置filter: blur(模糊值),如:filter: blur(5px)/* 模糊背景图片 */#workShow .imgItem {width: 100%;height: 270px;position: relative;/* border-bottom: 1px solid red; */}#workShow .imgItem::before {width: 100%;height: 270px;filter: blur(5px);content: "原创 2020-07-20 17:26:52 · 485 阅读 · 0 评论 -
包括滚动条高度水平垂直居中和相对于浏览器窗口水平垂直居中的方法
包括滚动条高度水平垂直居中效果如图:包括滚动条高度水平垂直居中代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>垂直居中</title> <原创 2020-07-20 17:01:00 · 518 阅读 · 0 评论 -
css3设置单行超出部分省略号,两行省略号,三行省略号,多行省略号
效果如图代码如下,多行时可根据要求修改-webkit-line-clamp值:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超出部分省略问题</title>原创 2020-07-20 15:54:19 · 1550 阅读 · 0 评论