IT博客技术分享

【代码】用原生input type=range 写一个滑块，兼容各大浏览器。

注意，这里通过传递一个空对象 {} 作为第一个参数来创建了一个新的对象作为目标对象。这是因为 Object.assign 方法会修改第一个参数的值，如果我们不想修改原始的对象，就需要传递一个新的空对象作为目标对象。方法接受一个目标对象和一个或多个源对象作为参数，将源对象的属性复制到目标对象中，并返回目标对象。如果有重复的属性名，则后面的属性会覆盖前面的。前言: 前端开发中，我们会遇到各种数据的需求，但是后端给你返回的数据结构又不是你想要的， 只能自己动手，去组装数据，重新定义数据结构了。

在做删除的时候我们删除了后台数据，不想在对数据进行查询更新，此时可以在前端对数组进行删除示例：list:[ { id:0 name:'xiaomin' }, { id:1 name:'xiaohong' },]list = list.filter(item => item.id !== 你要删除的ID)具体案例如下：code处理方法// 双击那个车站 取消哪个 ...

方法一、1.筛选出两个数组不同的元素let list= [];list = this.array1.filter(item=>{ return array2.indexOf(item) === -1});方法二、2.筛选出两个数组相同的元素let list= [];list = this.array1.filter(item=>{ return array2.indexOf(item) !== -1});...

js 截取指定字符 "/": 前面的所有字符串var str = "/static/stencils/clipart/device-01_128x128.png";let index = str .lastIndexOf("/")str = str .substring(0,index);console.log(str)/static/stencils/clipartjs 截取指定字符 "/": 后面的所有字符串var str = "/static/stencils/cli...

我想动态添加class， 而不是手动写在某个标签里面。这时候需要用到v-modal动态变量来绑定，根据v-modal的值判断是否够存在，动态去添加class类名。，写法不一样，这里就不贴图了。

来检查想要的项目，获取索引或空数组。现在我想要取回所有索引。有没有简单的解决方案？

【代码】js获取笔记本屏幕的分辨率以及缩放到125%工作区域的高度。

1. 前言最近部门在推微前端，需要按功能拆分多个子应用，主应用在加载的过程中经常出现加载失败的问题。因为https地址中，如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止。后来在文档中添加了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">完美解决。此时我才发现自己对meta简直一无所知，本文主要介绍meta，顺带也会提一提head中的其它标签。如有不对请指出，最

先上效果图：

1、单行 If-Else 语句这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句，而不是在多行上编写 if-else。const age = 12;let ageGroup;// LONG FORMif (age > 18) { ageGroup = "An adult";} else { ageGroup = "A child";}// SHORTHANDageGroup = age > 18 ? "An adult" : "A ch

分析原因：出现该种情况的根本原因：由于vue中存在异步调用，所以在vue的渲染机制中，异步数据先显示初始数据，再显示从后台带回的数据，所以当vue首先执行的时候，menuList里面根本就没有数据，所以前台才会报出 Error in render: "TypeError: Cannot read property ‘0’ of null"的错误，那么解决方法很简单，就是在加载该模块时添加一个判断语句，如果“menuList”为空的时候，就不进行该模块的渲染，更改后代码如下解决办法：...

说明js-cookie是一个简单的，轻量级的处理cookies的js API。创建//创建简单的cookieCookies.set('name', 'value');//创建有效期为7天的cookieCookies.set('name', 'value', { expires: 7 });//为当前页创建有效期7天的cookieCookies.set('name', 'value', { expires: 7, path: '' });取值Cookies.get('name'); //

防抖和节流在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。防抖:多次触发某个方法的间隔小于一个固定周期则只执行最后一次。节流：触发某个方法后的一个固定周期内再次触发该方法则不执行。code：// 函数节流function thnottle(fn,w...

js字符串的常用方法总结

1、从阵列中删除重复项数组：这是一些方便的方法，可用于从数组中删除重复项。1、使用lodashlet array = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];let arrayuniq = _.uniq(array);//[2, 1, 5, 6, 7, 8, 9, 10]2、使用filterlet array = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];let list = array.filter((x, i, a) =&gt

