前端开发积累
爱吃白米饭的饭饭
只有在泥泞的道路上才能留下脚印
展开
-
vim 编辑操作(一些说明)
(主要来源:https://blog.csdn.net/weixin_43378248/article/details/85554935)文章目录一、基本简介二、打开新建三、基本模式四、重复次数五、移动光标六、选中文本七、撤销恢复八、删除文本九、复制文本十、替换文本十一、缩排文本十二、查找文本十三、查找替换十四、插入文本十五、分屏窗口一、基本简介在很多 Linux 发行版中,直接把 vi 做成 vim 的软链接vi 的简称是 visual interface,是 Li翻译 2020-11-02 15:51:53 · 664 阅读 · 0 评论 -
字符串、数组转换 (Json化数据)
一、字符串转数组vm.default_attachment = JSON.parse(arrObj.rule.default_attachment);二、数组转字符串modeldataTip.banner = JSON.stringify(vm.banner_type_video);原创 2020-08-18 15:29:00 · 238 阅读 · 0 评论 -
object-fit 切换被替换元素的内容对象在元素框内的对齐方式。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit原创 2020-04-22 17:33:55 · 241 阅读 · 0 评论 -
页面锚点定位方法
实现:点击锚点跳转到相应DIV的问题方法一:实现方式:用标签,在href属性中写入DIV的id缺点:点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。方法二:实现方式:在js事件中通过window.location.hash="divId"跳转,但地址也会发生变化,跟第一种方法没多大区别,甚至更麻烦。方法三:实现方式:用animate属性,当点击锚点后,页面滚动到相应的...原创 2019-10-22 10:54:17 · 538 阅读 · 0 评论 -
vue 实现回到顶部
1、dom部分:注意:@scroll这个事件是绑定在height固定的那个dom,即,在这个实际项目中,id="warp_content"的height=8896 大于 class为‘specific-left’这个类中设置固定容器高度为400,超出滚动2、vue注意:这里upper()事件实际只要document.getElementById(“scroll_con”).scrollTo...原创 2019-10-15 14:58:58 · 876 阅读 · 0 评论 -
js时间操作getTime(),ios移动端真机上返回显示NAN
问题:1、IOS手机获得new Date(‘2019-06-27 14:30:07’)时间如下图NAN2、安卓手机如下图new Date(‘2019-06-27 14:30:07’)解决ios日期时间戳无法显示是因为输入的日期格式的问题,ios无法识别2019-06-27 14:30:07以‘-’区分的日期格式,要以’/'为准,所以写法不一样大致结果NAN:// ios\安卓、PC都能识...原创 2019-07-01 11:27:13 · 1003 阅读 · 0 评论 -
各类资源地址管理
1、自动滚动用户信息–例:月度锦鲤https://github.com/wj704/vue-marquee-ho/tree/master/src原创 2019-06-25 17:09:32 · 233 阅读 · 0 评论 -
时间戳以及时间格式的相互转化
1、时间戳转换成常规的时间格式 ‘yyyy年MM月dd日 hh:mm:ss’ 或 'yyyy-MM-dd’等// 如给定的时间戳是:"1559700659"//第一步:时间戳为10位需*1000,时间戳为13位的话不需乘1000let changesjc = new Date(1559700659* 1000);//转换成普通日期格式let fk_time = _this.formatD...原创 2019-06-05 14:50:23 · 3582 阅读 · 0 评论 -
解决问题之三:elementui 的tabs组件出现蓝色边框问题
解决方法:// An highlighted block.tabNews .el-tabs__item:focus.is-active.is-focus:not(:active) { -webkit-box-shadow: none; box-shadow: none;}问题展示方式:原创 2019-05-17 15:01:37 · 4495 阅读 · 2 评论 -
回到页面顶部
实现效果:点击向上箭头回到顶部实现方式:// html结构<div class="suspension"><!-- 在线咨询 --> <div class="consultation"> <img src="assets/images/cut-icon_slices/cut_homepage_kefu.png" alt=""&g...原创 2019-05-24 14:20:29 · 252 阅读 · 0 评论 -
解决问题之二:css排版,div内的P标签内的文字字数不一致时,会导致整个div容器掉下来,不对齐
问题现象bug出现的效果(即:展示形式)没有对齐在一个水平线解决方式:在设置display: inline-block;的容器同时设置vertical-align: top;课外拓展知识:原创 2019-05-10 11:40:58 · 1354 阅读 · 0 评论 -
Object.assign 合并多个JavaScript的对象
Object.assign 合并多个JavaScript的对象常规用法,以及一些注意事项和说明:ES6新添加的接口语法:Object.assign(target,source1,source2,source3);属于浅拷贝——>拷贝过来的只是一个引用对象合并时,一旦碰到对象里同名属性,就会出现后面对象中的属性覆盖前面对象中的属性现象示例一般按如下方式写v...原创 2018-08-07 13:15:15 · 388 阅读 · 0 评论 -
css 进度条
实现效果完整代码实现1、html部分下面展示一些 DOM结构。// A code block// An highlighted block&amp;lt;div class=&quot;xui-wrapper xui-myPromption-wrapper&quot;&amp;gt; &amp;lt;div class=&quot;xui-mainContain原创 2018-12-28 17:53:47 · 1277 阅读 · 0 评论 -
vue的一点小记录
Vue 选项对象中的 el 属性、template属性和 render 渲染函数的关系Vue 选项对象中有 render 渲染函数时,Vue 构造函数将直接使用渲染函数渲染 DOM 树当选项对象中没有 render 渲染函数时,Vue 构造函数首先通过将 template 模板编译生成渲染函数,然后再渲染 DOM 树而当 Vue 选项对象中既没有 render 渲染函数,也没有 templ...原创 2019-01-31 10:37:30 · 103 阅读 · 0 评论 -
Vue中监听键盘事件(该文档记录enter)
按键盘Enter回车,实现用户登录vue代码(html+js)下面展示 引用element组件el-input实现用户信息输入并绑定回车事件。// 关键在于@keyup.enter.native="searchFile"// An highlighted block<el-form class="m-login" :model="loginForm" ref="loginFor...原创 2019-02-26 16:26:51 · 560 阅读 · 0 评论 -
iframe兼容ios、安卓
iframe适配问题问题描述:iframe引入外部页面,安卓机型正常,ios机型上宽度无法自适应,超出了设置的宽度大小(即:设置宽度无效)解决方案:在iframe标签外嵌套一层,并设置css属性:-webkit-overflow-scrolling: touch; 但在chrome查看样式,出现横线划掉,不用去管他,继续这样操作就好;此问题的关键在于iframe标签里面加入:scroll...原创 2019-02-26 16:42:05 · 2503 阅读 · 0 评论 -
解决问题之一:font-size 影响页面布局
为实现效果如下:遇到的问题:实现方法,border bottom+right 然后 nth(4n)没有没有 right但是这样会造成一个问题div之前会有空隙,如下图:为什么会遇到这个问题,怎么解决?原因:因为页面默认的font-size字体大小影响了解决:重置body,html{font-size:0}或者可以直接在当前元素的父元素设置font-size:0,因为全局设置可能会...原创 2019-04-26 15:41:52 · 2267 阅读 · 0 评论 -
px 、em 、rem各单位换算
相同点:都是长度单位异同点:px:(像素)的值是固定的,指定是多少就是多少,计算比较容易。em:值不是固定的(弹性布局),并且em会继承父级元素的字体大小。rem: 与em相同都是相对单位,只是他的相对仅仅针对html而言。各单位换算:em计算方法:1 ÷ 父元素的font-size × 需要转换的像素值 = em值备注: 浏览器的默认字体高都是16px。所...原创 2019-04-18 15:07:13 · 1079 阅读 · 0 评论 -
超出文本溢出省略号
方法一:超出一行省略// A code block.text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}方法二:超出多行省略(设置行数)// A code block.text{ overflow: hidden; text-overflow: ellipsis; ...原创 2019-05-08 11:30:55 · 164 阅读 · 0 评论 -
vue 上拉动态加载数据
分析:需要判断滚动条是否到底部:需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。scrollTop为滚动条在Y轴上的滚动距离。clientHeight为内容可视区域的高度。scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clien...原创 2019-04-30 15:29:36 · 1479 阅读 · 0 评论 -
动态插入视频地址
关键核心语句:document.getElementById(‘video’).load();一、用原生的书写 //html <img class="playvideo" src="assets/images/play.png" alt=""> <div class="video-warp" style="display: none;"> <p ...原创 2019-05-14 10:08:10 · 174289 阅读 · 1 评论 -
关于swiper动态加载数据失败滑动失效等问题
具体代码实现片段:下面展示一些 基础用法和动态加载数据实现方式。第一步:取数据第二步:渲染数据第三步:初始化swiper// An highlighted blockvar slide_pic=[ { img:'assets/images/banner1.png', link:'https://www.baidu.co...原创 2019-05-07 17:01:42 · 1528 阅读 · 0 评论 -
VUE 列表滚动效果
transition实现动效 - DOM 部分<div class="scroll_bg"> <ul class="scroll_content" :style="{ top }"> <li v-for="(item,index) in invit_info.text_roll">{{item}}&原创 2018-08-09 10:52:33 · 7267 阅读 · 0 评论