;

This can be done using CSS transforms 1) For 12 equal slices, each slice angle will be 30 degrees. 2) We need to rotate each slice according to the angle between vertical axis and start of the slice. So the first slice will be rotated by 0deg and the last by 330deg 3) Additionally we need to skew each slice by minus (90deg – slice angle) In this case, it is -(90deg – 30deg) = skewY(-60deg) 4) Regarding the text: a) We need to unskew slice contents with skewY(60deg) b) In order to center the text in the slice we need to rotate it by half the slice angle, hence: r…

通过css如何等分一个圆? 23 天前
;

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 = []….

多个对象数组求差值 2019年7月22日
;

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…

dispatchEvent如何触发冒泡 2019年6月16日
;

在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…

在JavaScript中借用方法 2019年6月5日
;

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

ajax cors跨域携带cookie 2019年4月11日
;

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’);" > 二…

addEventListener和onclick的区别,dom0与dom2 2019年3月29日
;

关键点:饼图传入两份数据,一份设置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:…

echarts饼图同时显示指示线和百分比 2019年3月12日
;

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

echart折线图不叠加 2019年3月12日
;

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: "…

echart:配置注释 2019年3月12日
;

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

父元素设置flex后会导致子元素换行失效 2019年3月9日
;

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

swiper报错‘Cannot read property ‘indexOf’ of undefined swiper’ 2019年3月9日
;

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

css设置calc不生效 2019年3月9日
;

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

mcanvas.js中画布大小如何设置 2019年3月8日
;

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]) }

setInterval多次调用后,clearInterval无效 2019年2月28日
;

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

div中包含img标签,下方出现空白 2019年2月21日
;

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

针对firefox的css设置 2019年2月18日
;

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;}

内容区域可滚动,但不显示滚动条 2019年2月13日
;

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…

videojs 播放的各个生命周期callback 2019年2月12日
;

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

支付宝返回数据处理 2019年1月2日
;

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

javascript中的继承 2018年10月17日
;

一、原型 ①所有引用类型都有一个__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_…

什么是原型和原型链? 2018年10月16日
;

<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

theme-color设置浏览器地址颜色 2018年9月9日
;

解决办法: 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

firefox无法通过ajax读取本地json文件 2018年9月5日
;

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…

Promise用例 2018年8月24日