一、比较两个对象数组，删除重复项，根据属性合并对象我们确实需要比较两个不同的对象数组，并希望在两个对象匹配特定属性值的情况下合并这两个对象。可以使用filter()方法来实现。该filter()方法创建一个新数组，其中所有元素都通过了由提供的功能实现的测试。让我们创建测试数据:let array1 = [{ id: "50", active: "a", value: 10 },{ id: "51", active: "a", value: 11 }];let array2 = [

1.随机ID生成当你在进行原型设计并需要唯一的id时，这可以成为你的首选功能。const a = Math.random().toString(36).substring(2);console.log(a)----------------------------72pklaoe38u2.生成范围内的随机数在很多情况下，我们需要在一个范围内生成一个随机数。Math.random函数可以帮助我们生成随机数，然后将其转换为所需的范围。max = 20min = 10var a

要在循环中才能删除干净！var x=document.getElementsByClassName("xxx");console.log("len:"+x.length);while (x.length > 0) {x[0].remove();}console.log("len:"+x.length);

判断一个数组里面的每一项的值，是否包含另一个数组里面的每一项。我们只需要先定义一个新的数组来存储着2个数组里面值一样的。var arr1 = [ 1, 2, 3,4,5, 6 ,7];var arr2 = [1, 3 , 5 ];varitemAry = []然后拿 ar1 和 arr2 循环遍历，判断 得到新的数组itemAry最后 varflag =false； 判断 新数组的length 和 arr2数组的length 是否相等，如果相等 就 returnfl...

1. parseInt 遇上 map["1", "2", "3"].map(parseInt)// A. ["1", "2", "3"]// B. [1, 2, 3]// C. [0, 1, 2]// D. other答案是D。实际上返回的结果是 [1, NaN, NaN] ，因为 parseInt 函数只需要两个参数 parseInt(value, radix) ，而 map 的回调函数需要三个参数 callback(currentValue, index, array)。MDN文档中指明

主要是添加一个name属性就可以显示出来了。代码如下：option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, grid: { left: '3%', righ.

一、单个下载先上效果图：先上network请求：主要js代码如下： let baseURl = this.$store.getters.getAllServer; let link = document.createElement('a'); link.style.display = 'none'; link.target = '_self'; .

本文阿宝哥将从多个方面入手，全方位带你一起探索 WebSocket 技术。阅读完本文，你将了解以下内容： 了解 WebSocket 的诞生背景、WebSocket 是什么及它的优点； 了解 WebSocket 含有哪些 API 及如何使用 WebSocket API 发送普通文本和二进制数据； 了解 WebSocket 的握手协议和数据帧格式、掩码算法等相关知识； 了解如何实现一个支持发送普通文本的 WebSocket 服务器。 在最后的阿宝哥有话说环节，阿宝哥将..

ES6 promise 是非常棒的一个功能， 它是 JavaScript 异步编程中不可或缺的部分，并且取代了以回调地狱而闻名的基于回调的模式。然而 promises 的概念并不是非常容易理解。在本文中，我将讨论这些年来学到的最佳实践，这些最佳实践可以帮助我充分利用异步 JavaScript。处理 promise rejections没有什么比unhandled promise rejection（未处理的 promise 错误） 更让人头疼了。当一个 promise 抛出一个错误，但你没有..

Web 资源可组合性是 Web 的非常强大的一项能力，你可以轻而易举的加载来自不同来源的资源来增强网页的功能，例如：font、image、video等等。这些服务非常强大，也很方便，但是这样的策略同样会加大信息泄漏的风险，攻击者可以利用某些手段泄漏你的用户信息。浏览器在阻止这些攻击上做的也很好。同源策略我们已经很熟悉了，它用于限制不同源的站点的资源访问。详细可以戳浏览器的同源策略，这里不再过多介绍。但是同源策略也有一些例外，任何网站都可以不受限制的加载下面的资源： 嵌入跨域..

“弹窗消息提醒”插件。以上是展示的效果。1. 分析当消息被触发的时候，会有一个自上而下的淡入过程。 在持续了一段时间后会自动的消失，或者是需要用户来手动的点击关闭按钮。 在消息消失的时候，会有一个自下而上的淡出过程。 消息是可以叠加弹出的，最新的消息会排在消息列表的最后面。 当前面的消息消失后，后面的消息会有一个向上滑动效果。然后消息本身是有三部分组成消息图标，用来区分不同类型的消息。 消息文本。 关闭按钮，并不是所有消息都需要关闭按钮。2. 实现样式那么，不管我们是

现在有一个数组：我们现在想要把数组里的每一个值变成对象，这个值作为对象的value，前面加上统一的key：x第一种方法：let arr = [1, 2, 3, 4, 5];var newArr = [];newArr = arr.map(item => ({x:item}));console.log(newArr);打印结果：第二种方法：let arr = [1, 2, 3, 4, 5];const newArr = arr.reduce((...

使用方法还是原来的步骤：1、引入js文件，2、在select标签上添加属性multip，然后调用方法即可（只有两步哦！）可以先访问一下这里哟：演示地址（不想访问也可以往下读）先上图：这个是选中后的效果，我们用的是select标签，选中后子标签会变成蓝色，如果想取消，再点击一下即可取消。取值，调用selectMultip.getVal("22")方法即可：赋值，调用selectMultip.setVal(id,data)即可，第二个参数类型可以是字符串或者数组,如图：具体取值、赋值、.

在HTML中target目标的四个参数的用法：1、target="_self"表示：将链接的画面内容，显示在目前的视窗中。(内定值) 。 即：同(自己)窗口打开,别的数据还存在，相当于在一个页面里中又打开一个页面。2、target="_parent"表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开,但以前当前窗口数据没有。3、target="_top"表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。4、target="_blank"表示：将链接.

注意:created()方法是无效的方法:在需要刷新的页面添加以下内容解决办法有两种：1、使用activated:{}周期函数代替mounted:{}函数即可。将mounted函数 替换成activated函数。mounted(){在这里插入代码片}==》activated（）{在这里插入代码片}2、监听路由第二种：通过路由监听的方法。将mounted下的方...

String对象的方法方法一: indexOf() (推荐)var str = "123";console.log(str.indexOf("3") != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。方法二: search()var str = "123...

本文讲的图片上传，主要是针对上传头像的。大家都知道，上传头像一般都会分成以下 4 个步骤：选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片接下来，就详细的介绍每个步骤具体实现。选择图片选择图片有什么好讲的呢？不就一个input[type=file]，然后点击就可以了吗？确实是这样的，但是，我们想要做得更加的友好一些，比如需要过滤掉非图片文件， 或...

初级Javascript：1.JavaScript是一门什么样的语言，它有哪些特点？没有标准答案。2.JavaScript的数据类型都有什么？基本数据类型：String,boolean,Number,Undefined,Null引用数据类型：Object(Array,Date,RegExp,Function)那么问题来了，如何判断某变量...

一、HTML中jquery控制button按钮可点击、不可点击1.首先来说button按钮不可点击1.1第一种（html代码中控制）<button id="button_id" disabled="disabled">按钮不可点击</button>1.2第二种（jquery控制）$("#button_id").attr('disabled',true...

禁止鼠标右键的菜单事件oncontextmenu，禁止默认菜单问题第一种方法（全局）：<script type="text/javascript"> document.οncοntextmenu=function(){return false};</script>第二种方法 vu里面（局部）：<div id="user"> 内容区...

js秒转时分秒，小于十补零var s = 23886; //需要转的秒数var m;setInterval(function(){ m = secondToDate(s) console.log(m) s--;},1000)// 输出03:05:59 时分秒function secondToDate(result) { var h = ...

div标签下的奇数行与偶数行div:nth-child(odd){} //奇数行div:nth-child(even){} //偶数行:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。...

1.由数字、26个英文字母或者下划线组成的字符串: ^[0-9a-zA-Z_]{1,}$2.非负整数（正整数 + 0 ）: ^/d+$3.正整数: ^[0-9]*[1-9][0-9]*$4.非正整数（负整数 + 0）： ^((-/d+)|(0+))$5.负整数 : ^-[0-9]*[1-9][0-9]*$6.整数...

js数组与字符串的相互转换方法1、数组转字符串需要将数组元素用某个字符连接成字符串，示例代码如下：var a, b;a = new Array(0,1,2,3,4);b = a.join("-"); //"0-1-2-3-4"2、字符串转数组实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回，示例代码如下：var s = "abc,abcd,a...