- 博客(58)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 移除Select box focus
在桌面端，为select box添加focus background之后，由于select还处于focus状态，background并不会自动消失
126
原创 为全面屏iPhone X/XS/XR 创建底部导航栏/底部按钮
比较图1和图2-左，可以发现，底部按钮在全面屏中并没有足够的空间去展示，理想情况为图2-右以及图3-左，有足够的填充。图2-左的情况会导致：1.用户需要双击才能实现按钮的点击2.有概率会退出到手机主页那么如何来解决这个问题，以达到图3的效果？我们可以通过使用env(safe-area-inset-bottom)来达到额外填充的效果。padding-bottom:env(safe-area-inset-bottom)padding-bottom:calc(0.5rem+en...
2021-09-09 17:03:59
2570
转载 高性能CSS3动画
注：本文出自淘宝的元彦，见文前端观察。高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是...
2019-02-15 16:17:20
220
原创 positon:fixed定位失效
positon:fixed---绝对定位元素将相对于屏幕视口（viewport）的位置来指定其位置，并且元素的位置在屏幕滚动时不会改变。fixed 属性会创建新的层叠上下文（Stacking Context）。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。Stacking Context---层叠上下文层叠上下文是HTML元素的三维概念，这些HTML元素...
2019-02-14 18:19:03
1211
原创 Video控件的显示与隐藏
隐藏控件：video::-webkit-media-controls-fullscreen-button { display: none;}video::-webkit-media-controls-play-button {}video::-webkit-media-controls-timeline {}video::-webkit-media-controls-curren...
2018-10-12 14:36:54
13469
1
原创 不定宽块级元素水平居中
传统方法中，要让不定宽元素水平居中，我们一般采取以下结构：<div class="more-btn1"><span>查看更多</span></div>.more-btn1 { text-align: center;}.more-btn1 span { display: inline-block; paddi...
2018-05-07 11:10:39
281
原创 jQuery中attr()和prop()的区别
在jQuery中，attr()函数和prop()函数都可以用来设置或获取指定的属性，它们的参数和用法几乎相同，但也有它们的不同之处。 1.操作对象不同在jQuery中，attr()函数用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)， prop()函数则用于设置或获取指定DOM元素(JS对象，Element类型)上的属性(property)。 2...
2018-04-20 16:44:54
436
原创 jQuery UI sortable使用-拖拽
sortable可实现拖拽以及排序，使用过程中，碰到markdown编辑器的情况，在需要对输入的部分内容进行复制删除操作时，会拖动整个编辑框,可通过cancel选项解决。$(this).sortable({ cancel: '.CodeMirror',});或者：// Gettervar cancel = $( ".selector" ).sortable( "option...
2018-04-17 18:08:26
467
原创 选择排序-Selection Sort
选择排序（Selection Sort）是一种简单直观的排序算法。它的工作原理如下，首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。选择排序的主要优点与数据移动有关。如果某个元素位于正确的最终位置上，则它不会被移动。选择排序每次交换一对元素，它们当中至少有一个将被移到其...
2018-04-16 18:15:55
216
原创 快速排序-Quicksort
快速排序（Quicksort），又称划分交换排序，简称快排！基本思想： 1.数据集中，选择一个元素作为基准(pivot)元素 2.所有小于基准的元素，移到基准的左边，大于的则移到基准的右边，这一操作可称为分区(partition) 3.对基准元素左右两边的两个子集，重复步骤1和步骤2，直到所有子集只剩下一个元素为止。 function quickSort(array) {...
2018-04-12 18:04:04
309
原创 CSS关键字initial、inherit和unset
对于position的取值，常见的有：static、relative、absolute 和 fixed，还有较少被关注到的：initial,inherit和unset。1.initial 可用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式（IE不支持该关键字）2.inherit 可继承属性，从父元素那获取对应属性的经过计算与转换的值，如果父元素没有，则向上查找，直到使用浏...
2018-03-19 15:51:42
2375
原创 获取元素CSS值之getComputedStyle、currentStyle、style
1.getComputedStyle通过getComputedStyle可以获取当前元素所有最终使用的CSS属性值，返回的样式是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。(只读！)语法：var style = window.getComputedStyle(element, [pseudoElt]);element:用于获取...
2018-03-02 18:08:12
792
原创 Vue中ref与$refs的使用
ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是DOM 元素；如果用在子组件上，引用就指向组件实例。1.DOM元素上使用template> div class="edit-input" :class="{'edit-input-show': is_edit}"> inp
2018-01-22 18:25:33
3222
原创 JSON.stringify()结合localStorage
JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象 JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串当我们想存储用户创建的一个对象，并且，即使在浏览器被关闭后仍能恢复该对象时：var localEvent = function (item) { this.get
2018-01-18 15:44:20
595
原创 正则匹配：[^]和\n
我们知道. 可以匹配除了换行符（\n）以外的任意一个字符 = [^\n]， 那[^]的作用是什么？ 先看看下面这段代码：找出重复字符的个数function duplicateCount(text) { return (text.split('').sort().join('').match(/([^])\1+/g)).length;}([^])捕获任何字符\1+跟着一
2018-01-11 17:59:19
4342
原创 String的常用方法
1.substring()返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。语法：str.substring(indexStart[, indexEnd]) 提取从 indexStart 到 indexEnd（不包括）之间的字符如果 indexStart 等于 indexEnd，substring 返回一个空字符串。如果省略 indexEnd
2018-01-10 11:31:41
603
原创 金钱格式化
一、正则var test1 = '123565456.89';var format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',');console.log(format);//"123,565,456.89"1.\B匹配边界 2.?=(\d{3})+表示必须是1个或多个的3个连续数字 3.(?!\d)表示除数字外的任意字符，即匹配到数字以
2017-12-29 16:59:49
526
原创 伪类:before的妙用
先说个应用于li的场景，都知道在list-style: disc情况下，li的表现是这样的： 1、间距大，虽然可以通过margin负值来调整 2、圆点太大，不好看，不好调整大小，而且在谷歌/火狐上看起来有差异所以:before就派上用场了：<li class="test">test</li>.test { position: relative; margin: 50px;
2017-12-27 12:11:41
1019
原创 jquery实现点击按钮返回到页面顶部
应用场景：页面内容过长，同时每个页面有固定底部 HTML<div class="back-to-top" id="js-backtotop" > <span>Back to Top</span></div> CSS .back-to-top { position: fixed; right: 0; bottom: 10px; height:
2017-12-26 12:11:58
607
原创 JS小数运算精度问题
我们可能在平时运算过程中碰到以下类似情况： 0.1 + 0.2 结果是 0.30000000000000004 0.0003 * 10 结果是 0.0029999999999999996 0.003 / 10 结果是 0.00030000000000000003原因在于：在计算机内部，使用二进制浮点数并不能准确地表示像 0.1, 0.2 或 0.3 这样的数字，所以当编码或解释代码时，像“0.
2017-12-26 00:15:11
1293
转载 移动web 1px边框解决方案
在移动端web页面开发中，为了使css中使用的尺寸与设计稿一致，通常会采用 rem 单位配合 lib-flexible 来实现移动端的适配，在IOS设备上 flexible.js 会根据设备的分辨率动态的调整 viewport 的 width 和 scale 来达到目的。但是，现在很多的安卓手机也是高分辨率的屏幕，有些1px边框的按钮和列表会显得特别粗，flexible.js 只处理了IOS的手机，
2017-12-20 11:18:01
436
转载 如何使用Markdown写博客
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
2017-12-20 11:09:15
2275
转载 正则语法+实践
正则就是用有限的符号，表达无限的序列。正则表达式的语法一般如下(js)，两条斜线中间是正则主体，这部分可以有很多字符组成；i部分是修饰符，i的意思表示忽略大小写。/^abc/i1.简单字符没有特殊意义的字符都是简单字符，简单字符就代表自身，绝大部分字符都是简单字符。/abc/ // 匹配 abc/123/ // 匹配 123/-_-/ // 匹配 -_-2.转义字符 变量 说
2017-12-19 16:40:18
254
原创 封装获取浏览器宽高
$.extend({ $.getWindowSize = function() { var dim = { width: false, height: false }; if (typeof window.innerWidth !== "undefined") { dim.
2017-12-14 15:06:10
297
原创 parent()与parents()的区别
parent()取得一个包含着所有匹配元素的唯一父元素的元素集合 parents()取得一个包含着所有匹配元素的祖先元素的元素集合（包含根元素）。parent()方法查找对应的节点，只会向上搜索一层，而parents()则会搜索整个DOM树<div class="container"> <div class="content"> <div class="img-contai
2017-12-06 15:24:42
5732
原创 slideToggle()和toggleClass()的用法
slideToggle()通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。对应slideUp()和slideDown() 注意：在使用slideToggle()进行显隐内容时，在响应式页面下，切记不要在前面添加.stop()如：$(this).stop().slideToggle();在内容即将显示或隐藏时继续点击，会出现如下情况，当屏幕变大或缩小，页面内容高度应有所
2017-12-01 14:48:56
1785
原创 input开关按钮
<input class="switch-btn switch-btn-animbg" type="checkbox" checked><label><input class="switch-btn switch-btn-animbg" type="checkbox" checked> 默认选中</label>.switch-btn { cursor: pointer; width: 45
2017-12-01 11:45:02
6126
原创 margin-right负值的使用
在某些布局当中，.test这个块必须包含在.main这个块中，而同时要达到如下图的效果，则可以使用margin-right负值<div class="main"> <div class="test"></div></div>.main { background: #ccc; width: 400px; height: 200px;}.test { bac
2017-11-30 18:35:21
1547
原创 display:table图文垂直居中布局
在日常布局当中，碰到需要图文左右两列，垂直居中的情况，即在文字内容高度大于图片高度时，图片相对文字垂直居中，反之，则文字相对图片垂直居中。 对于响应式布局，由于图文字高度的变化，所以要避免出现文字或图片被遮挡住的情况，那么就要设定一定大小的上下padding值。 初次尝试，定义左右浮动，此时display:table-cell布局失效。那要让文字垂直居中，首先想到的是定位：position: a
2017-11-30 16:41:11
1761
原创 CSS3分享按钮
HTML<div class="share-icon"> <span class="s1"></span> <span class="s2"></span> <span class="s3"></span> <span class="s4"></span> <span class="s5"></span></div> CSS// share icon clos
2017-11-30 15:23:22
395
原创 正则匹配: match
在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，匹配结果作为数组值返回var aMsg = [ "很不满意|差得太离谱", "不满意|部分有破损", "一般|质量一般"]var tem = aMsg[2].match(/(.+)\|/);console.log(tem);//["一般|", "一般"]该数组包含index、input两个属性，其中index
2017-11-14 01:20:03
447
原创 较实用的图形CSS写法
1、对话框 #talkbubble { width: 120px; height: 80px; background: #404040; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-ra
2017-11-14 00:57:04
225
原创 git config配置用户名和快捷命令(别名)
一、使用git的第一步，需要有一个仓库，获取仓库有两种方法： 1. git init #初始化一个仓库 2. git clone url #克隆一个已有仓库二、配置用户名和快捷命令 git config –global user.name Sven git config –global user.email [email protected] config –global alias
2017-11-02 15:26:56
1983
原创 利用CSS计数函数counter()和counters()实现自动计数编号
在li列表中，我们通过list-style-type可轻松实现计数，但无法做到动态更新前面的序号，通过CSS计数函数则可实现。 场景：在下单页面，有对新老用户的判断，对于未登录用户，第一步是选择登录或者注册，第二步是选择用户地址…未登录用户在登录后原来第二步会变成第一步，而已登录过用户第一步就是选择地址。body { /*插入计数器第一个计数器从0开始累加，第二个计数器从1开...
2017-09-25 18:09:51
1809
转载 你确定了解连续赋值运算嘛？
连等是先确定所有变量的指针，再让指针指向那个赋值对于 a.x = a = {n:2}，我们可能会这么想：1.先把 {n:2} 赋值给 a2.然后再创建 a.x，将 {n:2} 再赋值给 a.x这样似乎确实说不通 a.x 的值是 undefined，因为 a.x 确实是被赋值了的啊。 可事实上，a.x 的值就是 undefined。再来看一下： a = a.x = {n:2}，按照上面的思路来看
2017-09-01 18:33:30
1495
原创 $(document).height()与$(window).height()区别
1.$(document).height()代表整个文档(页面)的高度 $(window).height()则代表当前可见区域的大小 所以当浏览器窗口大小发生变化时，$(document).height()值不变，$(window).height()发生变化2.$(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离 $(do
2017-08-30 15:16:16
1952
空空如也
Vue.js中$destroy与$remove的区别在哪？
2016-08-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人