- 博客(22)
- 收藏
- 关注
RSS订阅原创 移动端页面元素尺寸解决方案之一
如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位.主流做法基本也都是这样做的.但是,如果html5页面是在webview中打开的,并且webview不是通常的手机视窗尺寸,而是占了部分页面,使用rem单位的转化标准就没有了通用性.面对这种情况,可以尝试以下的解决方案.使用transform的scale来适配所有尺寸的view设计稿的尺寸一般是px,那么写页面的时候,就使...
2020-01-03 17:26:00
406
原创 使元素的高度根据宽度变化的一种实现方式
如果padding属性的值是百分比值,这个值是根据父元素的宽度(X周属性)计算的,即使是Y轴上的padding(padding-top,padding-bottom)也是如此,根据这个特性,可以实现Y轴尺寸和X轴尺寸相关联的效果. 比如这样写c...
2019-12-11 17:40:08
417
原创 canvas弧形进度条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #circle{ outline: 1px solid black; /* 使用大尺寸再缩小,可以缓解屏幕渲染精度低,边缘毛糙的现象 */ tr...
2019-11-20 17:01:26
453
1
原创 less中使用calc函数计算错误
在less中使用clac函数为什么计算错误？calc是css函数，在原生css中效果很好，calc部分解决了css中不能使用算数表达式的短板。css引擎会计算表达式的值，并对不同的单位进行转化，最终计 算出实际的值。less自身就有计算功能，即使不用calc函数，less也会进行计算：div{ left: 5px + 4px; // 9px}如果计算的单位不一致，less的处理就不像...
2019-05-28 11:44:37
1325
1
原创 在vue中,当style标签有scoped属性时v-html属性内容无样式
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。vue使用PostCSS方式对style进行转义，它会给节点添加唯一的戳，保证样式的作用域。贴上官方给的例子：<style scoped>.example { color: red;}</style><templ...
2019-05-19 16:46:57
944
原创 使用line-height垂直居中在安卓手机上效果不好
前端实现单行垂直居中用的最多的方法可能就是line-height了吧。该属性在pc端和ios手机上效果都很好，可到了安卓手机，有很大几率发生文字上移的现象。 知乎有人分析了导致这一现象的原因，Android浏览器下line-height垂直居中为什么会偏离？大家可以试试文章中的解决方案，反正我试了并没有...
2019-05-19 15:34:30
2218
1
原创 npm 全局安装: Missing write access to /usr/local/lib/node_modules
Missing write access to /usr/local/lib/node_modules是没有写权限, npm官方给出的解决方案是新建一个有权限的文件夹, 在这个新文件夹中安装npm包. 这个方法不适用于Microsoft Windows系统.在用户的根目录创建文件夹(名字不一定要是.npm-global, 可以自己起):mkdir ~/.npm-global设置npm全局...
2019-04-07 21:02:18
9188
2
原创 javascript关于"=="的隐式转换规则(干货)
String VS Numberstring将会转化成number去作比较"42" == 42 // true 42 == 42Anything VS Booleanboolean值将首先转化成number类型, 0或者1. 然后再进行比较"42" == true // false "42" == 1 ---> 42 == 1null VS undefined...
2019-03-10 08:52:37
791
1
原创 记录鼠标轨迹, 生成svg的path, 用纯js实现
因为没有办法直接获取鼠标移动的轨迹, 只能获取鼠标移动后留下的点的坐标. 所以思路是将一系列点坐标转化为曲线坐标. 用mousemove事件获取鼠标的坐标(x, y), 记录到一个数组里边, 然后将坐标数组转化为贝塞尔曲线数据, 有了贝塞尔曲线, 就可以渲染出svg轨迹. 核心转换方法代码如下: /** * 将折线修改为圆滑曲线 * @...
2019-02-19 16:55:20
2589
原创 parseInt转化的坑
parseInt() 函数解析一个字符串参数，并返回一个指定基数的整数 (数学系统的基础)。---MDN划重点:当第一个参数不是字符串时, 会先转成字符串(toString)再进行转化. 第二个参数是一个介于2和36之间的整数(数学系统的基础). 当不指定第二个参数时, 不同的环境可能会有不同的转化结果, 请务必使用第二个参数. 转出的数字是整数.说一些parseInt的坑....
2018-12-23 17:39:22
3763
1
原创 "document.all" will be considered false when encountered in a Boolean context.
在说document.all之前, 先看看哪些值会转化成falsy.undefined null false +0, -0, and NaN "" 在这个列表里的值, 在转化为boolean时, 都会成为false, 不在这个表里的值, 都会变为true. 也就是说, 所有对象(即使是空对象), 所有数组(即使是空数组), 所有非空字符串(即使是" ", "0")都是true. ...
2018-12-23 12:14:28
176
原创 javascript apply
const arr = Array.apply(null, {length: 3});console.log(arr); // [ undefined, undefined, undefined ] 用undefined初始化一个长度为3的数组, 数组的每一个元素都是存在的. 和使用[].length = 3;有本质的区别, 前者是在每个位置上实打实地设置undef...
2018-12-20 13:13:16
218
原创 javascript桶排序初探
function bucketSort(arr) { if (Object.prototype.toString.call(arr).toLowerCase() !== '[object array]') { console.error('Function bucketSort got incorrect argument') return } // 声明一个空桶, ...
2018-12-19 10:16:38
740
1
原创 简单明了不废话, Javascript函数中的this的指向规则
用new调用函数， this指向新创建的对象。 使用call，apply（bind）调用函数， this指向绑定的的对象。 函数作为某对象的属性调用， this指向这个对象。 其他情况下， this指向全局对象（严格模式下指向undefined）。 补充： 如果第二条规则绑定的是null或者undefined， 则执行第四条规则； 1-4条规则优先级递减。...
2018-12-02 10:59:56
124
原创 一步步建立一个React App,项目基本配置,包括单元测试
mkdir my-app - 新建空文件夹cd my-app - 进入文件夹npm init 生成 package.json 文件.安装各种需要的依赖:npm install --save react - 安装React.npm install --save react-dom 安装React Domnpm install --save-dev webpack - 安装Webpack,模块打包工具...
2018-05-28 20:42:51
3108
1
原创 H5的浏览器本地存储localStorage在IE中的坑
最近在做一个web日历，有增加提醒的功能，因为没有后台，所以需要动用浏览器的本地存储，存提醒信息。在Chrome中运行正常的localStorage在IE中死活读不到了。可是明明在IE8的时候，IE就开始支持localStorage了，我的IE11竟然不认了。 各方查找，问题出在代码运行环境上了！要想localStorage在IE中有效，必须在服务器环境才行。 最后说一句，珍爱...
2018-04-05 19:50:59
11447
1
原创 使用vue.js路由踩到的一个坑Unknown custom element
在配合require.js使用vue路由的时候，遇到了路由组件报错： “vue.js:597 [Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provid...
2018-03-29 10:50:47
84820
1
原创 Vue.js的生命周期钩子
beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher事件配置之前被调用。created: 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见。beforeMount: ...
2018-03-25 20:53:20
258
原创 JavaScript在循环中定义函数的问题
最近在工作中遇到一个让人头疼的问题，需要定义21个函数，函数的主体是一样的，功能也是一致的，仅仅是返回值不同。基本的结构是这样的var arr = ["a","b","c","d"];var funcArr = [];for (var i = 0; i < 4; i++) { funcArr[i] = function(){ return arr[i]; }}var ...
2018-03-12 20:23:52
3771
2
原创 JavaScript中的attribute和property
attitude是DOM元素在文档中作为html标签拥有的特性，他的存在与页面元素紧紧联系在一起，它的值只能是字符串形式的。与之相关的js方法有getAttribute()、setAttribute()和removeAttribute()，用于获取、设置与移除元素的特性，这些方法也可用于自定义的特性。 property翻译为属性，是DOM元素在js中作为对象拥有的属性，与js对象联...
2018-03-12 19:40:04
254
原创 创建JavaScript对象的各种模式和各自的特点
在js中创建一个对象的方法有很多种，你可以随时new一个新对象出来，但是如果需要创建很多类似的对象，一个一个去new就太麻烦了。为了解决这个问题，前人摸索出了很多创建对象的模式，这些模式各有利弊，现在就来总结下都有哪些模式，每个模式都有什么特点。 工厂模式： 每次创建对象都要new Object()，然后给对象赋予属性和方法，把这些工作封装为一个函数怎样？自然而然地人们开始这么...
2018-03-10 19:55:13
162
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人