- 博客(75)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 scss 公共样式
* { margin: 0; padding: 0;}li { list-style: none;}a { color: inherit; text-decoration: none; &:hover { color: inherit; }}::-webkit-file-upload-button { cursor: pointer;}input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌.
2022-05-12 18:39:35
1247
2
原创 scss 动态更换主题样式
//当HTML的data-theme为dark时，样式引用dark//data-theme为其他值时，就采用组件库的默认样式//这里我只定义了两套主题方案，想要再多只需在`$themes`里加就行了//注意一点是，每套配色方案里的key可以自定义但必须一致，不然就会混乱$themes: ( green: ( //字体 font_color1: #07bc78, //背景 background_color1: #07bc78, background_color2: #18b.
2022-05-11 19:33:48
1675
1
原创 CSS实现滚动高度自动变小的粘滞效果
一、先看下效果如下 MP4 视频示意（不动点击播放），可以看到默认页面的 header 头部元素高度挺高的，随着滚动的进行，头部固定定位了，同时高度也变小了，减小对页面高度的占用。眼见为实，您可以狠狠地点击这里：头部标题导航高度自动伸缩demo如何实现的呢？二、双 Sticky 粘性定位需要悬浮固定的元素内外两层嵌套，假设如下HTML代码：<header> <header-inner> ... </header.
2022-04-25 14:32:24
541
原创 找出2个对象中重复的ID
var new = []var arr = [{class_id: "20"class_name: "动漫161班"},{class_id: "21"class_name: "动漫161班"},{class_id: "22"class_name: "动漫161班"},{class_id: "24"class_name: "动漫161班"}]var arr1 = [{class_id: "24"},{class_id: "21"},]new = arr..
2022-03-18 11:16:17
417
原创 pc端区域表鼠标长按滚动
<!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"> <title&...
2021-12-28 09:08:22
177
原创 可滑动的历史进程
<!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"> <titl...
2021-12-17 15:31:48
640
原创 去除数组最后一个
var obj =e;//定义一个object对象 var str = ''//定义一个空字符用来接收对象里的key或者value for( var i=0;i<obj.length;i++) {//遍历item变量里的对象的属性和元素， if(obj[i].is_answer==1){ str += obj[i].item_content + "，"//将obj对象的值遍历出来，并且追加到str字符中。 } } //第一种方法、将字符串中最后一个元素..
2021-12-15 09:04:26
422
原创 49个常用JavaScript方法封装
1、输入一个值，返回其数据类型**functiontype(para){returnObject.prototype.toString.call(para)}2、数组去重functionunique1(arr){return[...newSet(arr)]}functionunique2(arr){varobj={};returnarr.filter(ele=>{if(!obj[ele]...
2021-08-08 18:35:27
152
原创 js里面flatMap和map的区别
var a = [1,2,3]var b = [3,4]a.map(a => (b.map(o => [a,o])))// [ [[1,3],[1,4]], [[2,3],[2,4]], [[3,3],[3,4]] ]a.flatMap(a => (b.map(o => [a,o])))// [ [1,3],[1,4],[2,3],[2,4],[3,3],[3,4] ]区别就是flatMap少嵌套了一层
2021-06-16 10:35:41
1213
原创 使用CSS revert全局关键字还原display显示元素,展开更多内容
一、需求与问题描述需求：列表默认最多显示3项，点击更多按钮显示剩余列表项。于是有CSS如下：li:nth-child(n+4) { display: none;}
2021-06-08 14:19:35
2338
2
原创 vue文字滚动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>vue文字滚动</title><style>div, ul, li, span, img { margin: 0; p...
2021-04-28 13:49:29
324
原创 面试题
es6 新特性let cont 箭头函数Vue 生命周期创建前后挂载前后更新前后销毁前后Vue 的优缺点优点用户体验好， 内容改变不需要重新加载页面前后端分离 架构清晰缺点首次加载比较慢seo 比较差vuex 使用场景音乐播放 购物车，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。...
2021-03-23 23:38:04
157
1
原创 大白话讲解Promise
ES6 Promise 先拉出来遛遛复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？是一个类？对象？数组？函数？别猜了，直接打印出来看看吧，console.dir(Promise)，就这么简单粗暴。这么一看就明白了，Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、c.
2021-03-16 14:12:02
167
原创 axios自动获取 请求地址
var RegUrl = new RegExp(); RegUrl.compile("((25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))\\.){3}(25[0-5]|2[0-4]\\d|((1\\d{2})|([1-9]?\\d)))"); var path = window.location.host; var currentServer; if(path.indexOf(":") >0){ currentServer = pat...
2021-03-12 14:05:52
851
原创 掌握 CSS Grid 布局
固定宽度<!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"> <t..
2021-02-28 19:16:38
133
1
原创 css 跑马灯
<template> <div class="info-bar"> <div class="infobar-item"><span>@测试员一号</span></div> <div class="infobar-item"><span>测试文本，使用vuecli实现抖音App</span></div> <div class="infobar-item m.
2021-01-26 00:13:07
193
原创 CSS 文字背景水印
在实际开发中，有时候希望文字内容可以作为背景图片显示，一方面是希望利用背景图片的优势，例如可以平铺，另外一方面是常见的替换元素不能使用伪元素创建文字，此时只能寄希望与背景图。关键如何把文字变成背景图呢？通常CSS开发人员的做法是把文字导出来转换成图片，然后作为背景图显示，但是这样成本有些高，也不利于日后的维护。这里给大家介绍一种实用的技术，可以让文字作为CSS背景图片。一、SVG本质上就是一个图像SVG虽然是XML语言构成的，但是本质上就是一个图像，是可以作为图像使用的，例如：&l
2021-01-17 14:23:24
5827
原创 纯CSS实现微信列表左滑显示按钮的交互效果
一、实现效果示意这个效果大家应该都见过，左滑对话列表，会显示藏在后面的按钮，iOS微信可以看到这种交互效果，大家手上如果有iPhone手机，可以试试。在Web中，是可以纯CSS实现几乎一致的交互效果的。下面一步一步来。二、滚动、绝对定位与按钮显示如果大家认为看过《CSS世界》，应该知道CSS中绝对定位元素有这么一个特性：绝对定位元素的包含块在滚动容器之外，那么这个容器滚动的时候，绝对定位元素是不会跟着滚动的。所以，如果我们希望列表左滑的时候背后按钮显示，只需要：每个列
2021-01-17 13:56:33
1102
1
原创 Promise使用
function compressImg() { return new Promise((resolve, reject) => { canvas.toBlob(function(blob) { resolve(blob) }, type || 'image/png') })}async function upload(file){ const img = await readImg(file) const blob = await compressImg(img,.
2020-12-11 15:55:02
137
原创 js判断手机是苹果（IOS）还是安卓(android)
var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
2020-11-30 15:33:24
466
原创 vue 单页面 websocke 带心疼包
export default { name : 'test', data(){ return{ websock: null, //建立的连接 lockReconnect: false, //是否真正建立连接 timeout: 5000, //20秒一次心跳 timeoutObj: null, //心跳心跳倒计时 serverTimeoutObj: null, //心跳倒计时 timeo..
2020-11-21 13:51:00
146
原创 js优化项目常用小技巧
1.等一个函数执行完之后，再执行另一个(es6中promise)methods:{ checkForm(){ return new Promise((resolve,reject)=>{ if(flag) { resolve(66); //当满足条件后，才resolve } }) }, submit(){ this.chec.
2020-11-20 10:33:41
334
原创 vue接入websocket
首先就是网上的写法有很多但是 都是需要创建一个对象进行相关的状态回调，有的是需要创建一个初始化方法进行相关的状态回调，然后看的我就一句话 都挺好的，反正就是需要你去创建对象接收发送消息，然后我就在这写一个全局的使用的，因为我觉得大部分就是作为消息推送来用所以全局来用蛮好的。websocket是什么：首先是是基于TCP的 全双工 通信的协议 然后就是websoket是通过客户端向服务器建立连接，保持客户端和服务器端双向的通信的过程。相互收发消息websocket的使用相关实例状态：1>r
2020-11-20 10:15:11
1080
原创 vue 国际化语言切换i18n插件使用
1、安装i18nnpm i vue-i18n -S2、添加相关文件3、i18n文件夹下的index.js文件import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n);// 创建vue-i18n 实例const i18n = new VueI18n({ // 设置默认语言 locale:localStorage.getItem("Language") || zh, ...
2020-11-02 14:16:06
344
2
原创 Vue px自动换算 插件 postcss-pxtorem lib-flexible
1.下载lib-flexible使用的是vue-cli+webpack，通过npm来安装的npm i lib-flexible --save12.引入lib-flexible在main.js中引入lib-flexibleimport 'lib-flexible';13.设置meta标签通过meta标签，设置设备宽度以及缩放比例<meta name="viewport" content="width=device-width, initial-scale=1
2020-11-02 10:32:21
615
1
原创 vue移动端实现可拖动悬浮按钮
<template> <div class="float_button"> <div @click="onBtnClicked" ref="floatButton" class="float_info" :style="{'width': itemWidth + 'px', 'height': itemHeight + 'px', 'left': left .
2020-11-02 09:35:03
2517
原创 解决图片变形问题，按比例缩放
上传头像的时候遇到了头像变形的问题，最后通过object-fit: cover完美解决了。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。object-fit理解CSS3 background-size出现的比较早，大家应该知道其支持的一些值，除了数值之外，其还支持几个关键字，例如：cover, contain等。object-fit也是类似的，但还是有些差异，具体有5个值：.fill { object-fit: fill; }.contain { object-fit:.
2020-10-15 09:12:38
1028
原创 vue 打包的dist本地访问
npm run build 打包 然后有一个dist 文件 然后在全局安装serve这个服务，npm install -g serve然后进入 dist 文件 运行 seven 就可以运行了
2020-10-13 11:21:44
1256
原创 dos常用命令
查看当前目录下所有文件dir清理屏幕cls退出终端exit查看ipipconfigping 命令ping www.baidu.com1、创建文件夹md2、删除文件夹rd3、创建文件cd4、删除文件del a.txt;
2020-09-29 16:57:38
80
原创 动态算出二维码在白色框框内的位置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalabl.
2020-09-27 17:08:17
183
原创 nuxt 引入百度分享
<divclass="bdsharebuttonboxbdshare-button-style1-24"><aclass="bds_more"href="#"tangram_guid="TANGRAM_16"data-cmd="more"></a><aclass="bds_qzone"title="分享到QQ空间"href="#"data-cmd="qzone"></a>...
2020-09-11 10:48:57
367
TortoiseSVN-1.9.1.26747-x64-svn-1.9.1含中文包.rar
2021-08-02
离线微信二维码名片生成器
2018-11-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人