web tips
#不积跬步无以至千里
###2015-06-01
- 1.解决英文超长“单词”换行问题，使用css的 word-wrap: break-word;属性；
###2015-06-02
- 1.img 标签的alt='' 解决图片加载失败显示效果不好的bug。
- 2.onerror 事件会在文档或图像加载过程中发生错误时被触发。
//onerror(reload(this,src))
function reload(dom, src) {
var count = dom.getAttribute('data-count');
if (count < 3) {
count++;
dom.setAttribute('src', src);
dom.setAttribute('data-count', count);
}
}
- 3.ios输入框失去焦点触发blur事件。
###2015-06-03
- 1.ios 下根据input是否获得焦点，和使用position:absolute解决键盘弹出时底部fixed的层位置不对bug。
//fix ios position fixed bug
fixfixed = function(fc) {
if (fc) {
$('#im-send-wrap').addClass('fix-fixed');
var height = $(document).height() - 44;
$('#im-send-wrap').css('top', height + 'px');
} else {
$('#im-send-wrap').removeClass('fix-fixed');
$('#im-send-wrap').css('top', '');
}
};
- 2.deeplink demo(https://github.com/ahai3840/deeplink)
###2015-06-04
- 1.在页面中可使用更改URL的hash值和锚点跳转的方式，实现跳动到制定位置。
###2015-06-05
- 1.解决图片加载占位可以给img标签设置背景或者给父层div设置背景。
- 2.使用input的type=tel调出电话号码输入键盘。
- 3.调用AppStore和Google Play 自带推荐
<meta name="apple-itunes-app" content="app-id=438474115">
<meta name="google-play-app" content="app-id=com.lightinthebox.android">
###2015-06-08
- 1.使用width=100%和max-width解决居中的宽度调整问题。
###2015-06-09
- 1.php的number_format() 函数通过千位分组来格式化数字。
- 2.php的in_array() 函数在数组中搜索给定的值。
###2015-06-10
- 1.修改Ubuntu的host文件: sudo vi /etc/hosts。
- 2.background-size的值可以为auto。
- 3.解决iOS上Safari使用系统返回按钮无法刷新页面问题。
<meta content="-1" http-equiv="Expires">
<meta content="no-cache" http-equiv="Cache-Control" >
<meta content="no-cache" http-equiv="Pragma">
###2015-06-11
- 1.解决Safari中层滑动不流畅问题-webkit-overflow-scrolling : touch;
- 2.自定义滚动条样式。
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar
{
width: 5px;
height: 5px;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb
{
border-radius: 5px;
height: 30px;
background-color:#666;
opacity: 0.7;
}
- 4.css3的steps()函数可以用于实现逐针动画。
###2015-06-15
- 1.php返回手机访问wap的平台
//get platform
function get_device_type(){
// get the agent description
$agent = strtolower($_SERVER['HTTP_USER_AGENT']);
$type = 'other';
// checking ios device
if(strpos($agent, 'iphone') || strpos($agent, 'ipad')){
$type = 'ios';
}
// checking android device
if(strpos($agent, 'android')){
$type = 'android';
}
return $type;
}
- 2.javascript判断访问平台
navigator.userAgent.indexOf("iPhone") || navigator.userAgent.indexOf("iPad") // ios
navigator.userAgent.indexOf("android") // android
- 3.javascript的toLocaleLowerCase()方法用于把字符串转换为小写。
stringObject.toLocaleLowerCase()
- 4.javascript常用正则表达式
digits: [/^\d+$/, "请输入数字"]
,letters: [/^[a-z]+$/i, "{0}只能输入字母"]
,tel: [/^(?:(?:0\d{2,3}[- ]?[1-9]\d{6,7})|(?:[48]00[- ]?[1-9]\d{6}))$/, "电话格式不正确"]
,mobile: [/^1[3-9]\d{9}$/, "手机号格式不正确"]
,email: [/^(?:[a-z0-9]+[_\-+.]?)*[a-z0-9]+@(?:([a-z0-9]+-?)*[a-z0-9]+\.)+([a-z]{2,})+$/i, "邮箱格式"]
,qq: [/^[1-9]\d{4,}$/, "QQ号格式不正确"]
,date: [/^\d{4}-\d{1,2}-\d{1,2}$/, "请输入正确的日期,例:yyyy-mm-dd"]
,time: [/^([01]\d|2[0-3])(:[0-5]\d){1,2}$/, "请输入正确的时间,例:14:30或14:30:00"]
,ID_card: [/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/, "身份证号码"]
,url: [/^(https?|ftp):\/\/[^\s]+$/i, "网址格式不正确"]
,postcode: [/^[1-9]\d{5}$/, "邮政编码格式不正确"]
,chinese: [/^[\u0391-\uFFE5]+$/, "请输入中文"]
,username: [/^\w{3,12}$/, "请输入3-12位数字、字母、下划线"]
,password: [/^[0-9a-zA-Z]{6,16}$/, "密码由6-16位数字、字母组成"]
###2015-06-16
- 1.wap端使用遮罩效果防止跳转链接被多次点击。
- 2.wap端的应用下载链接需要考虑winphone和功能机下的情况。
###2015-06-17
- 1.页面抓取demo (https://github.com/ahai3840/Spider)。
- 2.php的file_get_contents() 函数把整个文件读入一个字符串中。
- 3.php的html解析类:simple_html_dom.php
###2015-06-18
- 1.php抓取页面时设置userAgent,使用curl方式。
- 2.从抓取页面获取的json由于编码问题无法使用php的json_decode(),可以使用自定义的json解析函数。
//自定义函数，将json字符串解析为arry
function json_decode2($json)
{
$comment = false;
$out = '$x=';
for($i=0; $i<strlen($json); $i++)
{
if (!$comment)
{
if (($json[$i] == '{') || ($json[$i] == '[')) $out .= ' array(';
else if (($json[$i] == '}') || ($json[$i] == ']')) $out .= ')';
else if ($json[$i] == ':') $out .= '=>';
else $out .= $json[$i];
}
else $out .= $json[$i];
if ($json[$i] == '"' && $json[($i-1)]!="\\") $comment = !$comment;
}
eval($out);
return $x;
}
- 3.自定义php的debug()
// debug the output to the screen
function debug($data, $die = true)
{
// ensure debugs NEVER happen on PROD
// create a pre tag
echo '<pre class="debug">' . chr(10);
// sanity check if the data is an array
if (is_array($data)) {
// print the data to screen
print_r($data);
} else {
// Dumps information about a variable
var_dump($data);
}
// close pre tag
echo '</pre>' . chr(10);
// sanity check to stop PHP processing
if ($die) {
// stop PHP processing
die();
}
}
###2015-06-25
- 1.js操作cookie使用jquery.cookie.js(https://github.com/carhartl/jquery-cookie)
- 2.将字符串转为json
eval("(" + jsonString + ")")
- 3.css文件中的:/img/xxx.png图片解析到的是css文件的域名。
###2015-07-06
- 1.jquery的$.getJson()无法解决跨域问题。
- 2.可设置 header( 'Access-Control-Allow-Origin:*' ); 来解决移动端跨域问题。
- 3.访问相同域名不同协议的接口要跨域，例如http和https。
###2015-07-08
- 1.在图片地址中添加$命名来防止图片被爬虫抓取。
- 2.使用php的file_get_contents()可抓取地址含$的图片。
- 3.-webkit-scrollbar 无法影藏Safari下的滚动条。
###2015-07-09
- 1. \n 在android和ios应用中表示换行。
- 2.自定义find函数。
//find element by class
function findByClass(dom,str){
return dom.getElementsByClassName(str);
}
//find element by id
function findByID(dom,id){
return dom.getElementById(id);
}
//find element by tag
function findByTag(dom,tag){
return dom.getElementsByTagName(tag);
}
- 3.getElementById()返回单一元素，getElementsByClassName()和getElementsByTagName()返回数组。
###2015-07-14
- 1.getElementsByName()方法可返回带有指定名称的对象的集合。
- 2.JSON.stringify()将json转为字符串。
- 3.split()按指定字符将字符串分割为数组。
###2015-07-16
- 1.Jquery跳到页面制定元素。
$('html, body').animate({ scrollTop: $('#skus').offset().top }, 600);
- 2.JavaScript无法使用length属性获得对象的长度。
- 3.使用typeof()判断对象是否有相应属性。
- 4.!!object.attr可判断对象是否有该属性。
###2015-07-17
- 1.jQuery v1.11.0的data()方法设置属性失效，建议使用attr()方法。
- 2. 使用jquery创建div节点
$('<div></div>');
###2015-07-20
- 1.JavaScript中数组和对象需先声明再使用，避免语法报错。
var arr = [];
var obj = {};
- 2.JavaScript将URL中的参数存到一个对象中。
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
- 3.在wap页的浮层中使用滑动层，由于和页面的滑动共用判断手势，滑动体验不佳。
###2015-07-22
- 1.在wap页的浮层中使用滑动层,通过给body设置position:fixed解决滑动体验不佳问题。
- 2.使用服务的语言(php等)给JavaScript传值时注意转义,以免特殊符号引起JavaScript报错。
- 3. 使用background-clip:padding-box;解决部分Android浏览器的border-radius的bug。
- 4.设置元素为box-sizing: border-box;能更好的响应百分比布局。
- 5.jQuery的$.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。
- 6.jQuery的$.isArray() 判断某个参数是否为数组。
###2015-07-24
- 1.jquery的on()方法可以给js新生成的DOM绑定事件。
- 2.jquery的1.8版之后不支持live()方法。
- 3.在node下使用mysql连接时,域名为localhost或报错,可以使用ip(127.0.0.1)代替。
###2015-08-05
- 1.github 获取主库更新内容
git remote -v
git remote add upstream https://github.com/otheruser/repo.git
git fetch upstream
git checkout master
git merge upstream/master
###2015-08-07
- 1.npm更新。
npm install npm -g
###2015-08-11
- 1.$().jquery获取jquery版本号。
###2015-08-18
- 1.网站快速置为黑白色css代码
html {
filter: url("data:image/svg+xml;utf8,#grayscale");
font-size: 100%;
}
###2015-08-28
- 1.sudo fuser -k 80/tcp Ubuntu下查看占用80端口的进程。
- 2.kill -9 2286 2288 2289 2290 2291 2292 3466 杀死对应编号的进程。
###2015-09-08
- 1.在ios上使用第三方浏览器可以访问测试环境的https站点。
- 2.ios的Safari会屏蔽不安全的https连接。
###2015-09-14
- 1.虚拟机拷贝之后记得重新生成mac地址，不然ip不会变，会造成冲突。
- 2.ie8不支持background-size。
- 3.连接nginx失败,注意查看access.log和error.log。
###2015-09-23
- 1.ios下使用css的绝对定位时,需要考虑元素的层级关系。
- 2.Jquery可以使用offset()获取元素在页面中的位置。
###2015-09-25
- 1.ubuntu 下修改hosts文件 sudo vim /etc/hosts。
- 2.连接memcached: telnet 127.0.0.1 11211。
- 3.清除memcached缓存flush_all。
- 4.重启memcached: sudo service memcached restart.
###2015-11-11
- 1.监听不是a标签的元素的click事件可能在iphone西出现闪屏现象。
- 2.使用text-align和line-height实现的居中在不同的设备上有差异，导致不是绝对居中的现象。
- 3.如果阻止touchend的默认行为，会导致部分设备上a标签不可跳转。
- 4.transition的兼容性不是很好，在部分三星的设备上会有卡顿现象。
- 5.实现元素的垂直居中可以使用display:table-cell;
###2015-12-16
- 1.js的{}对象无length属性。
- 2.使用css3的动画效果可以有效利用硬件的GPU,动画效果比直接操作left、top流畅。
- 3.服务器间通信使用ssh。
- 4.positon:abslute;定位的默认宽度是包含内容宽度。
- 5.根节点指的是html节点。
