qq_38796823的博客

转载 tolocalestring()详解

JS 中 `toLocaleString`妙用_hjb2722404的博客-优快云博客_js tolocalestring缘起kaven老师分享了一个数值取整的方法，即利用按位非操作符（~）进行取整：var a = 1.5;console.log(~~a); // 1但是这种方法有点限制就是它只能进行向下取整，无法实现四舍五入。所以就想到了toLocaleString() 方法，利用它可以巧妙第实现数值的四舍五入取整。利用toLocaleString取整我们直接上代码：var a = 1.5;consol

原创 获取周一到周日

let now = new Date();let nowTime = now.getTime();let day = now.getDay() || 7; //为周日的时候 day 修改为7 否则当天周天会有问题let oneDayTime = 24 * 60 * 60 * 1000;let MondayTime = nowTime - (day - 1) * oneDayTime; //周一let SundayTime = nowTime + (7 - day) * oneDayTime; .

转载 js保留两位小数方法总结

js保留两位小数方法总结 - 半指温柔乐 - 博客园

原创 递归--给每一项新增属性

format(arr) { arr.forEach((el) => { if (el.children && el.children.length > 0) { el.value = el.id; el.label = el.orgName; this.format(el.children); } else { el.value = el....

转载 20 个杀手级 JavaScript 单行代码

20 个杀手级 JavaScript 单行代码本文整理了一些实用的 JavaScript 单行代码，非常好用~~https://mp.weixin.qq.com/s/pLjSDpbl0LmBxcJo7uVCVA

原创 cherry-pick解决冲突

cherry-pick 出现冲突之后，解决完冲突再git add .git cherry-pick --continue

原创 可选链操作符 ?.

https://blog.youkuaiyun.com/weixin_43487782/article/details/110524901

原创 vue自定义防抖&节流指令的实现&全局指令定义和使用-案例

https://blog.youkuaiyun.com/JackieDYH/article/details/119419458?utm_medium=distribute.pc_feed_v2.none-task-blog-yuanlijihua_tag_v1-2.pc_personrecdepth_1-utm_source=distribute.pc_feed_v2.none-task-blog-yuanlijihua_tag_v1-2.pc_personrec

原创 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

1、结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击2、继承：display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是

原创 TCP 的三次握手（简述）

TCP握手协议在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接.第一次握手：建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认；SYN：同步序列编号(Synchronize Sequence Numbers)第二次握手：服务器收到syn包,必须确认客户的SYN（ack=j+1）,同时自己也发送一个SYN包（syn=k）,即SYN+ACK包,此时服务器进入SYN_RECV状态；第三次握手：客户端收到服务器的SYN＋ACK...

原创 vue 项目使用 rem 布局

使用 vue-cli 构建项目完成后，在index.html文件内添加如下代码： //兼容UC竖屏转横屏出现的BUG //自定义设计稿的宽度：designWidth //最大宽度:maxWidth //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750) ; (function (designWidth, maxWidth) { var doc = document, w

转载 js优化

https://blog.youkuaiyun.com/qq_36903042/article/details/113841267?utm_medium=distribute.pc_category.none-task-blog-hot-1.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-1.nonecase&request_id=

原创 图片压缩及base转文件流

let img = new Image(); img.src = this.fileListL[0].content; var canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); let initSize = img.src.length; img.onload = () => { let width = img.width; let height = im...

原创 替换全部的../

this.serviceContent = this.serviceContent.replace(/\.\.\//g, "");

原创 秒转换成day、hour、minutes、seconds

function formatSecond(second) { const days = Math.floor(second / 86400); const hours = Math.floor((second % 86400) / 3600); const minutes = Math.floor(((second % 86400) % 3600) / 60); const seconds = Math.floor(((second % 8.

原创 百度地图获取城市名称

1、获取当前连接的网络站点城市名称var map = new BMap.Map("allmap");var point = new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 12);function myFun(result) {console.log("result", result);var cityName = result.name;_this.getData(result);map.s

原创 比较好用的H5标签

detais标签<details>标签向用户提供按需查看详细信息的效果。 如果需要按需向用户显示内容，简单的做法就是使用此<details>标签。 默认情况下，它是收起来的，打开后，它将展开并显示被隐藏的内容。事例：<details> <summary>Click Here to get the user details</summary> <table> <tr> <th&.

原创 15个Vue自定义指令

受 AngularJS 的启发，Vue 内置了一些非常有用的指令（比如v-html和v-once等），每个指令都有自身的用途。完整的指令列表可以在这里查看.这还没完，更棒的是可以开发自定义指令。Vue.js 社区因此得以通过发布自定义指令npm 包，解决了无数的代码问题。以下就是我最喜欢的 Vue.js 自定义指令列表。不用说，这些指令为我的项目开发节省了大量时间！1. V-Hotkey仓库地址:https://github.com/Dafrok/v-hotkeyDemo: 戳这里...

原创 vscode不错的插件

1、查看git提交历史GitLens

原创 flex布局，控制每行显示几个

代码<template> <div class="ocr"> <div class="img"> <img :src="url" alt=""> <img :src="url" alt=""> <img :src="url" alt=""> <img :src="url" alt=""> <img :src="u.

原创 一份完整的 vue-cli3 项目基础配置项,可用作于 PC 网站开发、移动端网页，后台管理系统

最近在看到一个不错的分享：https://v2ex.com/t/670903#reply24

原创 vue-cli3中引入postcss-px-to-viewport插件-------移动端适配vw

npm install postcss-loader postcss-px-to-viewport --save-dev因为插件的配置选项中有个exclude选项，它的值只支持正则表达式，但是正则表达式再json中是不允许的，所以不要配置在package.json中，要配置在vue.config.js里module.exports = { devServer: { port: 8080, disableHostCheck: true, }, css: { loade

原创 ES6-对象的新增方法（常用）

1、Object.is()：它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。 let obj11 = {}; let obj12 = {}; let r11 = Object.is(obj11, obj12); console.log("r11", r11); //false let r12 = Object.is(obj11, obj11); console.log("r12", r12); //true2、Object.assi

原创 图片滑动验证

这里主要用的是插件：vue-monoplasty-slide-verifygithub地址：https://github.com/monoplasty/vue-monoplasty-slide-verify安装方式：npm install --save vue-monoplasty-slide-verify使用方式：import Vue from 'vue';import Slide...

原创 element表格懒加载

html<div class="table"> <el-table :data="tableData" style="width: 100%" row-key="id" lazy height="290" :load="load" ...

原创 vue-baidu-map动态描点，点击展示点信息

html<baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true"> <bm-marker v-for="(item,index) of pointList" :key="index"...

原创 代码的可维护性

避免使用全局量包括变量和函数，最好对齐进行封装；避免与null进行比较如果看到了与null比较的代码，尝试使用以下技术替换function sortArry(values){ if(values!=null){ //不推荐 values.sort() } } function sortArry(values){ ...

原创 时间戳转时间

function timestampToTime(timestamp) { var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth()+1 < 10 ...

原创 移动端适配rem

const setHtmlFontSize = () => { const htmlDom = document.getElementsByTagName('html')[0]; let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; ...

原创 css背景图片连写

<div v-if="item.nav_url.length==3" :style="`background: url(${item.nav_url[2]}) center center / contain no-repeat ;`"></div>

原创 new出来的构造函数经历的步骤

function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sayName = function () { console.log(this.name) } }...

原创 给百度地图信息框添加点击事件，并且路由跳转

转载 H5下拉加载内容

https://blog.youkuaiyun.com/qq_39234840/article/details/82110404

原创 在请求的url上加上时间戳

monitorVideo(params){ return axios.post(`${newHttp}/monitor/runtime/list?t=`+ Date.parse(new Date()),params); }作用：URL 的末尾追加了时间。这就确保了请求不会在它第一次被发送后即缓存，而是会在此方法每次被调用后重新创建和重发；此 URL 会由于时间戳的不同而稍微有些不...

原创 js数字金额转大写

digitUppercase = function (n) { var fraction = ['角', '分']; var digit = [ '零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖' ]; var unit = [ ...

原创 模块化设计的规则总结

CSS模块化设计设计原则 可复用能继承要完整 周期性迭代设计方法 先整体后部分再颗粒化 先抽象再具体JS组件设计设计原则 高内聚低耦合 周期性迭代设计方法 先整体后部分再颗粒化 尽可能的抽象自适应基本概念 CSS像素、设备像素、逻辑像素、设备像素比 Viewport Rem工作原理 利用viewport和设备像素比调整基准像...

原创 模态框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

原创 算法

1、二分查找概念：二分查找算法是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始，如果中间元素正好是要查找的元素，则搜 素过程结束；如果某一特定元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半中查找，而且跟开始一样从中间元素开始比较。如果在某一步骤数组 为空，则代表找不到。这种搜索算法每一次比较都使搜索范围缩小一半。折半搜索每次把搜索区域减少一半，时间复杂度为...

原创 CSS样式对SEO的影响

通常来讲：CSS用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。它是一种用于不同方式展现网站的手法，举个不恰当的例子，它有的时候更像毛坯房的精装修。1、规范内容页面位置一般来讲，搜索引擎的蜘蛛爬行的顺序为：从左到右，从上到下，利用CSS样式，我们可以很好的分配重要资源在相关位置：① 顶部导航包含核心关键词链接：从左到右，关键词指数依次递减。② 如果你配置左侧列表，可...

原创 抖动与节流

节流：我们无法做到让浏览器不去触发对应的事件，但是可以做到让处理事件的方法执行频率减少，从而减少对应的处理开销。去抖：而在我们的页面里，也有这种情况，假设我们的一个输入框，输入内容的同时可能会去后台查询对应的联想词，如果用户输入的同时，频繁的触发input事件，然后频繁的向后台发送请求，那么直到用户输入完成时，之前的请求都应该是多余的，假设网络慢一点，后台返回的数据比较慢，那么显示的联想词可...