自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(33)
  • 收藏
  • 关注

原创 为什么不要使用 ::before{content:url(‘xxx‘)} 设置图标

项目中遇到 随手记录 ::before ::after等伪类中使用content:url()中的图片无法设置宽高

2020-09-07 16:19:22 5724 11

原创 浮点数计算精度误差原理随记

场景0.1 + 0.2 = 0.30000000000000004原因首先,我们要站在计算机的角度思考 0.1 + 0.2 这个看似小儿科的问题。我们知道,能被计算机读懂的是二进制,而不是十进制,所以我们先把 0.1 和 0.2 转换成二进制看看:0.1==》0.1.toString(2)==》0.0001100110011(无限循环…)0.2==》0.2.toString(2)==》0.001100110011(无限循环…)双精度浮点数的小数部分最多支持 52 位,所以两者相加之后得到这么一串

2020-06-03 17:34:49 81

原创 关于CSS选择器书写正确浏览器却不认的一个原因
原力计划

不想看原因的,可以直接跳到页尾看解决方案今天在写样式的时候出现不生效的问题,选择器是正确的,使用jquery也能正常选择到,但是浏览器就是不识别这一段样式。问题样式 ↓jQuery能选择到 ↓然而Chrome的开发者工具里面根本没有出现这一行 ↓排查到最后尝试删除了选择器末尾的空格,发现居然神奇的被识别了。。。。删除末尾空格 ↓识别成功 ↓问题是解决了,但是奇了怪...

2020-03-26 11:05:37 143

原创 获取元素到页面顶部的距离

const offsetTop = targetElement.getBoundingClientRect().top + document.body.scrollTop

2020-03-12 17:13:29 690

原创 IOS/Mac/Safari无法播放MP4文件流及Http1.1 Range分段请求相关

故事背景公司项目需要将多媒体文件迁移至阿里OSS,原本直接从后端静态文件的<img> <video> 等标签都要改成从OSS获取展示。于是乎拦截了所有静态链接,调用了OSS接口获取了文件流返回到前台进行展示,简单粗暴,但是也遇到了问题 —— ios的 <video> 标签全军覆没。由于项目里视频比较少,这问题还是在上线前三天发现的,那个急的,一开始还找不到...

2019-12-26 01:31:53 1029

原创 关于Group By 单个和多个字段

在MYSQL中使用GROUP BY对表中的数据进行分组时:单个字段: GROUP BY X意思是将所有具有相同X字段值的记录放到一个分组里,多个字段: GROUP BY X, Y意思是将所有具有相同X字段值和Y字段值的记录放到一个分组里。参考文章:MYSQL GROUP BY 对多个字段进行分组 - Acettest’s Blogs - CSDN博客...

2019-10-31 15:57:39 164

原创 css椭圆轨迹运动动画

朋友问我一个球沿着斜的椭圆轨迹运动怎么实现 实现之后随手记录demo地址

2019-07-02 11:19:36 1870

原创 拒绝假空心!纯css实现 真·空心带边框直角三角形和空心带边框直角梯形!

需求↑需要实现一个背景为半透明且带边框的直角梯形百谷解决方案碰到问题,程序猿的优良传统,先百谷一下(?) 得到的解决方案总结一下有这些:1.利用border交界处为斜边来制作,即border-top:none;border-right:transparent→问题:使用border来做背景,没法在border上再做边框,只能得到一个半透明的直角梯形2.利用矩形和三角形拼接→问题:...

2019-06-07 23:17:06 2225

原创 前端代码规范

