• javascript(html)

let a1 = [ {id: 1,text: ”}, {id: 2,text: ”}, {id: 3,text: ”}, {id: 4,text: ”}, {id: 5,text: ”}, {id: 6,text: ”}, {id: 7,text: ”}, ] let a2 = [ {id: 1,text: ”}, {id: 2,text: ”}, {id: 3,text: ”} ] let a3 = [ {id: 3,text: ”}, {id: 4,text: ”}, {id: 5,text: ”}, ] let result = difObjectArray(a1, a2, a3) console.log(result) function difObjectArray (a1, a2, a3) { // 获取a1中不包含a2,a3的元素，a1,a2,a3所包含的字段可能不同，但都包含id // 取出各个数组的id let a1_key = a1.map((item) =>item.id) let a2_key = a2.map((item) =>item.id) let a3_key = a3.map((item) =>item.id) // 合并a2,a3 let concat = []….

1.问题描述 默认情况下，dispatchEvent只触发定义在目标上以及捕获阶段的事件 var event = new Event(‘eventName’); document.body.addEventListener(‘eventName’,function(){ alert(‘body’); }); document.addEventListener(‘eventName’,function(){ alert(‘document’); }); window.addEventListener(‘eventName’,function(){ alert(‘window’); },true); document.body.dispatchEvent(event); 此时，body和window会触发，document上的事件处于冒泡阶段并没有触发 2.解决，事件定义时候加入第二个参数 var event = new Event(‘eventName’，{ bubbles: true }); // 加入第二个参数 document.body.addEventListener(‘eventName’,function(){ alert(‘body’); }); document.addEventListener(‘eventName’,func…

在JavaScript中，有时候需要在一个不同的对象上重用一个函数，而不是在定义它的对象或者原型中。通过使用call()，applay（）和bind()，我们可以很方便地从不同的对象借用方法，而不需要继承它们 – 这是一个在专业JavaScript开发者的工具箱中很有用的工具。 先决条件 这篇文章假设你已经充分了解了call()，apply() 和 bind() 以及它们的不同点。 来自原生prototypes的方法 在JavaScript中，你接触的几乎所有东西都是一个对象，除了string，number 和 booleans这样不可变的原始值。一个数组是一种对象类型，适合用于有序数据列表的遍历和修改，在它的原型中有很多有用的方法，例如slice，join，push 和 pop。 我们看到对象最常见的使用情况就是从一个数组中借用方法，因为它们都是列表类型的数据结构。最常被借用的方法是 Array.prototype.slice。 function myFunc() { // 错误, arguments是一个类数组对象, 不是一个真实的数组 arguments.sort(); // 借用 Array 原型中的方法 slice, 它接受一个类数组对象 (key:value) // 并返回一个真实的数组 var args = Array.prot…

1.问题描述 ajax请求同源请跨下会携带cookie一旦跨域就没有了cookie

dom2事件优点 1.It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that need to work well even if other libraries/extensions are used. 一个事件可以注册多个监听器 2.It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling) 更精细的手段控制事件监听器的触发阶段 3.It works on any DOM element, not just HTML elements. 对任何dom元素有效不仅仅是html元素 0级DOM分为2个： 一是在标签内写onclick事件 <input id="myButton" type="button" value="Press Me" onclick="alert(‘thanks’);" > 二…

关键点：饼图传入两份数据，一份设置label在外显示，一份在内显示，设置不同信息，位置叠加 /*饼图：项目状态*/ var myChart = echarts.init(document.getElementById(‘echarts-pie’)); // 指定图表的配置项和数据 var option = { title : { text: ‘项目状态’, x:’center’ }, color:[‘#477dea’, ‘#9a9a9a’,’#f2b644′], tooltip : { trigger: ‘item’, formatter: "{a} <br/>{b} : {c} ({d}%)" }, normal:{ show: true, position: ‘inside’, formatter: ‘{d}%’ }, legend: { orient: ‘vertical’, left: ‘left’, data: [‘已签单’,’实施中’,’已完成’] }, series : [ { name: ”, type: ‘pie’, radius: ‘55%’, center: [‘50%’, ‘50%’], data:[ {value:335, name:’已签单’}, {value:310, name:…

stack相同的数据会在Y轴叠加。 如果是相同的值，则会叠加在一起。取不同的值，Y轴的数据就不会叠加在一起； 或者删除掉，默认为不叠加。

title: { text: ‘天气情况统计’, //标题 subtext: ‘虚构数据’, //副标题 left: ‘center’ //标题位置 }, tooltip: { trigger: ‘item’, formatter: "{a} <br/>{b} : {c} ({d}%)" //鼠标移上去显示的内容 }, normal: { show: true, position: ‘inside’, //图形里显示（比如在饼图块上显示百分比） formatter: ‘{d}%’ //显示的内容 }, textStyle: { fontWeight: ‘normal’, //显示字体粗细等 fontSize: 10 }, legend: { //图例 // top: ‘middle’, // bottom: 10, // left: ‘center’, icon: "circle", //圆点形图例（默认是官网上的圆角矩形） itemWidth: 10, //这几个是图例宽高位置等的设置 itemHeight: 10, itemGap: 20, left: 100, top: 110, bottom: 20, textStyle: { // fontSize: 5 color: "…

1.问题描述 父元素设置display:flex,此时两个子元素无论如何设置都会放置在一行中

1.原因分析 因为容器在初始化时被设置成display:none; 2.解决方案 元素隐藏通过设置opacity: 0来实现

1，父容器需要设置高度才能生效。

画布的大小是根据background属性所传的图片尺寸决定的

1.原因 每次调用都会产生不同的ID，单次调用clearInterval并不能全部清除 2.解决方案 每次调用setInterval后，将ID存入一个数组，然后需要清除时候，遍历数组进行清除 3.相关代码 let id= setInterval(() => {}, 1000) this.idList.push(id) for (let i = 0; i < this.idList.length; i++) { clearInterval(this.timerId[i]) }

问题原因： img标签为行内元素(inline)，默认对其方式为vertical-align: baseline(基线对齐) 四种解决方法： 1.将img设置为block,这样就不再受行内基线的影响。 2.设置img的竖直对齐方式v-align:bottom。 3.设置父div的font-size,需要一个较大的值，原理未知。 4.设置外层的div的line-height:0,这样基线下方的位置基本可以忽略。

@-moz-document url-prefix(){ body{color:red;} } supports：https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

1.实现原理 外层添加容器，设置overflow: hidden; 内部容器，设置overflow-y: scroll; 对内部容器进行偏移，使得滚动条刚好被上层容器遮挡 2.相关代码 <div class="outer"> <div class="inner"></div> </div> .outer{height: 75px;overflow:hidden;} .inner{height: 100%;padding-right: 25px;position: relative;left: 21px;overflow-y: scroll;}

player.on( ‘durationchange’, function( e ) { window.console.log( ‘videoJS: durationchange’ ); }); player.on( ‘ended’, function( e ) { window.console.log( ‘videoJS: ended’ ); }); player.on( ‘error’, function( e ) { window.console.log( ‘videoJS: error’ ); }); player.on( ‘firstplay’, function( e ) { window.console.log( ‘videoJS: firstplay’ ); }); player.on( ‘loadedalldata’, function( e ) { window.console.log( ‘videoJS: loadedalldata’ ); }); player.on( ‘loadeddata’, function( e ) { window.console.log( ‘videoJS: loadeddata’ ); }); player.on( ‘loadedmetadata’, function( e ) { win…

const div = document.createElement(‘div’) div.innerHTML = res.html document.body.appendChild(div) document.forms.alipaysubmit.submit()

创建一个具有指定原型且可选择性地包含指定属性的对象。 Object.create(prototype, descriptors)

一、原型 ①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象 ②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象 ③所有引用类型的__proto__属性指向它构造函数的prototype var a = [1,2,3]; a.__proto__ === Array.prototype; // true 二、原型链 当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。 举例，有以下代码 function Parent(month){ this.month = month; } var child = new Parent(‘Ann’); console.log(child.month); // Ann console.log(child.father); // undefined 在child中查找某个属性时，会执行下面步骤： 访问链路为： ①一直往上层查找，直到到null还没有找到，则返回undefined ②Object.prototype.__proto_…

<meta name="theme-color" content="#42b983" /> 参考链接：http://www.webhek.com/post/how-to-change-the-color-of-header-bar-and-address-bar-use-theme-color.html

解决办法： 1、Firefox的用户请在浏览器的地址栏输入“about:config”，回车 2、在过滤器（filter）中搜索“security.fileuri.strict_origin_policy” 3、将security.fileuri.strict_origin_policy设置为false 4、关闭目前开启的所有Firefox窗口，然后重新启动Firefox。 参考链接：https://blog.csdn.net/senssic/article/details/48436365

1.基本用法 runAsync1() .then(function(data){ console.log(data); return runAsync2(); }) .then(function(data){ console.log(data); return runAsync3(); }) .then(function(data){ console.log(data); }); function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log(‘异步任务1执行完成’); resolve(‘随便什么数据1’); }, 1000); }); return p; } function runAsync2(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log(‘异步任务2执行完成’); resolve(‘随便什么数据2’); }, 2000); }); return p; } function runAsync3(){ var p = new Promis…

原理：如果成功会触发window的blur事件 (function($)) { $(‘a[href^=mailto]’).each(function() { var href = $(this).attr(‘href’); $(this).click(function() { var t; var self = $(this); $(window).blur(function() { // The browser apparently responded, so stop the timeout. clearTimeout(t); }); t = setTimeout(function() { // The browser did not respond after 500ms, so open an alternative URL. document.location.href = ‘…’; }, 500); }); }); })(jQuery); 参考链接：https://www.uncinc.nl/en/articles/dealing-mailto-links-if-no-mail-client-available