前端
白茶SyraTi
小前端,有空就倒腾点别的
展开
-
关于vue-cli4无法配置自定义devtool选项的问题
问题表现在vue.config.js中无法配置自定义devtool选项,无论是使用configureWebpack还是chainWebpack都无法改变source-map的类型。官方文档也没有提供相关的说明。// vue.config.js// 两种方式均无法更改devtoolmodule.exports = { configureWebpack: { devtool: "source-map" }, chainWebpack: config => { confi原创 2021-10-26 14:18:33 · 1497 阅读 · 1 评论 -
Vue绑定<audio>/<video>标记的muted属性无效问题随记
援引Github上的issue回复翻译:muted属性类似于<input>的value属性,如果他在元素初始化时是内联的,那么属性值将作为初始值;但是如果在一开始并没有内联,只是后续更改了attribute 1 值,那么将不会起任何效果,正确的做法是设置相对应的property 1 值。关于attribute和property值的区别,可以看我往期的文章。 ↩︎ ↩︎...原创 2021-01-28 14:59:47 · 3712 阅读 · 2 评论 -
关于CSS选择器书写正确浏览器却不认的一个原因
不想看原因的,可以直接跳到页尾看解决方案今天在写样式的时候出现不生效的问题,选择器是正确的,使用jquery也能正常选择到,但是浏览器就是不识别这一段样式。问题样式 ↓jQuery能选择到 ↓然而Chrome的开发者工具里面根本没有出现这一行 ↓排查到最后尝试删除了选择器末尾的空格,发现居然神奇的被识别了。。。。删除末尾空格 ↓识别成功 ↓问题是解决了,但是奇了怪...原创 2020-03-26 11:05:37 · 497 阅读 · 2 评论 -
获取元素到页面顶部的距离
const offsetTop = targetElement.getBoundingClientRect().top + document.body.scrollTop原创 2020-03-12 17:13:29 · 1728 阅读 · 0 评论 -
webstorm中 emmet 模板的修改步骤
之前用atom、sublime的时候 Emmet 的模板是可配置的 但是在webstorm配置中的Editor &gt; Emmet选项下没有发现任何有关模板的配置 只有一些选项的配置其实模板配置在Editor&gt;Live Templates 下 会找到有Zen字样开头的 Zen CSS、 Zen HTML、Zen XSL 分别是CSS、HTML、XSL的模板 *E...原创 2018-03-27 14:14:09 · 1517 阅读 · 0 评论 -
iframe在ios中高度自扩展问题 解决方案
开发需求在页面中加入一个定高的iframe问题IOS safari中iframe会根据内容高度进行iframe的内容自扩展以适应内容高度 设置height无效百谷之后在 iOS Safari 上,对于一个 scrollable 的 iframe 元素,iOS Safari 会选择扩展 iframe 的高度来自适应其中 web 页面内容的高度。所以当页面内容超过 iframe 设置的高度...原创 2018-10-11 14:52:31 · 1727 阅读 · 4 评论 -
微信浏览器中iframe srcdoc、src="data:text/html,xxxx" 等无法使用情况下防止样式污染的解决方案
业务需求从后端取HTML 前端展示要求HTML不得被前台全局样式污染解决方案1、使用iframe 的 srcdoc &amp;amp;amp;amp;lt;iframe srcdoc=&amp;amp;amp;quot;&amp;amp;amp;amp;lt;p&amp;amp;amp;amp;gt;这是HTML&amp;amp;amp;amp;lt;p&amp;amp原创 2018-11-07 16:07:46 · 9951 阅读 · 0 评论 -
Chrome DevTool 行号错位问题
随手记录原因:当你在一个js里面写document.write(’&lt;script&gt;多行内容xxxx&lt;/script&gt;’)后页面上的script断点调试会错位表现就是断点打在某一行 实际停在上面几行相差的行数取决于你写进文档的多行内容的行数...原创 2018-12-20 10:43:16 · 822 阅读 · 0 评论 -
前端代码规范
HTML语法用四个空格来代替制表符(tab) – IDE可设置一个Tab四个空格嵌套元素应当缩进一次(即四个空格)。对于属性的定义,确保全部使用双引号,绝不要使用单引号。不要在自闭合(self-closing)元素的尾部添加斜线 。不要省略可选的结束标签(closing tag)(例如, 或 )。HTML5 doctype为每个 HTML 页面的第一行添加标准模式(stand...原创 2019-03-25 11:04:29 · 344 阅读 · 0 评论 -
拒绝假空心!纯css实现 真·空心带边框直角三角形和空心带边框直角梯形!
需求↑需要实现一个背景为半透明且带边框的直角梯形百谷解决方案碰到问题,程序猿的优良传统,先百谷一下(?) 得到的解决方案总结一下有这些:1.利用border交界处为斜边来制作,即border-top:none;border-right:transparent→问题:使用border来做背景,没法在border上再做边框,只能得到一个半透明的直角梯形2.利用矩形和三角形拼接→问题:...原创 2019-06-07 23:17:06 · 4591 阅读 · 1 评论 -
css椭圆轨迹运动动画
朋友问我一个球沿着斜的椭圆轨迹运动怎么实现 实现之后随手记录demo地址原创 2019-07-02 11:19:36 · 4165 阅读 · 0 评论 -
ios中 input[readonly] 仍然可聚焦出现光标并弹出“完成”面板问题
除readonly外 还需要添加unselectable="on" onfocus="this.blur()"转载 2018-02-05 17:47:24 · 2056 阅读 · 1 评论 -
关于For循环中进行异步操作索引不正确的处理方式
code 问题代码function test() { for (var i = 0; i < 5; ++i) { setTimeout(function() { console.log("index is :", i); }, 1000); }}test();output 问题输出index is : 5index is原创 2017-11-28 10:14:18 · 605 阅读 · 0 评论 -
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 · 386 阅读 · 0 评论 -
一个Mui Demo仓库
链接 https://github.com/zhaomenghuan/mui-demo原创 2017-08-10 14:03:13 · 4698 阅读 · 0 评论 -
关于ajaxFileUpload造成 input[type=file] change事件只能触发一次的问题
现在发现的问题通过js绑定的input[type=file] change事件只能触发一次原因该问题并不是由change事件失效造成的,而是ajaxFileUpload插件造成的,它会把原来的file元素替换成新的file元素,所以之前绑定的change事件就失效了,需要重新绑定一下除了重新绑定以外,如果是使用$fileInput.trigger('click') 方式,失效原...原创 2017-08-18 13:26:09 · 2050 阅读 · 1 评论 -
利用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 · 804 阅读 · 0 评论 -
JS实现点击按钮,复制文本框中的的内容
JSfunction copyUrl2(){ var target=document.getElementById("anyInput"); target.select(); // 选择文本 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘。");}html<textarea cols="20"原创 2017-07-28 09:04:03 · 5351 阅读 · 0 评论 -
Property(prop)和Attribute(attr)的区别
Attribute和Property都被翻译成“属性”原创 2017-07-29 13:31:10 · 826 阅读 · 0 评论 -
关于Ajax跨域访问 session不能保存或之后无法访问session取值为空等问题
根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求,服务器就会以为是一个新的人,而不是同一个人,为了解决这样的办法,下面这种方法可以解决这种跨域的办法。转载 2017-09-27 00:27:35 · 4905 阅读 · 2 评论 -
window.requestAnimFrame 以及Polyfill
requestAnimationFrame requestAnimationFrame是浏览器用于定时循环操作的一个接口,类似于setTimeout,主要用途是按帧对网页进行重绘。 设置这个API的目的是为了让各种网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。代码中使用这个API,就是告诉转载 2017-10-08 20:56:24 · 1880 阅读 · 0 评论 -
关于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 · 2580 阅读 · 8 评论 -
使用canvas实现图片压缩
那,首先通过URL.createObjectURL(file)从file对象直接取得了图片的地址前面就不详细说了,开始压缩咯 ( ´ ▽ ` )ノ噢,有个注意点:每次调用createObjectURL的时候,一个新的URL对象就被创建了,即使是同一个file对象,也会创建一个新对URL对象,所以,为了最佳性能和内存使用,当不再需要这个对象的时候要URL.revokeObjectURL()释放它。开始转载 2017-11-09 10:10:05 · 357 阅读 · 0 评论 -
为什么不要使用 ::before{content:url(‘xxx‘)} 设置图标
项目中遇到 随手记录 ::before ::after等伪类中使用content:url()中的图片无法设置宽高原创 2020-09-07 16:19:22 · 8753 阅读 · 16 评论 -
关于百度地图 DrivingRoute moreResultsUrl为“未能找到相应结果,请您:返回上一步操作..” 以及 WalkingRoute moreResultsUrl为空 的解决方案
—— 因为百度地图极速版貌似正在关闭并且停止维护了 文档页面和介绍页面都跳转到了正式版的API,然而极速版中非常好用的 routeSearch.routeCall 没了 于是乎开始找代替方案A Few Minutes Later…..经过一番Demo和文档的查找,惊喜的发现正式版中TransitRoute,WalkingRoute,以及DrivingRoute 的searchCompl...原创 2017-12-07 16:27:37 · 1645 阅读 · 0 评论 -
html垂直自适应布局
项目中遇到如下需求<body> <!-- top 盒子内容为内部撑开 --> <div class="top"> <!-- 未知高度的一些元素 --> </div> <!-- 目标盒子 需要自动填满屏幕剩余高度--> <div原创 2017-12-02 10:11:28 · 3172 阅读 · 0 评论 -
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 · 4872 阅读 · 0 评论