HTML语法用四个空格来代替制表符(tab) – IDE可设置一个Tab四个空格嵌套元素应当缩进一次(即四个空格)。对于属性的定义,确保全部使用双引号,绝不要使用单引号。不要在自闭合(self-closing)元素的尾部添加斜线 。不要省略可选的结束标签(closing tag)(例如, 或 )。HTML5 doctype为每个 HTML 页面的第一行添加标准模式(stand...

2019-03-25 11:04:29 71

原创 一根网线同时搭载电信itv及网络 解决方案

需求想把无线路由器放到客厅 但是客厅只有一个网口连接到弱电箱光猫的itv口 用来看电视 现在需要在该网口同时搭载网络和itv原拓扑图如下解决方案材料:1、水星Mercury SG105Pro 五口千兆网管交换机 价格 98 元 放置在客厅(下称SW5)2、水星Mercury SG108Pro 八口千兆网管交换机 价格 169 元 放置在弱电箱(下称SW8)解决思路:利用802.1...

2019-02-10 23:43:58 7421 23

原创 Chrome DevTool 行号错位问题

随手记录原因:当你在一个js里面写document.write(’&amp;lt;script&amp;gt;多行内容xxxx&amp;lt;/script&amp;gt;’)后页面上的script断点调试会错位表现就是断点打在某一行 实际停在上面几行相差的行数取决于你写进文档的多行内容的行数...

2018-12-20 10:43:16 392

原创 微信浏览器中iframe srcdoc、src="data:text/html,xxxx" 等无法使用情况下防止样式污染的解决方案

业务需求从后端取HTML 前端展示要求HTML不得被前台全局样式污染解决方案1、使用iframe 的 srcdoc &amp;amp;amp;amp;amp;lt;iframe srcdoc=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;这是HTML&amp;amp;amp;amp;amp;lt;p&amp;amp;amp

2018-11-07 16:07:46 6007

原创 iframe在ios中高度自扩展问题 解决方案

开发需求在页面中加入一个定高的iframe问题IOS safari中iframe会根据内容高度进行iframe的内容自扩展以适应内容高度 设置height无效百谷之后在 iOS Safari 上,对于一个 scrollable 的 iframe 元素,iOS Safari 会选择扩展 iframe 的高度来自适应其中 web 页面内容的高度。所以当页面内容超过 iframe 设置的高度...

2018-10-11 14:52:31 1234 4

原创 new Obj() 与 Object.create(Obj.prototype)的区别

先看 Object.create 和new 的区别以下引用自blueblueskyhua的博客 创建对象的方式,我以我碰到的两种创建方式,Object.create 和new来说明var Base = function () {}var o1 = new Base()var o2 = Object.create(Base) 那这样到底有什么不一样呢? 这...

2018-06-07 13:03:42 862

原创 webstorm中 emmet 模板的修改步骤

之前用atom、sublime的时候 Emmet 的模板是可配置的 但是在webstorm配置中的Editor &amp;gt; Emmet选项下没有发现任何有关模板的配置 只有一些选项的配置其实模板配置在Editor&amp;gt;Live Templates 下 会找到有Zen字样开头的 Zen CSS、 Zen HTML、Zen XSL 分别是CSS、HTML、XSL的模板 *E...

2018-03-27 14:14:09 1250

转载 ios中 input[readonly] 仍然可聚焦出现光标并弹出“完成”面板问题

除readonly外 还需要添加unselectable=&quot;on&quot; onfocus=&quot;this.blur()&quot;

2018-02-05 17:47:24 1813 1

原创 关于百度地图 DrivingRoute moreResultsUrl为“未能找到相应结果,请您:返回上一步操作..” 以及 WalkingRoute moreResultsUrl为空 的解决方案

—— 因为百度地图极速版貌似正在关闭并且停止维护了 文档页面和介绍页面都跳转到了正式版的API,然而极速版中非常好用的 routeSearch.routeCall 没了 于是乎开始找代替方案A Few Minutes Later…..经过一番Demo和文档的查找,惊喜的发现正式版中TransitRoute,WalkingRoute,以及DrivingRoute 的searchCompl...

2017-12-07 16:27:37 908

转载 window.location.replace和window.location.href区别

有3个页面 a,b,c如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c1: b->c 是通过window.location.replace(“..xx/c”) 此时b页面的url会被c页面代替,并且点击后退按钮时会回退到a页面(最开始的页面) 2: b->c是通过window.location.href(“..xx/c”) 此时b页面的路径会被c页面代替,但是点击回按钮后页

2017-12-07 15:09:52 478

原创 html垂直自适应布局

项目中遇到如下需求&lt;body&gt; &lt;!-- top 盒子内容为内部撑开 --&gt; &lt;div class=&quot;top&quot;&gt; &lt;!-- 未知高度的一些元素 --&gt; &lt;/div&gt; &lt;!-- 目标盒子 需要自动填满屏幕剩余高度--&gt; &lt;div

2017-12-02 10:11:28 2455

转载 Jquery的each里用return true或false代替break或continue

在each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用return true/false$(DOM).each(function(index,el){ return false; //break return true; //continue }

2017-11-30 10:10:52 209

原创 关于For循环中进行异步操作索引不正确的处理方式

code 问题代码function test() { for (var i = 0; i &lt; 5; ++i) { setTimeout(function() { console.log(&quot;index is :&quot;, i); }, 1000); }}test();output 问题输出index is : 5index is

2017-11-28 10:14:18 363

转载 使用canvas实现图片压缩

那,首先通过URL.createObjectURL(file)从file对象直接取得了图片的地址前面就不详细说了,开始压缩咯 ( ´ ▽ ` )ノ噢,有个注意点:每次调用createObjectURL的时候,一个新的URL对象就被创建了,即使是同一个file对象,也会创建一个新对URL对象,所以,为了最佳性能和内存使用,当不再需要这个对象的时候要URL.revokeObjectURL()释放它。开始

2017-11-09 10:10:05 247

原创 关于mui Div模式选项卡 JS主动触发切换指定选项卡

需要先触发touchstart事件(旧版本需要先触发mousedown事件) mui.trigger($('.mui-tab-item').eq(1)[0],'touchstart'); mui.trigger($('.mui-tab-item').eq(1)[0],'tap')源代码尚未研究 以上为解决方案2018-3-30 PS: 发现好像只要改一下mui...

2017-11-07 23:20:22 2190 8

转载 window.requestAnimFrame 以及Polyfill

requestAnimationFrame requestAnimationFrame是浏览器用于定时循环操作的一个接口,类似于setTimeout,主要用途是按帧对网页进行重绘。 设置这个API的目的是为了让各种网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。代码中使用这个API,就是告诉

2017-10-08 20:56:24 1628

转载 关于Ajax跨域访问 session不能保存或之后无法访问session取值为空等问题

根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求,服务器就会以为是一个新的人,而不是同一个人,为了解决这样的办法,下面这种方法可以解决这种跨域的办法。

2017-09-27 00:27:35 3864

原创 关于ajaxFileUpload造成 input[type=file] change事件只能触发一次的问题

现在发现的问题通过js绑定的input[type=file] change事件只能触发一次原因该问题并不是由change事件失效造成的,而是ajaxFileUpload插件造成的,它会把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了,需要重新绑定一下除了重新绑定以外,如果是使用$fileInput.trigger('click') 方式,失效原...

2017-08-18 13:26:09 1745

原创 一个Mui Demo仓库

链接 https://github.com/zhaomenghuan/mui-demo

2017-08-10 14:03:13 4434

转载 mui slider轮播组件常用API

原文:http://www.bcty365.com/content-146-5588-1.html组件介绍轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件。示例获取slide组件对象var slider = mui('#slider').slider();常用APIgotoItem(index)切换到指定轮播slide

2017-08-09 11:41:12 4041

原创 input的disabled属性会导致无法上传

如题 很多人会用disable禁止用户修改input的值 但是同时会导致form提交时不包含这个文本框的值 (disabled本意即为禁用 所以自然不会上传)需要实现禁止修改可以使用readonly属性

2017-07-29 13:42:54 1083

原创 Property(prop)和Attribute(attr)的区别

Attribute和Property都被翻译成“属性”

2017-07-29 13:31:10 299

原创 JS实现点击按钮,复制文本框中的的内容

JSfunction copyUrl2(){ var target=document.getElementById("anyInput"); target.select(); // 选择文本 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘。");}html<textarea cols="20"

2017-07-28 09:04:03 4586

原创 利用Overflow:Hidden实现自适应左右两列布局/填充父级元素剩余宽度

HTML<div class="parent"> <div class="Left"></div> <div class="Right"></div></div>左侧CSS.Left{ width:auto;/* 左侧宽度任意 */}右侧CSS.Right{ overflow:hidden;}

2017-07-27 11:51:46 606

转载 CSDN-markdown编辑器:MarkDown语法

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2017-07-27 11:39:35 165

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除