夏微微的博客

转载 element Tooltip文字提示 三角形颜色修改

.el-tooltip__popper[x-placement^=“方向”] .popper__arrow:afterborder-方向-color: #747574.el-tooltip__popper[x-placement^=“方向”] .popper__arrowborder-方向-color: #747574例如:.el-tooltip__popper[x-placement^=“bottom”] .popper__arrow:afterborder-bottom-color: #74

原创 前端利用pdfjs获取上传多个pdf文件的页数和渲染pdf文件的缩略图，多文件之间进行拖拽（包括处理在拖拽事件中无法操作点击事件）

1、下载pdfjs：pdfjs官网2、在需要引用的页面引用pdf.js和pdf.worker.js

原创 系统启动loading动画（css3），圆形水波图（css3）

1、系统启动loading <div class="loadEffect"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span>

原创 圆环百分比， 圆环等待中（css3）

圆环百分比 <div class="div3"> <div class="circle"> <div class="pie-left"> <div class="left"></div> </div> <div class="pie-right"> <div

原创 仓库搬家，修改远程仓库地址

查看远程仓库地址git remote -v修改远程仓库地址git remote set-url origin [ url ]

原创 正则判断的公共方法包括（手机号，邮箱，密码，ip等）

话不多说直接上代码，欢迎大家的随时补充function checkType(str, type) { switch (type) { case 'email': return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str); case 'phone': return /^1[3|4|5|7|8|9|6][0-9]{9}$/.test(str); case 'tel': return /^(0\d{2,3}-\d{7,8})

原创 时间的几种格式以及它们之间的相互转换 （js）

时间的几种格式介绍Date 对象用于处理日期和时间有四种方式初始化日期1、new Date();2、new Date(value);3、new Date(dateString);4、new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);简单解释一下这四种方式不传参，获取的是当前时间；及也为中国标准时间格式Wed Mar 17 2019 09:54:21 GMT+0800

原创 Element UI+Vue开发中遇到的一些问题

