web前端开发小助手
2017-06-27 08:49
176 查看
1、css：
以下是横向滚动和隐藏横向滚动条，移动端浏览器基本都是webkit内核，所以兼容性不用考虑<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js" ></script>
</head>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.box{width: 16.0rem;height: 16.0rem;overflow: scroll;font-size: 0.0rem; background-color: yellow;}
.child{list-style: none;white-space: nowrap;}
.child li{width: 5.0rem;height: 16.0rem;border: 0.05rem solid blue;box-sizing: border-box; display: inline-block;}
.box::-webkit-scrollbar{width:0;height:0}
</style>
<body>
<div class="box">
<ul class="child">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
(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 = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})
(document, window);
</script>
</html>
(2)单行超出隐藏（多行在下面有教程）
text-overflow: ellipsis;white-space: nowrap;overflow: hidden;（3）css3的垂直居中
transform: translate(0, -50%);（4）去除滚动条（最好用于移动端，因为移动端的兼容性最好）
.child1_box::-webkit-scrollbar{width: 0;height: 0;} （5）模糊图片
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
（6）解决谷歌不能设置小于12px字体问题
（23）* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性
-webkit-text-size-adjust: none; 解决
（7）兼容安卓和苹果系统的垂直居中，但是不支持低版本ie
display: table-cell;
vertical-align: middle;
2、js：
（1）裁剪字符串 str.slice(0,8)（2）把字符串转为数字parseInt()Number()（3）检查浏览器是否支持某属性function hasPlaceholderSupport() { return 'placeholder' in document.createElement('input'); }（4）只容许输入整数 <script type="text/javascript">
var inputParameter = $(".child_input");
var value;
function clickAddChange(){
value = inputParameter.val();
value++;
valueFilter(value);
}
function clickReduceChange(){
value = inputParameter.val();
value--;
valueFilter(value);
}
function valueInput(){
valueFilter(inputParameter.val());
}
function valueFilter(value){
value = parseInt(value);
if(value>0){
inputParameter.val(value);
}else{
inputParameter.val(1);
}
}
</script>
（5）通过计算的方式实现超出显示省略号（用于多行），单行则使用text-overflow: ellipsis;white-space: nowrap;overflow: hidden;$(".main-box-menu-content>div:nth-child(6)>div:nth-child(2)>ul>li>div:nth-child(2)>div>span:nth-child(3)").each(function() {
var maxwidth = 43;//最多显示字符数
if($(this).text().length >= maxwidth) {
var b = $(this).children().is("a");
if(b) {
$(this).children().text($(this).children().text().substring(0, maxwidth) + "...");
} else {
$(this).text($(this).text().substring(0, maxwidth));
$(this).text($(this).text() + "...");
}
}
}); （6）倒计时
点击打开链接
（7）点击往左移动（包括动画）
点击打开链接
（6）监听滚动值
window.onscroll=function(){
var top = document.documentElement.scrollTop||document.body.scrollTop;
}滚动例子：
this.header = document.getElementById('header')
window.onscroll=()=>{
var top = document.documentElement.scrollTop||document.body.scrollTop
if(top===0){
this.header.style.opacity = 0
}else if(20>top&&top>0){
this.header.style.opacity = 0
}else if(30>top&&top>20){
this.header.style.opacity = 0.1
}else if(40>top&&top>30){
this.header.style.opacity = 0.2
}else if(50>top&&top>40){
this.header.style.opacity = 0.3
}else if(60>top&&top>50){
this.header.style.opacity = 0.4
}else if(70>top&&top>60){
this.header.style.opacity = 0.5
}else if(80>top&&top>70){
this.header.style.opacity = 0.6
}else if(90>top&&top>80){
this.header.style.opacity = 0.7
}else if(100>top&&top>90){
this.header.style.opacity = 0.8
}else if(110>top&&top>100){
this.header.style.opacity = 0.9
}else if(120>top&&top>110){
this.header.style.opacity = 1
}else if(top>120){
this.header.style.opacity = 1
}
} （8）获取父元素字体大小
document.documentElement.style.fontSize（9）四舍五入
Math.round(10)jq点击产生滚动动画
$('#child1_box').animate({scrollTop:'0px'}, 500); （11）获得屏幕宽
document.body.clientWidth(12)上拉到指定位置，卡住显示核心逻辑
var top = document.documentElement.scrollTop||document.body.scrollTop
if(top>this.scroll_shop&&this.scroll_top_switch){
this.scroll_top_switch = false
this.cover_box.style.position = 'fixed'
this.cover_box.style.top = '2.5rem'
this.cover_box.style.left = '0rem'
} else if(top<this.scroll_shop&&!this.scroll_top_switch){
this.scroll_top_switch = true
this.cover_box.style.position = 'relative'
this.cover_box.style.top = '0rem'
this.cover_box.style.left = '0rem'
}（13）刷新页面
window.location.reload()（14）正则，匹配则返回true用户名正则，6至16个字符，包括数字，26个字母或者下划线和中文组成
^([\u4e00-\u9fa5]|[\w+]){6,16}$更多正则请见：点击打开链接（15）隐藏某段手机号
filterNumber:function(number){
return number.slice(0,3)+'****'+number.slice(7,11)
}（16）sessionStorage与localStoragesessionStorageif(typeof(Storage) !== "undefined") {
var json_data = JSON.stringify({title:'content'})
sessionStorage.clickcount = json_data;
console.log(sessionStorage.clickcount);
} else {
console.log("抱歉！您的浏览器不支持 Web Storage ...");
}localStorage1、把数据存于本地 window.localStorage.setItem(key, content) 2、得到本地数据 window.localStorage.getItem(key) 3、删除本地数据 window.localStorage.removeItem(key)
（17）正则1，支持中文、字母、数字、“-”“_”的组合，如果不符合则返回true（适用于用户名验证）/[^\w\u4e00-\u9fa5]/g.test(value)2 非数字则返回true（适用于密码）/[^\d]/g.test(value)3,密码验证（超强密码）必须含有大小写字母,数字及特殊符号,长度8~24，错误返回true!(/^(?!\s)((?=.*[a-zA-Z])(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).\S{8,24})$/g.test(value))（中等密码）以字母开头，长度在6~18之间，只能包含字符、数字和下划线,错误返回true!(/^[a-zA-Z]\w{5,17}/g.test(value))显示密码强度实现函数，小于6位数返回0，低返回1，中等返回2，高返回3，超强返回4function checkStrong(val) {
var modes = 0;
if (val.length < 6) return 0;
if (/\d/.test(val)) modes++; //数字
if (/[a-z]/.test(val)) modes++; //小写
if (/[A-Z]/.test(val)) modes++; //大写
if (/\W/.test(val)) modes++; //特殊字符
if (val.length > 12) return 4;
return modes;
};
4，验证手机号码，错误返回true!(/^1[34578]\d{9}$/.test(value))5，身份证验证，错误时返回true!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value))6,邮箱验证，错误返回true!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/g.test(value))更多正则请见点击打开链接
（18）获取当前日期如：2017-07-25 22:49:49
<script>
//getFullYear()得到年
//getMonth()得到月份
//getDate()得到日
//getHours()得到时
//getMinutes()分
//getSeconds()秒
//getMilliseconds()毫秒
function getCurrenTime(){
var time = new Date();
return time.getFullYear() + "-" + timeFill((time.getMonth() + 1)) + "-"
+ timeFill(time.getDate()) + " " + timeFill(time.getHours()) + ":"
+ timeFill(time.getMinutes()) + ":" + timeFill(time.getSeconds());
}
function timeFill(value){
var str = '';
if(value<10){
str = str+'0';
}
return str+value;
}
//调用此方法即可
console.log(getCurrenTime())
</script>（19）获取当前时间戳
Date.parse(new Date())
(20)冒泡
<script>
var arr = [10,9,5,0,7,6,2,3,1,4,8],value=0;
for(var a = 0;a<arr.length;a++){
for(var b = 1;b<arr.length-a;b++){
if(arr[a]>arr[a+b]){
value = arr[a];
arr[a] = arr[a+b];
arr[a+b] = value;
}
}
}
console.log(arr);
</script>(21)返回小于或者等于自身的整数
Math.floor(4.2)
(22)数组去重
<script>
function unique(arr){
var res = [];
var json = {};
for(var i = 0; i < arr.length; i++){
if(!json[arr[i]]){
res.push(arr[i]);
json[arr[i]] = 1;
}
}
return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(unique(arr));
</script>(23)promise的基础用法new Promise(function(resolve, reject) {
if(true) {
resolve('success');
} else {
reject('error');
}
}).then(function(success) {
console.log(success);
}, function(error) {
console.log(error);
});promise在vue项目的用法data(){
return{
dialogImageUrl: '',
dialogVisible: false,
name_resolve:null,
details_resolve:null
}
},
created:function(){
Promise.all([new Promise((resolve, reject)=>{
//加载好之后调用一下这个这方即可
this.name_resolve = resolve
}),
new Promise((resolve, reject)=>{
this.details_resolve = resolve
})]).then(function(res){
console.log('ok')
})
}（24）监听浏览器窗口大小变化
document.getElementById('login').style.height = window.innerHeight+'px'
document.body.style.backgroundColor = '#efeff4'
window.onresize = function(){
document.getElementById('login').style.height = window.innerHeight+'px'
}（25）禁止input的键盘事件
$(".test > input").focus(function(){
document.activeElement.blur();
});（26）获取url里的参数值（传入键值即可）
get_query_string:function(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)
return unescape(r[2]); return null;
}（27）兼容安卓与苹果的date(日期时间写法)//在安卓上这个写可以获取到的 var date = '2017-06-12'; var time = new Date(date).getTime()/1000; //但在苹果手机上是不支持的，必须这样写： var time = new Date(date.replace(/-/g,'/')).getTime()/1000;(28)调起拨打电话功能
<a href="tel:0757-29391028">拨打号码</a>
(28)vue切换页面返回到头部
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
});（29）只允许输入整数
this.$refs.phone.oninput = function(){
if(/[^\d]/g.test(this.value)){
this.value = this.value.substring(0,this.value.length - 1)
}
}(30)去除url中的所有参数，适用于vue.js开发的项目<script>
var str = 'http://localhost:8001/?code=011VQsYJ146dc60TBzZJ1ISeYJ1VQsYQ&state=59c9c8c5a182720986868161506396357#/my'
function del_par(str){
var start = null,end = null
if(str.indexOf('?') !== -1){
start = str.split('?')[0]+'#'
end = str.split('?')[1]
end = end.split('#')[1]
return start+end
}else{
return str
}
}
//输出删除所有参数的url
console.log(del_par(str))
</script>（31）解决vue使用改变数组值不刷新视图问题// 第一个参数为数组，第二个为索引（即元素），第三个元素的值
this.$set(this.evaluate_order, i, {grade_text:c})（渐变）css3
background: linear-gradient(left,#E9753B, #E45229); -webkit-background: linear-gradient(left,#E9753B, #E45229); -o-background: linear-gradient(left,#E9753B, #E45229); -moz-background: linear-gradient(left,#E9753B, #E45229);
3、杂项
（1）select标签（即下拉）的用法，vue默认是样式的，需要样式需要加上select{-webkit-appearance: menulist !important;-moz-appearance: menulist !important;}
<template>
<div>
<select ref="sele" @change="gradeChange()" class="sele">
<option value="a">a</option>
<option value="b">b</option>
</select>
</div>
</template>
<style scoped>
</style>
<script>
export default {
data() {
return {
};
},
methods: {
gradeChange:function(){
var sele = this.$refs.sele
var value = sele.options[sele.selectedIndex].value
alert('你选择了'+value)
}
}
}
</script>（2）table标签<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.one>th{color: #333333 !important;}
th{min-width: 50px; text-align: left; color: #999999;}
</style>
</head>
<body>
<!--cellpadding规定单元内的空白，类似于padding-->
<!--cellspacing规定每个单元与每个单元的距离-->
<!--注意当设置了rules="all"之后，以上两个属性均失效-->
<table border="1" cellpadding='10px' cellspacing='10px' rules="all">
<tr class="one">
<th>姓名</th>
<th>性别</th>
<th>祖籍</th>
<th>现住址</th>
</tr>
<tr>
<th>陈小小</th>
<th>女</th>
<th>广东惠州</th>
<th>广州市白云区</th>
</tr>
<tr>
<th>陈天翔</th>
<th>男</th>
<th>广东惠州</th>
<th>广州市白云区</th>
</tr>
</table>
</body>
</html>（3）复选框<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background: yellow;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="box">
<!--复选框-->
<form method="get" id="test">
<input type="checkbox" name="key" value="value" class="sele"/>value<br />
<input type="checkbox" name="key1" value="value2" class="sele"/>value2<br />
<input type="checkbox" name="key2" value="vlaue3" class="sele"/>vlaue3<br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
<script>
document.getElementById('test').onsubmit = function(){
var arr=document.getElementsByClassName("sele");
for(i=0;i<arr.length;i++){
if(arr[i].checked){
console.log(arr[i].name+"="+arr[i].value);
}
}
//加上这个防止刷新
return false
}
</script>
</html>（4）单选框<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background: yellow;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="box">
<!--单选框，必须保持name的一致性-->
<form method="get" id="test">
您最喜欢水果？<br /><br />
<label><input name="Fruit" type="radio" value="a" />苹果 </label>
<label><input name="Fruit" type="radio" value="b" />桃子 </label>
<label><input name="Fruit" type="radio" value="c" />香蕉 </label>
<label><input name="Fruit" type="radio" value="d" />梨 </label>
<label><input name="Fruit" type="radio" value="e" />其它 </label>
<input type="submit" />
</form>
</div>
</body>
<script>
document.getElementById('test').onsubmit = function(){
var arr=document.getElementsByName("Fruit");
for(i=0;i<arr.length;i++){
if(arr[i].checked){
console.log(arr[i].value);
}
}
//加上这个防止刷新
return false
}
</script>
</html>4、其他技术
（1）vue-resource请求方式点击打开链接
(2)jq和原生的请求方式
点击打开链接
（3）设置<meta>
点击打开链接
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WEB前端开发必不可少的3大firefox插件
- Web前端开发工程师必备技术列表
- 转WEB前端开发经验总结(5)
- WEB前端交互快速开发指南
- 改变世界的Web前端开发
- 建立国内Web前端开发的生态系统
- 网站开发WEB前端高性能优化之JavaScript优化细节
- 转WEB前端开发经验总结(3)
- 转WEB前端开发经验总结(2)
- 网站开发WEB前端高性能优化之JavaScript优化细节
- Aptana:好用的Web前端开发IDE
- Web前端开发一些有趣的新书
- Web前端开发一些有趣的新书
- 转WEB前端开发经验总结(4)
- WEB前端开发经验总结--WEB标准篇
- Aptana:好用的Web前端开发IDE
- 建立国内Web前端开发的生态系统
- WEB前端开发经验总结--WEB标准篇
- 改变世界的Web前端开发
- 网站开发WEB前端高性能优化之JavaScript优化细节