网站开发设计是前端吗 前端开发常用网站 前端后端都是网站开发吧
###实用代码
1.css3使用 需要兼容
css 代码
//移动端
-webkit-transform: translate(100%);
transform: translate(100%);
//PC端
-webkit-transform : rotate(0deg);
-moz-transform : rotate(0deg);
-ms-transform : rotate(0deg);
-o-transform : rotate(0deg);
transform : rotate(0deg);
2.背景图加背景色
css 代码
background:#000 url(‘a.png’) no-repeat 0 0;
3.控制Input输入长度
html 代码
<input type=”text” placeholder=”” maxlength=”11″>
4.块元素居中定位
css 代码
.center {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
5. 几个好用的zepto方法
javascript 代码
//实用方法
.data(‘index’) //获取data-index值
.hasClass() //判断class存在
.off(‘click’) //解除事件绑定
..toLowerCase() //忽略大小写
// 几个选择器
.parent() //上一级
.parents() //所有上级
.children() //子级
.find() //子级内查找
.next() //下一个
.prev() //上一个
6. 移动端布局最小高度是100%
javascript 代码
width:100%;
height:100%;
}
#wrap{
width:100%;
min-height:100%;
}
window.onload = function(){
var sHeight = document.body.clientHeight;
var screenH = $(window).height();
if ( sHeight < screenH ) {
$(“#wrap”).css( “height” , screenH + “px” );
}
}
7. 时间格式处理
javascript 代码
//new Date() 时间戳
//Date.parse()可解析时间为 毫秒
Date.parse( new Date()) / 1000
8.正则简单验证手机号
javascript 代码
var reg = /^1\d{10}$/
if (!reg.test(phone)) {
alert(‘请输入正确的手机号码！’)
return false
}
9. 实用清除浮动
css 代码
.clearfix {
*zoom: 1;
}
.clearfix:after {
clear: both;
}
.clearfix:before,
.clearfix:after {
content: ”;
display: table;
}
10. 移动端布局放置视口太大
css 代码
max-width: 700px;
margin: 0 auto;
}
11. 类似于‘击败了90%’的算法
javascript 代码
//按比例赋值
function rank(t) {
if (t >= 0 && t <= 100) {
return 99
} else if (t > 100 && t <= 300) {
return Math.round(((t – 100) / 200) * 2) + 96
} else if (t > 300 && t <= 500) {
return Math.round(((t – 300) / 200) * 5) + 91
}
}
12. 移动端布局，块内变化时注意使用scrollTop
javascript 代码
//回到顶部
$(‘body’).scrollTop(0);
13. 移动端布局，善于使用Loading
javascript 代码
//页面内容切换，发送ajax ，页面加载，
loading()
$(‘div’).hide()
setTimeout(function() {
loaded()
$(‘div’).show()
}, 800)
14. 移动端布局，神奇的:afer, :before,
css 代码
.box span {
display: inline-block;
width: 30px;
position: absolute;
top: -12px;
}
.box span:nth-child(1) {
left: -2px;
background: #ffcb00;
}
.box span:after {
color: #ffa837;
}
.box span:nth-child(1):after {
content: ‘分享’;
}
###常见IOS，Android ，微信兼容性问题
1.微信 不支持 location.reload()事件
解决办法 ：在分享链接后 跟不同参数即可
javascript 代码
location.href= location.protocol + “//” + location.host + location.pathname +’?1′;
- 移动端用框架zepto
‘click’事件在移动端会有200ms的延时，可用zepto中的方法tap代替click
‘click’事件容易发生点透：
解决办法1：使用tap事件替代
解决办法2：阻止浏览器默认事件
javascript 代码
$(‘input’).on(‘click’, function(e) {
var e = e || window.event
e.stopPropagation()
e.preventDefault()
return false
})
- zepto中，给动态添加元素绑定事件
使用 on,在最外层
javascript 代码
$(document).on(‘click’,’div’,function(){ });
4.模拟微信聊天滚动效果遇到问题，IOS中弹出虚拟键盘会影响fixed定位问题
（1）弹出虚拟键盘会把fixed定位的元素顶上去
（2）当弹出虚拟键盘时fixed定位失效，如果在持续滚动的情境下，继续动态append元素 会使fixed定位元素往上去。
解决办法：
IOS延迟加载事件，阻止安卓键盘回落
javascript 代码
if (navigator.userAgent.search(/(iphone|ipad|ipod)/i) >= 0) {
$(‘.ipt’).on(TAP, function(e) {
//点击输入框，阻止默认事件，然后再获取焦点
e.preventDefault()
$(window).scrollTop(document.body.clientHeight)
setTimeout(function() {
$(‘.ipt’).focus()
}, 200)
})
} else {
window.onresize = function() {
$(window).scrollTop(document.body.clientHeight)
}
//阻止Andriod虚拟键盘收回，给input框焦点
$(‘.ipt’).blur(function() {
setTimeout(function() {
$(‘.ipt’).focus()
}, 100)
})
}
//点击发送按钮时，IOS虚拟键盘回落 其它事件机制停止
//解决办法，延迟加载等到键盘落下
$(‘#btn’).on(‘click’, function() {
if (navigator.userAgent.search(/(iphone|ipad|ipod)/i) >= 0) {
setTimeout(function() {
$(‘.message:last’).show(500)
$(window).scrollTop(document.body.clientHeight)
}, 600)
}
})
5.需要终止的函数循环，注意添加 return false; 或者 break;
要善于使用 return；可减少bug出现。
web前端开发学习网站 前端开发网站开发 网站前端开发工资
近期评论