web前端
关注
分享
扫一扫
佛系孤单
这个作者很懒，什么都没留下…
展开
-
css写聚光灯效果
用比较简单的办法实现聚光灯的效果，利用radial-gradient() 函数写的，因为这个函数是径向渐变创建 “图像”<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu..原创 2020-09-10 16:39:31 · 327 阅读 · 0 评论 -
keep-alive中需要刷新一部分页面的操作
作用：在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.介绍： keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。实际项目中,需要配合vue-router共同使用.router-view 也是一个组件，如果直接被包在 keep-alive 里面，所原创 2020-09-09 14:09:55 · 1336 阅读 · 0 评论 -
Uncaught SyntaxError: Unexpected token o in JSON at position 1问题的解决
在用到JSON.parse()的时候可能会经常遇到这种错误比较烦人，查找一番资料后发现，是因为变量的类型不一样可能会导致这个错误，JSON.parse()里的参数只能是string类型，当为obj的时候就会出现这个错误，那这样就比较好解决判断一下就可以了（前提是你需要转的参数是json格式的哦）...原创 2020-09-09 10:53:34 · 1714 阅读 · 0 评论 -
H5直播时疯狂点赞的实现
CSS3 实现用 CSS3 实现动画，显然，我们想到的是用 animation 。首先看下 animation 合并写法，具体含义就不解释了，如果需要可以自行了解。animation: name duration timing-function delay iteration-count direction fill-mode play-state;我们开始来一步一步实现。Step 1: 固定区域，设置基本样式首先，我们先准备 1 张点赞动画图片：看一下 HTML 结构。外层一个结构固定整个.原创 2020-06-16 17:00:08 · 932 阅读 · 0 评论 -
算法之数组
一种最基础的数据结构，每种编程语言都有，它编号从 0 开始，代表一组连续的储存结构，用来储存同一种类型的数据。数组：let array = [1, 2, 3]栈： let stack = [1, 2, 3] //进栈 stack.push(4) //出栈 stack.pop()队列：let queue = [1, 2, 3] //进队 queue.push(4) //出队原创 2020-06-02 22:07:18 · 251 阅读 · 0 评论 -
TinyMCE富文本编辑器
安装tinymce-vuenpm install @tinymce/tinymce-vue -S下载tinymcenpm install tinymce -S下载tinymce完成后在node_modules 中找到 tinymce/skins目录，将其复制到public下新建的文件夹tinymce里，在下载中文语音包中文语音包下载完解压之后的结构是：封装一个Editor的组件:<template> <div class="tinymce-editor">原创 2020-06-02 10:14:05 · 318 阅读 · 0 评论 -
苹果营销页中几个有趣的交互（粘性定位sticky,滚动视差 background-attachment）
翻盖效果一个是屏幕慢慢打开的效果，在屏幕打开的过程中，电脑图片 是在屏幕中固定不动的，直到打开完毕或者关闭完毕的时候再让 电脑图片 随着滚动条滚动。粘性定位 sticky可以简单的认为是 相对定位 relative 和 固定定位 fixed 的混合，元素在跨越指定范围前为相对定位，之后为固定定位。sticky 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于 viewport 来计算元素的偏移量。粘性定位中有一个“流盒”（flow box）的概念，原创 2020-05-27 10:53:49 · 736 阅读 · 0 评论 -
vue处理sku的一种方法（返回已有库存组合好的）
总体实现思路接口获取现有库存列表以及sku规格属性列表（坑：库存可能存在某个商品规格没有，所以最全的规格属性应该是接口获取的，而不是渲染库存得到的）sku规格属性列表与库存列表对比，将没有库存的选项置灰点击某一个具体的属性，将其置为已选状态或取消已选状态循环规格属性列表，将disabled置为true，然后拿所有规格属性的每一项分别与已选中的数据的每一项，组成一个新的比较项，与现有库存比较，找到存在的可点项，将可点击项置disable置为false库存列表为：[“小,绿,one”,“小,绿.原创 2020-05-26 17:33:04 · 1106 阅读 · 1 评论 -
解决小程序自定义tabbar栏切换闪屏的效果（uniapp自定义同样解决）
话不多说，直接上代码解决问题自定义导航栏的时候会定义一个tabbar的页面，如下：（需求不一样代码不一样，大致效果是一样的）<view class="tabbar"> <view class="tabbar-item" @click="onChange(1)"> <image v-if="'pages/index/index' == curretnPa...原创 2020-03-20 14:56:03 · 16381 阅读 · 16 评论 -
H5页面必会遇到的问题及解决办法
前言在我们开发H5页面的时候必会遇到一些兼容性等爬过坑的问题，在这里我将这些问题汇总一下，自己也做一下笔记问题：1,ios滑动不流畅2，ios上拉边界下拉出现白色空白3，页面件放大或缩小不确定性行为4，click点击穿透与延迟5，软键盘弹出将页面顶起，收起未回落问题（导致整体页面上移）6,iphonex 底部栏适配问题7，保存页面为图片和二维码问题和解决方案8，微信公众号H5分...原创 2020-03-17 10:06:44 · 2532 阅读 · 0 评论 -
基于vue商品图片轮播和放大镜的方案
实现原理放大镜的原理用一句话概括，就是根据小图上的鼠标位置去定位大图。原理图（以2倍放大为例）相信原理图已经画的很明白了， 图中，左侧框是小图框，其蓝色区域为图片遮罩层（需放大区域），右侧框是整个大图目前所在区域，其蓝色区域是放大区域，设置超出隐藏，就实现了放大遮罩区域的效果。显然，两块蓝色区域存在着某种对应关系，即遮罩的左上角位置（相对于小图，以下称 X 坐标）和放大区域（相对于大图）...原创 2020-03-06 15:46:55 · 2357 阅读 · 1 评论 -
如何在github上精准找到你想要的项目
不知道小伙伴们一开始接触github有没有这样的一个疑问，当我们想找一个vue的后台管理项目时，你可能只会打开github网站，在搜索栏直接输入vue，会看到一堆的结果，这时你找了几页都没发现你需要的，你可能就直接放弃了。我一开始也和上述一样的，所以每次在github都找不到我所想要的，但是。。。开源项目的组成部分开源项目一般都会有这些组成部分：name:项目名description：...原创 2020-02-13 10:48:22 · 5810 阅读 · 0 评论 -
vue中的虚拟dom和diff算法
虚拟dom概念虚拟DOM（Virtual DOM）是对DOM的JS抽象表示，它们是JS对象，能够描述DOM结构和关系。应用的各种状态变化会作用于虚拟DOM，最终映射到DOM上。js在操作数据时希望有个中间层，这个中间层就是虚拟dom操作，当我们对中间层进行操作的时候我希望可以直接转换成dom，那么这中间的两个操作分别是数据响应式和打补丁（patch）工作机制： js操作=》dom 数据...原创 2020-02-12 18:20:55 · 792 阅读 · 0 评论 -
vue批量异步更新策略
异步更新队列vue高效的秘诀是一套批量，异步的更新策略在程序中有好多个组件，每个组件对应一个watch实例，在一次事件循环更新周期内，可能有好多数据发生变化，可能每个组件都会变，这时候最好的方式就是将组件批量的一次更新完之后，浏览器再刷新页面，这时候是最高效的做法概念事件循环：浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务而制定的一套工作机制。宏任务：代表一个个离散的、独立...原创 2020-02-12 13:32:56 · 1275 阅读 · 0 评论 -
css世界（面试题）
1，介绍下 BFC 及其应用概念：BFC就是块级格式上下文，是页面盒模型（ie和w3c标准）布局中的一种css渲染方式，是一个独立的容器，这个独立容器里面的元素和外面的元素互不干扰，不会影响外面的元素。创建BFC：html的根元素floa浮动绝对定位overflow不为visiabledisplay为表格布局或弹性布局时BFC应用：1，清除浮动2，防止同一BFC容器中相邻的...原创 2020-02-11 14:41:59 · 213 阅读 · 0 评论 -
小程序城市联动
wxml<view class="searchLetter touchClass"> <view wx:for="{{searchLetter}}" style="color:#666666;font-size:24rpx;height: {{itemH}}px;line-height: {{itemH}}px;" wx:key="index" data-letter="{...原创 2020-01-03 10:26:09 · 303 阅读 · 0 评论 -
webpack搭建一个项目
1，安装与基本命令npm install webpack-cli -g2，3，4，热替换因为我们搭建的工程化项目不是自动化的，修改一行代码必须编译，这是一件非常麻烦的一件事，我们需要自动化的编译的，这时候就需要启动服务，借助webpack-dev-server 插件5，webpack4.0npm install vue-cli -gvue init webpack 项目名 然...原创 2019-12-30 15:06:36 · 295 阅读 · 0 评论 -
弹出层一些注意点
注意点一在写弹出层动画时一定要注意 none和block之间的切换（可能不一定是这个，其他的只要产生出现和没有出现都是这种情况）在写动画的时候一定要延迟，不延迟的话就没有动画的过渡注意点二在弹出层出现之后底下的页面不要滚动时在整个页面的css加 height:100vh;overflow:hidden;...原创 2019-11-06 16:45:03 · 125 阅读 · 0 评论 -
数组扁平化
已知如下数组：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组第一种方法Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ retu...原创 2019-11-05 10:05:55 · 184 阅读 · 0 评论 -
nodejs简单的爬虫
爬虫：代替浏览器去做一个自动访问的程序思路：首先建一个空的文件夹，在里面创建app.js在命令行里面运行 npm install --save cheerio找到需要爬虫的网址http://sports.sina.com.cn/nba/1.shtml//引入标准http模块var http = require('http');var cheerio = require('chee...原创 2019-10-29 09:16:42 · 143 阅读 · 0 评论 -
leetcode电话号码的字母组合
给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母。示例:输入：“23”输出：[“ad”, “ae”, “af”, “bd”, “be”, “bf”, “cd”, “ce”, “cf”].思路：首先要将数字对应的字母用一个数组存起来，这个定义是很重要的，决定着后续代码的复杂度将传递过来的数字找到对...原创 2019-10-28 15:36:47 · 183 阅读 · 0 评论 -
前端中适配各种手机模式的一种解决办法
在前端开发中因为有时候需要适配手机而头痛，之前我的解决办法都是media和js一起来适配，但是会写好多好多代码，今天在群里看到有个人发的解决办法很好，我就发出来分享一波<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" ...原创 2019-10-24 14:20:31 · 1916 阅读 · 0 评论 -
前端上传excel文件并读取文件里的数据
1，纯js实现文件的上传读取数据并展示github 可以下载文件本地运行演示地址读取本地文件$(function() { document.getElementById('file').addEventListener('change', function(e) { var files = e.target.files; console.log(files) if...原创 2019-10-24 11:54:22 · 6516 阅读 · 1 评论 -
你必须知道的图片压缩
1，为啥要压缩图片可能我们最平常的操作图片就是从ui设计师那儿拿到图片展示出来就行，除非图片特别大我们才会压缩一下，但是有时候压缩会降低品质，就在这里推荐几个比较好用的处理图片的办法2，imagemin-pngquant（imagemin-pngquant）npm install imagemin-pngquant在webpack里面配置 import ImageminPlugin ...原创 2019-10-22 14:00:30 · 691 阅读 · 0 评论 -
vue.js实现一键copy功能
1，首先建一个copyComm.js的文件const vCopy = { // 名字爱取啥取啥 /* bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置 el: 作用的 dom 对象 value: 传给指令的值，也就是我们要 copy 的值 */ bind(el, { value }) { el.$value = value; // 用一个...原创 2019-09-16 16:16:40 · 5708 阅读 · 1 评论 -
tcp的三次握手和四次挥手
tcp三次握手1，客户端采用tcp协议向服务器端发送带有syn的数据，等待服务器确认2，服务器接收到客户端发送过来的syn数据，必须确认syn，并发送ack标志，并会向客户端发送一个syn数据标识3 ，客户端接收到服务器发送过来的ack+syn包后，自己也会向服务器一个ack的包，这样服务器端和客户端就建立起链接了，可以开始传输数据tcp四次挥手当客户端的数据传输到尾部时，客户端向服...原创 2019-07-27 18:28:30 · 108 阅读 · 0 评论 -
写网站的一些技巧（一站式开发的原理）
<style> * { margin: 0; padding: 0; } ul li { float: left; margin-left: 40px; } div { dis...原创 2019-09-27 15:22:48 · 246 阅读 · 0 评论 -
split方法、splice方法
1，split方法split() 方法用于把一个字符串分割成字符串数组。例如：数据中现在有这样一个结果 128b8f730592cc8db33ea52985127d44,44bee6555822d8321d2d1a2c1ac3b2cf,b2f939f26e512934e165f3e784cc74ca,我需要把这个字符串变成数组 console.log(res.result.produc...原创 2019-09-11 09:39:49 · 1136 阅读 · 0 评论 -
拷贝
深拷贝和浅拷贝都是针对的引用类型，JS中的变量类型分为值类型（基本类型）和引用类型；对值类型进行复制操作会对值进行一份拷贝，而对引用类型赋值，则会进行地址的拷贝，最终两个变量指向同一份数据1,Object.assignObject.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。在数据处理中可能会遇到这样一个情况，在一个数组里面有一组对象，现...原创 2019-09-10 10:00:40 · 212 阅读 · 0 评论 -
请求数据后怎么添加一个属性，并对应有get和set方法
在后台请求过来的数据res，在赋值给变量之前加上属性，之后再赋值给变量，打印出来的结果是有对应的get和set方法res.forEach((item)=>{ item.num = 4 }) console.log(res) this.topicList = res...原创 2019-09-06 14:55:32 · 962 阅读 · 0 评论 -
ES6中的let
let 的特点1，在块级作用域内有效2，不能重复声明3，不会预处理，不存在变量提升变量提升就是预处理的，相当于预解析，预解析就是在js之前解析一遍，首先处理var和function函数<button>测试1</button><button>测试2</button><button>测试3</button><...原创 2019-08-27 23:17:47 · 149 阅读 · 0 评论 -
输入框动画
动画如下实现第一个动画的原理和动画:before 和 :after伪元素指定了一个元素文档树内容之前和之后的内容。由于input标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。 <div class="active-input"> <input placeholder="input underline" class=...原创 2019-08-01 15:54:53 · 270 阅读 · 0 评论 -
面试之promise
promise详解原创 2019-08-05 16:47:14 · 381 阅读 · 0 评论 -
vue中的axios的封装和api接口的管理
vue中的axios的封装和api接口的管理原创 2019-08-05 16:38:57 · 289 阅读 · 0 评论 -
清除浮动
浮动是什么？浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。如下：html<div class="container"> <div class="left"></div> <div class="right"></div></div>css.container{ ...原创 2019-08-05 16:36:38 · 123 阅读 · 0 评论 -
canvs中的arc方法详解
arc的定义在使用arc这个方法之前，你一定要知道arc方法中参数是代表什么意思arc() 方法创建弧/曲线（用于创建圆或部分圆）。提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2Math.PI。提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。绿色中心： arc(100,75,50,0Math.PI,1.5Math.PI)红色起...原创 2019-07-31 10:35:57 · 1234 阅读 · 0 评论 -
写静态页面的一些技巧
1，html中点击a标签使其不跳另一个页面的写法 <a href="javascript:void(0);">首页</a>2,移动到某个元素1，首先获取所有相同的dom元素 用document.querySelectorAll获取2，for循环里面写 headerLi[i].onmouseover = function () {}可以获取到对应的this，也可...原创 2019-09-11 11:43:18 · 1085 阅读 · 0 评论 -
js实现放大镜的效果
需要实现的就是这样 <style> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; margin: 100px 0 0 300px;...原创 2019-09-11 11:50:07 · 170 阅读 · 0 评论 -
js实现无重复字符的最长字串
思路：1，先把字符串分割分字符数组str，新建两个数组obj,list，一个变量max2，循环str，没有重复的存取到obj中，max实时存取obj的长度，list拷贝没有重复字符之前的obj3，当有重复字符时，将obj置空，再将当前字符存取到obj中，这时候需要考虑一个重要的东西，就是list里面的，因为list里面有没有重复字符的那一部分，也需要存取到obj的前面（我一开始就没考虑到li...原创 2019-09-23 17:32:18 · 954 阅读 · 1 评论 -
js算法题
1.xiaoshuo-ss-sfff-fe 变为驼峰xiaoshuoSsSfffFe普通方法：1，先用split将字符串分割开2，将分割开字符串的第一位字符大写，在加上原分隔开字符串去掉第一位字符（slice）splice/split/slice方法可看我其他博客，有特地写到function getCamelCase(str) { let str1 = str.spli...原创 2019-09-20 18:23:41 · 267 阅读 · 0 评论