前端集锦.md
8.12 KB
1. Markdown: Syntax
2. 解决ios设备页面滚动条卡顿
-
CSS
overflow: auto; -webkit-overflow-scrolling: touch;3. 单行文本溢出显示省略号(...)
-
CSS
overflow: hidden; text-overflow: ellipsis;// 显示省略符号来代表被修剪的文本。 white-space: nowrap;// 文本不会换行, 在同一行上继续，直到遇到 <br> 标签为止。4. 多行文本溢出显示省略号(...)
-
CSS
overflow : hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; // 限制文本行数2行(webkit私有属性) display: -webkit-box; -webkit-box-orient: vertical;5. 手机软键盘遮挡input
-
方案一
-
JS
$('INPUT').focus(function () { var SCROLLY = 100; var TIMER_NAME = 500; // focus事件中500ms后进行判断 var MAX_SCROLL = 9999; // 越大越好 setTimeout(function () { if (window.scrollY < SCROLLY) { window.scrollTo(0, MAX_SCROLL); } }, TIMER_NAME) })
-
-
方案二
-
JS
var setScroll = function(obj){ var ua = navigator.userAgent; if(ua.match(/(iPhone|iPod|iPad|iPhone\s+Simulator)/i)){ setTimeout(function () { obj.scrollIntoViewIfNeeded(); //obj指元素本身 }, 500) } }; //只在当前元素在视窗的可见范围内不可见的情况下，才滚动浏览器窗口或容器元素，最终让当前元素可见。如果当前元素在视窗中可见，这个方法不做任何处理。如果将可选参数alignCenter设置为true，则表示尽量将元素显示在视窗中部（垂直方向）------Safari、Chrome实现了这个方法
-
* 扩展
scrollIntoView(alignWithTop);// 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持
scrollByLines(lineCount);// 将元素的内容滚动指定的行数的高度，lineCount的值可以为正值或是负值。---Safari、Chrome实现了这个方法
scrollByPages(pageCount);// 将元素的内容滚动指定的页面的高度，具体高度由元素的高度决定。---Safari、Chrome实现了这个方法
6. 禁止移动端页面的拷贝功能
-
CSS
*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; }-
IE6-9不支持user-select:none属性，但支持使用标签属性 onselectstart="return false";
-
在添加完上述代码后，在IOS 上会有问题的，input 框无法正常输入了内容了,添加如下样式
input { -webkit-user-select:auto; /*webkit浏览器*/ }7. css模拟'<' '>'符号
-
IE6-9不支持user-select:none属性，但支持使用标签属性 onselectstart="return false";
-
HTML && CSS
<span style='display: inline-block;width: 10px;height: 10px;border-top: 2px solid #ddd;border-left: 2px solid #ddd;transform: rotate(-45deg);'></span>8. css模拟三角
-
HTML && CSS
<div style="width: 0;height: 0;border: 10px solid transparent;top: 5px;border-left-color: #ddd"></div>9. 根据设备宽度，设置页面字体大小
-
JS
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 10 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);10. 各类元标签
-
设置编码信息
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8" /> -
设置语言
<meta http-equiv="Content-Language" Content="zh-CN" /> -
设置重定向
<meta http-equiv="Refresh" Content="15; Url=http://www.baidu.com" /> -
设置缓存时间
<meta http-equiv="Expires" Content="Web, 26 Jun 2015 18:21:57 GMT" /> -
不使用缓存
<meta http-equiv="Pragma" Content="No-cach" /> -
设置关键字
<meta name="Keywords" Content="key1,key2,..." /> -
设置描述信息
<meta name="Description" Content="description abc" /> -
设置对搜索引擎抓取
<meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow" /> -
设置可视区域
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> -
针对浏览器使用
-
国产浏览器内核选择
<meta name="renderer" content="webkit|ie-comp|ie-stand"> -
使用最新版的ie浏览器，或者chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> -
针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name="HandheldFriendly" content="true"> -
微软的老式浏览器
<meta name="MobileOptimized" content="320"> -
uc强制竖屏
<meta name="screen-orientation" content="portrait"> -
QQ强制竖屏
<meta name="x5-orientation" content="portrait"> -
UC强制全屏
<meta name="full-screen" content="yes"> -
QQ强制全屏
<meta name="x5-fullscreen" content="true"> -
UC应用模式
<meta name="browsermode" content="application"> -
QQ应用模式
<meta name="x5-page-mode" content="app"> -
windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no"> -
禁止转码
<meta http-equiv="Cache-Control" content="no-siteapp" /> -
禁止数字自动识别为电话号码
<meta name="format-detection" content="telephone=no" /> -
禁止识别邮箱
<meta name="format-detection" content="email=no" />11. 金额格式化: '12345678' --> '12,345,678'
var numStr = '12345678'; console.log(numStr.split('').reverse().join('').replace(/(\d{3})/g,'$1,').replace(/,$/,'').split('').reverse().join(''));
12. 移动端拖拽demo
-
-
HTML
<body> <img src='homepage.svg' onclick='window.location.href="http://example.com/"' id="link"> </body> -
CSS
html,body { height:100%; } #link { width:50px;height:50px;position: absolute;left: 0;top: 0; } -
JS
<script> window.onload = function(){ drag('link') }; function drag(obj){ var block = document.getElementById(obj); var oW,oH; // 绑定touchstart事件 block.addEventListener("touchstart", function(e) { var touches = e.touches[0]; oW = touches.clientX - block.offsetLeft; oH = touches.clientY - block.offsetTop; //阻止页面的滑动默认事件 document.addEventListener("touchmove",defaultEvent,false); },false) block.addEventListener("touchmove", function(e) { var touches = e.touches[0]; var oLeft = touches.clientX - oW; var oTop = touches.clientY - oH; if(oLeft < 0) { oLeft = 0; }else if(oLeft > document.documentElement.clientWidth - block.offsetWidth) { oLeft = (document.documentElement.clientWidth - block.offsetWidth); } block.style.left = oLeft + "px"; block.style.top = oTop + "px"; },false); block.addEventListener("touchend",function() { document.removeEventListener("touchmove",defaultEvent,false); },false); function defaultEvent(e) { e.preventDefault(); } }
13.判断是否为苹果手机
var ua = navigator.userAgent;
if(ua.match(/(iPhone|iPod|iPad|iPhone\s+Simulator)/i)){
alert("是iphone！")
}
14. img标签的 alt 属性和 onerror 事件
-
onerror 事件会在文档或图像加载过程中发生错误时被触发
<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" /> alt属性,如果无法显示图像，浏览器将显示替代文本