1、表头时间排序（根据传参后端返回）在el-table标签输入@sort-change=“handleCommand”handleCommand(column) { let sortingType = column.order if(sortingType == "ascending") { this.$set(this.query, 'sort', 'asc')//传参 this.getData()//重新获取数据 }else {

原创 实现多个元素遍历点击显示隐藏 jquery

jq实现如下图效果，点击列表显示该条描述利用jq的each()方法遍历，toggle（）方法显示隐藏toggle() 方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。具体js代码如下 $("dt[id='service21']").each(function (i) { $(this).click(function () { $(

原创 查看创建切换分支以及会遇到一些的问题（There is no tracking information for the current branch.）

1、创建加切换分支git checkout -b [branch name]git checkout -b [branch name]相当于两步操作git branch [branch name]git checkout [branch name]2、将新分支推送到githubgit push origin [branch name]3、删除本地分支git branch -d [branch name]4、删除github远程分支git push origin :[br

原创 VsCode好用插件必装插件推荐

1.Auto Close Tag自动闭合标签所用2.Auto Rename Tag自动修改重命名配对的标签3.BeautifyBeautify 插件可以快速格式化你的代码格式，让你在编写代码时杂乱的代码结构瞬间变得非常规整，代码强迫症必备，较好的代码格式在后期维护以及他人阅读时都会有很多的便利。简单使用方法：安装完成后，打开html文件，按F1，选择Beautiful selection，如图：这样就可以看到内容已经对齐啦。4. Bracket Pair Colorizer为代码中的

原创 webpack项目搭建以及编译时遇到Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的问题

1、webpack项目搭建新建一个文件夹，命令行进入文件夹目录，运行npm init命令，根据需要填写项目信息，入口文件为index.js -->如下图所示在进入项目目录安装webpack和webpack-cli命令行输入npm install webpack webpack-cli --save-dev，如下图编写项目代码添加index.html、index.js、add-content.js，如图add-content.js有一个write方法向页面输出HelloWorld，内

原创 jquery判断字符串/对象数组中是否包含某项

1、字符串：推荐使用indexOf() 方法var Cts = "bblText"; if(Cts.indexOf("Text") >= 0 ) { alert('Cts中包含Text字符串'); } 如果要检索的字符串值没有出现，则该方法返回 -1。2、对象数组：var arr=[{'name': '张三'},{'name': '李四'}]var result = arr.some(item=>{ if(item.name=='张三'){ return true

原创 谈一谈localStorage、sessionStorage、Cookie的区别及用法

1、区别特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永远保存 仅在当前会话下有效，关闭页面或浏览器后被清除 存放数据大小 4k左右 一般为5MB 与服务器端通信 每次都会携带在HTTP头中，如果使用Cookie保存过多数据会存在性能问题 仅在客户端（即浏览器）中保存，不参与和服务器的

原创 解决点击按钮弹出弹框时背景页面会滚动的场景

// 弹框是否显示影响背景滚动 toggleModel: function(isModel) { if (isModel) { document.body.style.height = '100%'; document.body.style.overflow = 'hidden'; }else { document.body.style.height = 'auto'; ...

原创 删除文件夹需要xxx权限才能对此文件夹进行更改

当遇到下列图片问题时：只需：1、右键此文件夹点击属性，出现一个弹框，然后相继点击安全-》高级2、上一步点击确定之后，出现弹框，点击图中的更改，出现弹框，输入图中的e，然后点击检查名称3、上一步点击确定之后，出现弹框，勾选图中的替换子容器和对象的所有者，点击应用4、上一步点击确定之后，关闭所有弹窗，重新点击文件夹属性-》安全-》高级，出现弹框，点击添加，再出现弹框，点击选择主体如图，输入e，点击检查名称5、上一步点击确定之后，勾选图中的地方6、上一步点击确定之后，点击启用继承，勾选

原创 修改桔梗网导航，修改浏览器属性需要管理员权限

1、右键点击找到浏览器的属性2、找到常规，把只读的勾勾去掉3、找到快捷方式的目标，把目标.exe后面的桔梗网链接删除4、这时候如果会提示需要管理员权限才能修改的话，继续下面的操作，如果没有提示，上面的就完成了5、使用电脑的win+R键，打开命令行输入gpupdate，提示用户策略更新完成，再继续上面的操作就ok啦...

原创 jquery判断页面元素是否存在

一开始，根据以往的js思想，我直接这么写的 if($(".alert-bar")) { $(".navbar-fixed-top .container").css("margin-top", "63px") }发现这样是不对的，因为jQuery对象永远都有返回值，所以$(".alert-bar")总是TRUE ，IF语句没有起到任何判断作用。正确的写法应该是： if($(".alert-bar").length > 0) { $(".navb

原创 form表单提交时传递额外的参数

使用hidden的input，将参数放在里面，例如：点击提交url后面拼上字符串‘parmas1=19&parmas2=&parmas3=hh&parmas4=1&parmas5=tt’<div class="hiddenFields"><input type="hidden" name="parmas1" value="19"><input type="hidden" name="parmas2" value=""><in

原创 vscode提示‘Vetur find `tsconfig.json`/`jsconfig.json`

原创 使用yarn安装时 报错node_modules\node sass:Command failed.

如图：解决方案：npm install -g mirror-config-china --registry=http://registry.npm.taobao.orgnpm install node-sassyarn install

原创 html--给表格table添加边框

1、这样似的table border=“1”<html><body><table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr>

原创 去除数组中的空字符串，并且获取有值的字符串的索引

function removeEmpty(arr){ for(var i = 0; i < arr.length; i++) { if(arr[i] == "" || typeof(arr[i]) == "undefined") { arr.splice(i,1); i = i - 1; }else { return i; } ...

原创 vscode的一些扩展以及快捷键

1、Material Theme你是否厌倦了每天看到相同的 tabs 底部颜色?可以使用 Material Theme 来扩展 VsCode 的主题，这样就可以为 tabs 设置不同的颜色。安装使用：在扩展中搜索，找到按钮install下载然后打开的命令面板(Ctrl + Shift + P)，选择Material Theme: Set accent color并从列表中选择一个颜色，它将更改选项卡的下划线颜色，如下所示2、重新打开 关闭的编辑页面Windows: Ctrl

原创 jquery获取同级元素

next()相邻下一个同级元素prev()相邻上一个同级元素siblings()所有同级元素$("#id").next();$("#id").prev();$("#id").siblings();获取相邻同级元素的下一个元素，例如想获取下面代码中的的第一个form$(".h1").next().next();即可，以此内推<div> <h1 class='h1'>title</h1> <table></table>

原创 javascript 中 “ ！function(){}() ” 是什么意思？

自执行函数javascript中，这种写法function(){//所需要执行的代zhi码}()被称为"自执行函数"，好处是把所有变量都运行在函数内部，可以避免产生全局变量。!隔绝上面代码的影响而"!"的作用是使它和上面的代码隔绝，不会受到其影响。例如这2行代码var a=1function(){}()在浏览器执行会产生语法错误，因为浏览器解析代码的时候，把2行看做一个语句或表达式。而加上感叹号就能正常执行var a=1!function(){}()...

原创 如何设置使用电脑默认浏览器打开微信中发的链接

1、打开微信电脑版，看着下面的链接，直接点开是在微信内部打开的，还需要复制粘贴到浏览器打开，很麻烦2、点击微信左下方的更多3、点击设置4、点击通用设置，勾选上使用系统默认浏览器打开网页，然后点击链接就可以跳到默认浏览器打开啦...

原创 怎么把字符串中间的特殊字符后面的字母变成大写，例如‘a-b’--》‘aB’

var f = function(s) { return s.replace(/-\w/g, function(x) { return x.slice(1).toUpperCase(); }) }

原创 goodle上好用的扩展程序，强烈推荐

Page Ruler（Page-Ruler是一个可以让你在任何页面都可以随意画出一个可以测量任何元素尺寸和位置的小插件）对于没有提供像素的设计稿和没有下载ps的前端，用起来简直不要太好2、Awesome Screenshot （ Awesome Screenshot是一款功能强大的屏幕截屏和视频录制谷歌浏览器插件）既可以截图又可以录屏然后分享简直不要太方便3、OneTab（当您发现自己有太多的标签页时，单击OneTab图标，将所有标签页转换成一个列表。当您需要再次访问这些标签页时，可以单独或全部恢.

原创 jquery获取第n个li元素

<ul> <li>元素1</li> <li>元素2</li> <li>元素3</li> <li>元素4</li></ul>$(‘ul li’).first() -->获取到第一个li$(‘ul li’).last() --》获取到最后一个li$(‘ul li’).eq(2) --》获取到第二个li$(‘ul li’).eq(-2) --》获取到倒数第二个li.

原创 jquery多个class操作

<div class='a1 a2 a3'> <p class='p1'> <span class='a1'></div><div class='a4'></div>$(’.a1.a2’) --》获取到上面一个div$(’.a1 .p1’) -->获取到p$(’.a1, .a4’) -->获取到上下两个div

原创 git提交代码的流程

第一种方法：git add .（监控工作区所有变化提交到暂存区，包括文件修改和新建文件，不包括被删除文件）git add -u（提交被修改的文件和被删除文件，不提交新建的文件）git add -A（git add .和git add -u的合集）我一般习惯用git add .,这个看你需求喽git commit –m “本次提交描述”（将git add .存入暂存区修改内容提交至本地仓库中）git pull=git fetch + git mergegit pull --rebase=git

原创 Vue CLI快速创建一个项目

1、使用npm或yarn安装vue cliyarn的安装npm i yarn -gvue cli的安装npm install -g @vue/clioryarn global add @vue/cli安装完成就可以使用vue命令了，可以使用vue -V查看版本2、创建新项目project为创建的项目名vue create project默认添加上babel和eslint，我门可以手动设置更多的选项，我一般添加这几项3、项目运行cd projectnpm run

原创 jq编码和解码

encodeURIComponent()编码var str = ' numresults:10 sort:publication-date direction:descending'str = encodeURIComponent(str)//%20numresults%3A10%20sort%3Apublication-date%20direction%3AdescendingdecodeURIComponent()解码var str = '%20numresults%3A10%20sort%

原创 jq方法去掉字符串中的特定字符串

replace（）方法 var publication = 'publication-date-ascending' publication = publication.replace('publication-date-', '') //ascending

原创 localStorage和sessionStorage存储数据

localStorage 除非被清除，否则永久保存数据存储容量都一般为5MBsessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除使用方法localStorage ：//存window.localStorage.setItem('key', value)//取window.localStorage.getItem('key')sessionStorage 使用方法和localStorage 一样...

原创 select下拉列表选择提交form表单

var numresults = '' $('.hw-search-tool-numresults').off() //select标签 $('.hw-search-tool-numresults').on('change', function (e) { e.preventDefault(); numresults = $(this).val() $('.hw-search-extra').attr('action', '/se...

原创 jquery为未加载的dom元素添加点击事件

点击搜索跳到筛选页面时，习惯的为筛选元素添加这种$("#search-input").click(function(){ //操作})后来发现筛选元素标签还没有加载出来，js就加载到这里，应该这样写$("body").on('click', '#search-input',function(){ //操作})将事件作用在整个body上，有点击操作时，查找目标target，满足条件就会执行...

原创 大屏自适应（100%+rem）

(function(doc,win){ let fn = () => { let docEl = doc.documentElement, clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'; } if (!doc.addEven

原创 echarts折线图和饼图常用的一些api

一、折线图改变x轴的字体颜色和大小 xAxis: { type: 'category', boundaryGap: false, data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10','11','12','13','14','15','16','17','18','