随笔分类 - 编程技巧
摘要：根据ua判断iOS var ua = navigator.userAgent; if (ua.match(/(iPhone\sOS)\s([\d_]+)/)) { // is ios } 根据ua判断ipad var ua = navigator.userAgent;if (ua.match(/(i
阅读全文
摘要：参考 这回试试使用CSS实现抛物线运动效果 总结 实现抛物线步骤： 1、抛物线运动元素使用至少内外两层标签，可以外面一层<div>，里面是<img>图片 2、内外两次标签一个负责水平方向的translate移动，一个负责垂直方向的translate移动，然后使用不同的缓动函数（timing-func
阅读全文
摘要：高度/行高=文本行数 <script> // 高度/行高=文本行数 var rowNum=Math.round($(".txt").height()/parseFloat($(".txt").css('line-height'))); alert("当前有"+rowNum+"行"); </scrip
阅读全文
摘要：背景 前端网页倒计时是非常常见的应用，我们在各大购物网站的秒杀活动中总是能见到它的身影。但是在实际情况中，我们常常会发现当网页不刷新、让倒计时程序持续运行时，显示时间相比实际时间会越来越慢，相信大家也有在秒杀时间即 将到来时不停刷新页面的经历。原因自然也不难理解：倒计时通常使用定时器（setTime
阅读全文
摘要：前言 项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式，但是我们都知道JavaScript或jQuery并没有伪类选择器。这里总结一下几种常见的方法。 HTML <p class="red">Hi, this is a plain-old, sad-
阅读全文
摘要：方法一：使用typeof if (typeof myObj == "undefined") { var myObj = { }; } 方法二：使用！ if (!myObj) { var myObj = { }; } 方法三：使用 "精确比较"（ ）的情况 if (myObj undefined) {
阅读全文
摘要：一、获取可枚举的属性 方法一：for......in 方法一：Object.keys() Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。 语法 Object.keys(obj) 参
阅读全文
摘要：方法一：使用for...in for...in... 遍历属性，为真则为“非空数组”；否则为“空数组” for (var i in obj) { return true // 如果不为空，则会执行到这一步，返回true } return false // 如果为空,返回false 方法二：使用JSO
阅读全文
摘要：前言 最近在开发时遇见一个问题 我们知道a标签的disabled属性部分浏览器支持，但是尽管设置了disabled属性也无法阻挡任何鼠标经过或是点击事件的，那么如何实现a标签按钮的禁用呢? 转换一下思维，设置disabled属性的元素表现为不能点击、无法获得光标焦点，那么我们不用disabled属性
阅读全文
摘要：前言 最近在开发中在写表单时想要将表单左侧的文案两端对齐 实现 在固定宽度的div中实现文字两端对齐有浏览器兼容问题：以下测试在谷歌67 火狐59 IE11 谷歌浏览器 谷歌浏览器 text-align-last: justify; 即可 火狐浏览器 火狐浏览器 1. 文字之间必须有空格 2. 添加
阅读全文
摘要：问题描述 一般的form表单提交是单向的：只能给服务器发送数据，但是无法获取服务器返回的数据，也就是无法读取HTTP应答包。 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦。 解决方法 方法一： jQuery封装了一个form表单提交有回调功能的方法 导入 jquery
阅读全文
摘要：前言 在移动端如何让宽度自适应来实现一个正方形，也就是宽度设置为百分比。 方法一： 使用javascript/jquery 效果图： 方法二： 将元素垂直方向的一个padding，也就是padding-bottom或者padding-top设置为和宽度相同的百分比，将盒子撑起来， padding-b
阅读全文
摘要：隐藏元素的方法 隐藏元素的方法可以总结为六类：直接隐藏、对溢出内容隐藏、对元素透明度进行调整、将元素移除当前屏幕、对元素的层级关系进行调整、对元素进行裁剪 只有对元素的透明度进行调整才可以点击，其余都不可点击 第一类方法：直接隐藏 第二类方法：对溢出内容隐藏 第三类方法：对元素透明度进行调整 注：过
阅读全文
摘要：前言 在实际开发中，我们不可避免的有时需要给行内元素设置宽高，那么如何来实现呢？ 方法一：使用display display:block/inline-block/flex/inline-flex 效果图： 方法二：使用position position:absolute/fixed 效果图： 方法
阅读全文
摘要：html结构： 方法1：display:flex 方法2：绝对定位和负边距 方法3：translate 方法4：table-cell 方法5：偏移量0+margin:auto 父元素设置相对或绝对定位；要居中的子元素设置绝对定位，所有偏移量为0，外边距为auto：
阅读全文
摘要：铺满屏幕的布局方法 我们可以通过设置html和body的高度来填满整个浏览器屏幕的高度: 如果我们将html和body都设置为height: 100%时,body的高度仅会被设置为浏览器屏幕的高度.当body里的内容高度大于浏览器屏幕高度时,会因为默认的设置overflow:visible使得高出的
阅读全文
摘要：前言 最近在工作中遇到了一个问题，某个需求需要获取元素的高度，就假定是div元素，但是呢因为div中元素的内容高度是不确定的，所以并没有给div设置高度，在获取高度时，我们首先会想到3种方法 1、div.style.height; 我们会发现输出空，这是因为style对象获取的是定义在内联样式中的属
阅读全文
摘要：前言 有些时候在一个模块内容过多时，我们希望以“...”来表达还有更多内容，接下来我们来看如何实现这一效果 情况一：一行文字显示“...” 方法一：使用text-overflow:ellipsis 该属性适于用块元素或行内块元素，如果是行内元素需要使用display:block/inline-blo
阅读全文
摘要：前言 有些需求需要我们控制一段文本最多显示几行，就像逛淘宝京东的评价楼层一样，有时可能还需要隐藏剩余部分，这样的需求我们怎么来解决呢？ 解决办法 我们完全可以使用css来解决这一需求 1. 解决文本显示行数 2. 隐藏剩余部分 注意：当我们设置了display:-webkit-box，那么-webk
阅读全文
摘要：前言 在移动端中我们我们经常会遇见“横滑”的需求，也就是“横向滚动”，开使我们可能会想到用各种触摸事件，至少我的第一反应是这样，但其实有更简单的办法！也就是使用overflow属性 解决办法 方法一：使用overflow属性来解决，像下面这样即可实现横滑 如果说想要显示“一个半”li，其实大可不必担
阅读全文
