- 博客(40)
- 收藏
- 关注
RSS订阅原创 使用 class实现tab切换
使用面向对象实现了tab的切换,新增,编辑,删除html 结构 <body> <h1>Tab 切换</h1> <div class="main_box" id="tab_wrap"> <!-- tab --> <div class="tab_wrap"> <div class="tab"> <ul> <
2022-05-06 14:52:23
408
原创 ES6 中的 Class 类
ES6 中的新引入的 class 具有正式定义类的能力,我们可以使用 class 关键字来定义类,和函数类型相似,类的定义的主要方式是 类声明 和 类表达式1.类的定义类的两种定义的方式都需要使用到 class 关键字 // 类声明 class Person {} // 类表达式 let Person = class {};需要注意的是,类表达式和函数表达式类似,使用 var 关键字声明,在求值前引用,拿到的是undefined,如果是使用 let 关键字声明,则会报错,原因是使用
2022-05-04 17:20:02
1653
原创 React 的生命周期
1.初始化阶段1.1 componentWillMount()在render之前执行,在这个函数中可以进行渲染之前的最后一次 state 修改import React, { Component } from "react";export default class App extends Component { state = { text:"人生自古谁无死,留取丹心照汗青" }; render() { return <div>{this.state.te
2022-04-29 10:28:17
183
原创 JavaScript 节流函数封装
上一篇写了防抖,现在来写一下节流,节流函数是在一段时间内多次触发某个事件,但是在这一段时间内只执行一次,下面我们来实现一个 按钮在 N 秒之内点击多次,但是却执行一次,话不多说,上代码.// 首先,我们在 html 里面 写一个按钮<button id="button">点我点我快点我</button>和防抖一样,还是使用 setTimeout 来实现,按钮点击,创建延时,但是在延迟没有执行的情况下,我们不能再次创建延迟let button = document.query
2022-04-25 17:44:43
2614
原创 JavaScript 防抖函数 封装
防抖:将一定时间段内的多次高频操作优化为只在最后一次执行业务中简单的防抖:<input type="text" id="input">现在我们对input输入框的输入数据做防抖操作,持续输入的情况下在最后一次 keyup 触发的一秒钟之后打印输入框的结果;// 获取 DOM 元素let input=document.querySelector('#input');//给DOM元素添加 keyup 事件input.addEventListener('keyup',(e)=>{
2022-04-25 15:32:57
2628
原创 自定义 element-ui 主题色
方案一:如果仅希望更换 Element 的主题色，推荐使用在线主题生成工具。生成工具的地址:https://elementui.github.io/theme-chalk-preview/#/zh-CN点击切换主题色,替换成项目UI的主题色切换成功之后,“下载主题” 的按钮会高亮,点击下载主题,下载的压缩包是生成的主题颜色样式文件,将文件解压之后,拖入你的项目之中,然后修改 main.js 中 element 样式的引入地址为你拖入的文件import ElementUI from "el
2022-04-24 21:51:15
1108
原创 JavaScript 获取当前一周的日期
getCurrentWeek(date) { let nowData = new Date(date); //传入时间参数,如 2021-11-09 获取给定日期所属的周 日期 ;不给定日期,获取当天所属的周日期 let currentDay = nowData.getDay(); if (currentDay == 0) { currentDay = 7; } let beforweek = [], af.
2021-11-09 16:44:05
2103
原创 JavaScript 获取当前是周几
获取当前是周几: getWeekDate() { var now = new Date(); var day = now.getDay(); var weeks = new Array( "周日", "周一", "周二", "周三", "周四", "周五", "周六" ); var week = weeks[day];
2021-11-09 16:40:53
8803
原创 随机指定长度的字符串
createKeyS(len){// 字符串可以根据自己的let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','a', 'b', 'c', 'd', 'e', 'f', 'g'.
2021-08-20 14:56:39
70
原创 vue项目打包之后在本地运行
live-server 是一款 npm 工具,首先需要安装yarn add live-server -S命令行常用配置表在项目中找到package.json 文件,修改 scripts 部分"live-serve": "live-server ./dist --port=8081",先执行 build 生成 dist 文件,接着运行 live-serve 即可yarn run live-serve运行成功...
2020-11-23 20:58:29
1589
原创 使用 rem 布局 实现H5页面自适应
第一步建立 resetSize.jsfunction setHtmlFontsize() { const htmlwidth = document.documentElement.clientWidth || document.body.clientWidth; const html = document.getElementsByTagName("html")[0]; html.style.fontSize = htmlwidth / 37.5 + 'px';}setHtmlFonts
2020-11-06 19:03:36
359
原创 css实现滚动吸顶之 粘性定位
css实现滚动吸顶之 粘性定位以前做滚动吸顶都是使用 position: fixed; ,通过监听页面的滚动距离或者是吸顶元素距离top顶部的距离做计算判断是否需求吸顶，这样做影响页面性能，代码量也增多了，最近逛知乎发现一个 position 还有一个好用的 属性值用来做吸顶动效；那就是 sticky ；查了一个资料，属于新增属性值，sticky 比较有意思的就是 当给元素设置里sticky ，在屏幕的范围内，该元素不受定位的影响，当该元素的位置将要移出偏移的范围时，该元素的会变成 fixed 定位，根据
2020-08-12 17:10:57
1249
原创 JavaScript实现手机号码 3-4-4格式,并控制新增和删除时光标的位置
JavaScript实现手机号码 3-4-4格式手机号实现3-4-4格式相对来说还是比较简单的，监听input事件，实时的获取手机号码，然后根据手机号码的长度做截取和拼接的操作，即可实现手机格式的处理，实现格式的处理之后，我们还需要支持在指定光标进行新增和删除// An highlighted block <input ref="inputRef" class="life-input" v-model="value"
2020-06-01 10:29:04
802
原创 H5 实现 弹出弹层的同时阻止页面滚动
H5 实现 弹出弹层的同时阻止页面滚动通常自己写弹窗的时候,希望弹出弹窗后,弹窗下面的内容可以阻止滚动,优化体验效果;下面的代码可以实现let y;class lock{ static afterOpen() { // 弹出弹窗,设置body 的 position 为 fixed, 阻止body的滚动 Y = document.scrollingElement.scroll...
2020-03-11 15:39:00
734
原创 H5 监听手机返回事件
1.使用popstate监听返回事件//在mounted 里面挂载 popstate 事件mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, '#1'); window.addEventLis...
2019-11-26 13:55:34
3751
原创 html2canvas 图片合成模糊以及保存为图片背景图丢失问题解决
html2canvas 图片合成模糊以及保存为图片背景图丢失问题解决注意作为背景的图片必须放在服务器,存放在本地会出现截图的时候背景图丢失的问题;背景图必须放在img里面里面,通过定位处理成和背景一样,否则会可能出现模糊的问题html <div class="img-box"> <div class="img-pic"> ...
2019-07-20 16:09:31
6350
1
原创 常用正则
手机号验证let phone_rule=/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
2019-04-09 17:28:21
158
原创 JavaScript获取指定的某一天的时间
getDay(day){ var today = new Date(); var targetday=today.getTime() + 1000*60*60*24*day; today.setTime(targetday); //关键代码 var tYear = today.getFullYear(); //获取年份 var tMonth = tod...
2019-02-18 12:15:27
2766
原创 table 行合并
getSpanArr(data) { this.spanArr = []; if (data === null) { return; } for (var i = 0; i < data.length; i++) { if (i === 0) { this.spanArr.push(1);...
2019-01-30 15:28:24
913
原创 使用element的时间选择器--时间格式转换
时间格式转换submit() { console.log(this.formatDate(this.form.date1[0])); //this.form.date1[0]) 为传入的时间 }, formatDate(date) { if (typeof date == "string") { return this.format...
2018-11-21 16:18:34
6100
原创 利用a标签下载图片
一般场景下<a href="/images/myw3schoolimage.jpg" download="w3logo">联合后端进行图片下载如果后端传过来的图片数据是base64格式的let src = `data:image/png;base64,${res.data}`; // res.data即为转成base64格式的图片数据let a = document.cr...
2018-11-15 15:50:22
3976
2
原创 el-input的使用之坑
el-input使用.native在使用vue+element的项目中,使用el-input实现点击enter键触发事件的代码如下 <el-input placeholder="请输入礼盒券码" prefix-icon="el-icon-search" @keyup.enter.native='getGoods(currentType)' v-model...
2018-11-14 16:19:05
25050
原创 一个函数实现数组的从大到小排列和从小到大排列
var arr2 = [12, 3, 4, 6, 78, 90]var arr3 = [12, 3, 4, 6, 78, 90] function sort(arr, order) { var result = []; for (var i = 0; i < arr.length + 1; i++) { // 不同的排列顺序 if (order...
2018-07-09 10:51:34
11486
原创 微信小程序遇坑一 ---页面路径
微信小程序遇坑一—–页面路径刚刚开始学习微信小程序，看学习视频的时候看到老师点击目录就跳转到相应的页面，自己弄了半天也没有任何效果，页面路径没有任何改变，试了老半天发现是app.json文件中的page中的路径的位置问题，在微信WEB开发者工具中，适中只显示第一个路径中的内容，一个小问题浪费了十几分钟的时间，特地分享出来，以免有像我一样的遇到这种尴尬的问题的用了好久的时间却找不到问题的症候所在...
2018-05-22 21:08:03
13568
1
原创 React 的函数组件和类组件中的props
React 的函数组件和类组件中的props函数组件函数组件中的props是一个对象直接作为函数的参数传入,在组件内容中可以直接用点语法使用props对象中的属性,代码如下:function Test1(props) { return( <div> The user is <b>{props...
2018-05-15 09:51:01
13075
原创 学习React 遇到的报错记录
学习React时遇到的报错记录1._registerComponent(…): Target container is not a DOM element. 错误原因:在页面中找不到对应的DOM元素, 错误代码:<body><div id="app"></div> //此处的DOM元素的ID是app</body><...
2018-05-15 09:26:02
913
原创 React中的style样式
React中的style样式在react中使用style样式时,先创建一个对象,对象的内容时css属性以及属性值,在使用的时候,将对象绑定在相应的元素上<body><div id="app"></div></body><script type="text/babel"> const style={
2018-05-15 09:09:01
51208
1
原创 vue+webpack
vue + webpack在此假设已经安装了node1.新建自己的文件夹vue 2.初始化 进入刚刚新建的文件夹npm install -g vue-cli //全局安装vue-cli 脚手架vue init webpack vue-test //项目名称 vue-test3.安装vue模板cd vue-test //进入vue-testnpm instal...
2018-04-23 17:19:21
178
原创 css样式中关于透明度的设置
今天在写dialog对话框组件时,给外面 的父元素设置了透明度,但是影响到内部的子元素,查了资料找到了原因以及解决办法; 设置父元素opacity：0.4，子元素不设置opacity，子元素会受到父元素opacity的影响，也会有0.4的透明度。即使设置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.4的基础上设置的，因此子元素的opacity还是0.4。...
2018-04-18 15:01:38
1893
原创 GIT 拉取项目
当别人已经建立好项目时,并且已将你加入项目 一: 查看自己是否生成ssh密匙 命令: cd ~/.ssh 如果可以进入到.ssh文件目录下,则说明之前生成过密匙,可以直接使用, 另一种情况则是之前没有配置过,需要进行以下操作 检查下自己之前有没有配置: git config user.name git config user.email 1)如果之前没有配置过 ① 配置 gi...
2018-04-17 09:35:10
3915
原创 vue 组件状态冲突
vue 组件状态冲突在写vue组件Carousel 时,出现在同一个页面中多次使用同一个组件时的状态冲突,原因是过多的使用了JavaScript原生的DOM操作方式,修改使用vue中ref 操作DOM元素后,则此冲突消失;vue中对于ref的解释为:ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 D...
2018-04-16 15:36:42
5232
原创 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “ty...
2018-04-13 15:25:50
2858
原创 :not 否定伪类
:not 否定伪类可以用来排除某些元素不想要渲染的元素之后进行渲染 CSS否定伪类，:not(X)，是以一个简单的X选择器为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。其参数不能包含另外一个否定选择器; :not伪类的优先级即为它参数选择器的优先级。:not伪类不会增加选择器的优先级。 使用方式:div:hover:not(.tr-0){ backg...
2018-04-04 16:55:48
1318
原创 Right-hand side of ‘instanceof’ is not an object
Right-hand side of ‘instanceof’ is not an object出现此错误的编码export default{ props: { duration: 3, }}正确的写法export default{ props: { duration: { type: Number, default: 3, }
2018-03-30 17:39:56
20184
原创 DOM中的事件
事件就是文档或浏览器窗口发生的一些特定的交互瞬间，事件的三要素 分别是：事件源（触发事件的元素）、事件名称（触发事件的名称）、事件处理函数（触发事件时调用的函数）。
2017-08-31 00:26:32
226
原创 如何实现全选与反选
我们经常会看到有些网站中在需要有选项的地方会出现全选，当我们点击全选的时候，所有的都会被选中，下面我们来说一下如何实现这种效果。
2017-08-30 23:57:12
559
原创 JavaScript中的递归函数
递归和闭包作为JavaScript中的两大难点，让很多同学望而生畏，下面就以一个简单的阶乘来说一下我对于递归的理解
2017-08-24 20:59:32
1340
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人