前端技术
关注
分享
扫一扫
文章平均质量分 65
舒眉
流水不腐,户枢不蠹。
展开
-
链接-前端备注
https://animate.style/https://es6.ruanyifeng.com/https://css-tricks.com/almanac/properties/a/animation/https://echarts.apache.org/examples/zh/editor.html?c=pie-legendhttps://api.apiopen.top/api.htmlhttps://tool.oschina.net/codeformat/xmlhttps://www.i原创 2021-06-30 15:29:07 · 268 阅读 · 0 评论 -
vue-awesome-swiper的左右切换按钮功能失效问题处理
1. 问题描述原创 2021-06-07 14:07:20 · 5729 阅读 · 1 评论 -
微信小程序学习：基础了解
微信小程序官方文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/1. 环境准备原创 2021-06-01 18:41:18 · 116 阅读 · 0 评论 -
echarts 重新渲染数据
调用时// vue 函数中 let chartDom = document.getElementById("myChart2") if (chartDom.hasAttribute("_echarts_instance_")) { chartDom.removeAttribute("_echarts_instance_"); } this.myChartLed = this.$echarts.init(chartDom); .原创 2021-05-27 20:38:11 · 5337 阅读 · 0 评论 -
Vue-awesome-swiper使用方法
①全局导入import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'; //挂载VueAwesomeSwiperimport 'swiper/dist/css/swiper.css' //引入cssVue.use(VueAwesomeSwiper)②组件引入import { swiper, swiperSlide } from 'vue-awesome-swiper';import 'swiper..原创 2021-05-27 16:08:19 · 1288 阅读 · 0 评论 -
setTinterval定时器清除失败
问题代码：当数值达到29时，对定时器及逆行删除，删除不了，仍在执行 _this.count = 0 this.bomTimer = setInterval(() => { console.log('******') _this.count++ if (_this.count >= 29) { clearInterval(_this.bomTimer) } }, 36)原原创 2021-05-26 16:42:59 · 1639 阅读 · 0 评论 -
vuex学习：
1. 组件之间共享数据的方式父向子传值：v-bind属性绑定 子向父传值：v-on 事件绑定 兄弟组件之间共享数据：EventBus $on 接收数据的那个组件 $emit 发送数据的那个组件2. Vuex2.1 基本概念 Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。能够在vuex中集中管理共享的数据，易于开发和后期维护 能够高效地实现组件之间的数据共享，提高开发效率 存储在vuex中的数据都是响应式的，能够实时保持数据...原创 2021-05-20 21:28:24 · 124 阅读 · 0 评论 -
node学习：包package，Buffer缓存和fs文件系统
1. 包package 包实际上是一个压缩文件，解压以后还原为目录。包里存放的是模块。符合规范的目录如下。包结构：package.json 描述文件（必有） bin 可执行二进制文件 lib js代码 doc 文档 test 单元测试 包描述文件用于表达非代码相关的信息，是一个JSON格式的文件--package.json（不能写注释），位于包的一级目录下，打开包即可看见该文件。...原创 2021-05-12 21:26:45 · 541 阅读 · 0 评论 -
node学习：常用终端命令、环境变量、进程与线程和node模板的使用和真相详解
1. cmd（终端）1.1 常用命令 dir =》列出当前目录下所包含的所有文件 cd 目录名 =》进入指定的目录C:\Users\user>dir C:\Users\user>cd DesktopC:\Users\user\Desktop> md 目录名 =》 当前目录下创建一个文件夹, 可以通过dir命令进行确认其存在性。C:\Users\user\Desktop>md helloC...原创 2021-05-12 09:44:35 · 502 阅读 · 1 评论 -
js 数值运算变成字符串拼接
在进行字符串转整型，再进行运算时，犯了个低级错误，导致运算（加法）不成功成了字符串拼接问题。记录一下此次错误。let str = 'A0032'let addResult = 'A' + parseInt(str.substr(1)) + 1console.log(addResult) // A321此次运算想要字符串剔除A字符，剩余部分进行+1后再与A字符拼接，但是由于错误操作，怎么都实现不了，导致结果总是在原来数字后面拼接字符1，导致结果错误。原因和解决：运算当与字符串一起出现在操作中原创 2021-04-28 11:44:06 · 1727 阅读 · 0 评论 -
es7-11学习：es7、es8async和await、ES9命名捕获分组、反向断言和dotAll模式
1. ES7新特性 1.1Array.prototype.includes() 该方法是用来查找数组中是否存在某个值，如果存在返回true ，如果不存在则返回false。而es6则是通过indexOf()来判断某个值是否在数组中，但是返回值是下标，如果不存在则返回-1。相较于仅仅判断某个值是否在数组中，使用includes更方便。 const arr = [1, 3, 4, 2, 8] console.log(arr.includes(3)) // true ...原创 2021-04-26 20:47:28 · 467 阅读 · 1 评论 -
es6学习：模块化
1. 模块化简介 模块化是指将一个大的程序文件，拆分程许多小的文件，然后将小文件组合起来。 1.1 模块化的好处防止命名冲突（不同模块的相同变量名，重复不冲突） 代码复用（把一个功能代码放在同一个模板里，向外暴露接口，可供给多个地方使用） 高维护性（如果多人对代码修改，不会产生过度冲突；代码和模块升级只需对某一个或某些模块进行升级） 1.2 模板块化规范产品CommonJs 规范 =》 产品:NodeJs、Browerify AMD 规范 =》...原创 2021-04-26 10:21:32 · 466 阅读 · 0 评论 -
es6学习：数值扩展、对象方法的扩展
1.Number.EPSILON 是js 最小精度 Number.isFinite 检测一个数值是否为有限数 Number.isNaN 检测一个数组是否为NaN Number.parseInt与Number.parseFloat 字符串转整数 Number.isInteger 判断一个数是否为整数 Math.trunc 将数字的小数部分抹掉 Math.sign 判断一个数到底为正数 负数 还是 零 ...原创 2021-04-23 11:55:11 · 191 阅读 · 0 评论 -
es6学习：class简介、静态成员和继承和getter与setter
1. class简介 传统的js中没有对象，没有类的概念。传统方法(es5)是通过构造函数，定义并生成新对象，并且将自身的属性共享给新对象。 对于类中的方法是通过prototype属性进行添加的。注意：函数名与实例化构造名相同。（函数名首字母大写，方便区分普通函数）通过构造函数创建对象时必须使用new运算符。 function Phone (brand, price) { this.brand = brand; this.price = pri...原创 2021-04-22 10:48:12 · 936 阅读 · 1 评论 -
es6学习：Set和Map
1. Set es6 提供了新的数据结构 Set（集合），它类似于数组（但不是数组，需要转化），但成员的值是唯一的（可以达到数组去重的效果），集合实现了iterator接口，所以可以使用 扩展运算符 和 for...of 进行遍历。 集合的属性和方法：size 返回集合的元素个数 add 增加一个新元素，返回当前集合 delete 删除元素，返回 Boolean 值 has 检测集合中是否包含某个元素，返回 Boolean 值 clear ...原创 2021-04-08 22:03:54 · 213 阅读 · 0 评论 -
meta
摘录于：meta总结 META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。（1）SEO优化:各关键词间用英文逗号“,”隔开。META的通常用...原创 2021-04-08 20:03:48 · 105 阅读 · 0 评论 -
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
代码段： // 接口地址：http://api.apiopen.top/getJoke // 1. 创建对象 const xhr = new XMLHttpRequest() // 2. 初始化 xhr.open("GET", "http://api.apiopen.top/getJoke") // xhr.setRequestHeader("Access-Control-Allow-Origin","*") // 3原创 2021-04-07 15:18:27 · 386 阅读 · 0 评论 -
es6学习：Promise
1. Promise原创 2021-04-07 09:54:45 · 186 阅读 · 2 评论 -
es6学习：迭代器和生成器
1. 迭代器原创 2021-04-06 14:26:16 · 149 阅读 · 0 评论 -
es6学习：函数参数默认值、rest参数、扩展运算符和symbol数据类型
1. 函数参数默认值（es6允许给函数参数赋值初始值）1.1 形参初始值 具有默认的参数，一般位置置后(潜规则) let add = (a, b, c = 10) => (a + b + c) let result1 = add(1, 2, 3) let result2 = add(1, 2) console.log(result1, result2) // 6 13待更新... ......原创 2021-04-01 15:40:19 · 381 阅读 · 0 评论 -
swiper : 遇到的坑和问题解决
1. loop模式下点击事件失效背景：loop模式下， ① 反向轮播的最后一页 ② 反向轮播后正向轮播的第一页 其slide包含的DOM涉及的事件失效原因：首先先了解swiper的loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。但是复制时不包含DOM中涉及的事件。解决：通过swiper的click回调函数进行处理，代码如下：on: { click: function (e) { ...原创 2021-03-26 14:20:40 · 2299 阅读 · 0 评论 -
es6学习：let, const, 解构赋值，模板字符串, 对象简写
1. let变量声明和声明特性 声明 let a;let b, c, d;let e = 100;let f = 222, g = 'string', h = []; 声明特性 ① 变量不能重复声明（var声明变量可以重复声明，后面声明的值会覆盖掉前面声明的值）Uncaught SyntaxError: Identifier 'XXX' has already been declared// 重复声明报错 ②块级作用域（let 的作用域，只在代码块中有...原创 2021-03-24 21:11:59 · 560 阅读 · 0 评论 -
swiper的使用: 自动轮播失效
1. 背景：嵌套swiper，父组件中有swiper，且改swiper中的子组件中又包含swiper，子组件中swiper的autoplay属性失效 解决：在子组件页面加载完毕后，延迟初始化swiper或更新swiperthis.mySwiper2.update() // 延迟更新 重新初始化2. 背景：swiper自动播放成功，但人为滑动轮播后，不再自动轮播 原因：autoplay中包含属性disableOnInteraction，其含义为 用户操作swiper之后，是否禁...原创 2021-03-24 15:34:06 · 6728 阅读 · 0 评论 -
正则表达式字符全集
本文章摘录于点击此链接表达式全集字符 描述 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“n”匹配字符“n”。“\n”匹配一个换行符。串行“\\”匹配“\”而“\(”则匹配“(”。 ^ 匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。 $ 匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的原创 2021-03-24 14:23:52 · 119 阅读 · 0 评论 -
vue-devtools在 npm run build 失败
小编最近在学习vue相关的知识，但刚开始就卡在了vue的调试工具上，很苦恼。直接上链接吧：→推荐大神解决的文章小编极力喜欢这种方式，解决了我遇到的问题，如果你也与我遇到同样问题也可以点击大神链接。（先安装了node.js）首先大神是在下载好的nodejs\node_modules目录下进行直接npm安装vue-devtools，安装成功后在此目录下会又vue-devtools文件。然后，我就成功了！！！开心接下来就是我搜到的大多数的版本：：：：如果能帮助大家就好，但是我失..原创 2020-09-30 14:55:42 · 4881 阅读 · 0 评论 -
安卓4.2系统前端开发
最近被安卓4.2低版本，低兼容性搞得头懵，测试了两天，问了前辈，摸了一些门道，分享一下。 首先，我做的页面刚开始用到了flex布局和颜色渐变，并做了各个浏览器的兼容性处理，但是并不知道安卓4.2兼容性差，导致重新做。后来用到了简单的页面布局和语法，但是还是出现问题，测试了几个小时，背景都渲染不出来，很是崩溃，查资料也没查到，最后在前辈的帮助下，知道了安卓4.2竟然高度不适配，后来处理高度问题都是用内容本体撑起来的高度，还有用line-height属性，对内容高度进行撑大，效果也很明显。...原创 2020-09-21 09:29:06 · 310 阅读 · 0 评论 -
轮播图的实现原理（左右键切换，圆点切换）
轮播图的实现分两部分，第一部分是图片的切换，另一部分是圆的选择改变图片。首先图片的切换，主要用到了position，每张图片都设定position：absolute；属性，并没有用到浮动的效果。还有设定好被选中的图片的样式。当点击左键时，对图片的index进行判断，若为第一张，要改变index的值为4，其他执行Index--即可；当点击右键时，对图片的index值进行判断，若为最后一张，改变index的值为0，其他执行index++即可。随后进行圆点的切换时，首先要考虑到为每个圆点设置data-in原创 2020-08-18 22:01:34 · 5936 阅读 · 2 评论 -
css制作进度条下划线-经过时过渡到100,松开时过渡到0
效果描述：1.打开页面时。标题下方没有下划线。2.鼠标经过标题时。由0%过渡出现下划线至100%。3.鼠标离开标题时。下划线由100%以过度的效果消失至0%。（做出来的效果还是挺炫的，有进度条的效果）用到的标签（CSS）:a.动画效果：animation:; animation:动画名称（引用） 动画时间 运动曲线 开始时间 播放次数 是否反方向;原创 2017-10-22 11:06:29 · 1288 阅读 · 0 评论 -
三种滑门技术
滑门滑门就是不给导航部分（字体）设置宽度，宽度由字体部分自由撑开，达到一种可自由滑动的效果。1.最早的滑动门由三张图片结合而成，左边的图片负责左边的圆角，中间的图片负责中间导航（自由伸缩）的部分，右面的图片负责右边的圆角。代码： 2.由两张图片组成的而成左边的图片由负责左边的圆角，右面的图片是通过导航内容自动撑开图片显示大小来表示滑动效原创 2017-10-14 08:50:39 · 618 阅读 · 0 评论 -
表单-1
Document * { margin: 0; padding: 0; } form { margin: 10px; height: 500px; } label, input { box-sizing: border-box; } .form-group { width: 500px; height:原创 2017-12-10 10:07:39 · 198 阅读 · 0 评论 -
canvas实现许多小球运动
首先先看一下效果： 一、canvas canvas是画布的意思，画布，就要在其上画画，画画的步骤有：① 抬起笔beginPath()；② 把原来不需要的擦干净clearRect(0,0,w,h);参数是：起初x轴坐标，起初y轴坐标，w是清除区域的看，h是清除区域的高③ 画笔蘸上自己需要的颜色fillStyle = "color";④ 构思...原创 2018-07-25 11:53:32 · 3159 阅读 · 0 评论 -
JS——鼠标移入显示和移除隐藏
例如以下效果：· 鼠标移入onmouseover· 鼠标移除onmouseout· 通过document.getElementById('text')获取当前元素，再对其进行修改display样式。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit原创 2018-07-14 14:43:46 · 18595 阅读 · 0 评论 -
JS——网页换肤
此处的网页换肤的效果通过改变link的href属性，来改变页面的CSS样式，达到还付的效果。效果如下：· 标签内设置事件，且鼠标点击事件onclick = ""代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原创 2018-07-14 15:18:57 · 1889 阅读 · 3 评论 -
JS——全选
本次所说全选效果如下：· 当全选按钮选中，其余按钮都进入选中状态· 当全选按钮取消时，其余按钮都取消选中代码如下：HTML代码<input type="checkbox" id="btn" />全选 <hr/><input type="checkbox"><input type="checkbox">&原创 2018-07-14 16:47:43 · 222 阅读 · 0 评论 -
JS——选项卡
轮番图也是用类似的效果和方法。效果展示：要做到此效果要想到几点：① 当选择当前项的时候，选择项要具备被选择的样式，同时显示当前内容。② 当选择该项的时候，要把其他项的样式去掉，即样式置为空，其他内容隐藏。代码展示：HTML代码<div class="ele"> <ul> <li class="active"><a href="#">原创 2018-07-14 20:48:44 · 9064 阅读 · 2 评论 -
JS——内容提交及电子简洁日历
一、首先讲一下内容提交的方法· innerHTML在JS中是双向功能：获取对象的内容 和 向对象插入内容。 通过var D = document.getElementById('IdName'); D.innnerHTML 来获取id对象的内容； 通过D.innnerHTML='改变内容';来更改id对象里的内容。· innerHTML与innerText的区别【： innner...原创 2018-07-15 11:44:52 · 856 阅读 · 0 评论 -
JS——定时器
一、定时器 有两个定时器：setInterval()、setTimeout()。 他们也有各自的取消函数: clearInterval()、clearTimeout()。参数： setInterval();有两个参数，A和时间B（单位是ms），其中A是自动刷新的那个函数。setTimeout同此。区别： setInterval每Bms会执行一次A，不断重复执行 set...原创 2018-07-15 13:32:23 · 250 阅读 · 0 评论 -
下拉框-鼠标经过时出现下拉框
Document * { margin: 0; padding: 0; } ul { list-style: none; /*去除小圆点*/ } a { text-decoration: none; /*去除链接的下划线*/ color: #666; } .mnue { width: 100%; margin-top原创 2017-10-23 10:51:42 · 2067 阅读 · 0 评论