web前端开发小助手
2024-06-26 22:22:49
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.οnscrοll=function(){
var top = document.documentElement.scrollTop||document.body.scrollTop;
}滚动例子：
this.header = document.getElementById('header') window.οnscrοll=()=>{ var top = document.documentElement.scrollTop||document.body.scrollTopif(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 = falsethis.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 = truethis.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与localStorage
sessionStorage
if(typeof(Storage) !== "undefined") {var json_data = JSON.stringify({title:'content'})sessionStorage.clickcount = json_data;console.log(sessionStorage.clickcount);} else {console.log("抱歉！您的浏览器不支持 Web Storage ...");}localStorage
1、把数据存于本地
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，超强返回4
function 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 = nullif(str.indexOf('?') !== -1){start = str.split('?')[0]+'#' end = str.split('?')[1]end = end.split('#')[1] return start+end}else{return str} }//输出删除所有参数的urlconsole.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;}
-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.selevar value = sele.options[sele.selectedIndex].valuealert('你选择了'+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前端开发小助手相关推荐
- web前端开发小工具集合
收集的一些轻量级非常实用的前端开发小工具,以后还会不定期进行更新,现将目前收集的信息列表如下: CSS 3相关 1.CSS3样式生成器:http://www.css88.com/tool/css3 ...
- 表单html遇到的问题及处理,Web前端开发中常见问题及解决方案
Web前端开发中常见问题及解决方案 时间:2017-04-24 来源:web前端开发小赢家 作为一名web前端开发工程师,我们在工作时免不了会遇到各种各样的问题.因为web前端开发相对于Jav ...
- 小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
- web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
- 贾小伟—Web前端开发工程师（作品集）
贾小伟-Web前端开发工程师(作品集) <企业后台管理系统>
- 一只小菜鸟的web前端开发自学之路
今天初步了解了一下Web前端开发,计算机技术这东西就要多用多练,一只菜的不能再菜的小菜鸟开始漫长的自学之路了 web系统前端是指系统中用户接触到的部分. 打开几个不同网站的网页,观察一下,有网页文件的 ...
- Web前端开发敲门砖 ——《Web前端工程师修炼之道》
随着多设备.浏览器和Web标准的演变革命,前端正在成为兼顾逻辑.性能.交互.体验的综合性岗位. 前端开发入门又相对容易,必须掌握的HTML+CSS+JS非常容易学习,如果你能再了解一定后端知识,对业务 ...
- 读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道 这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
- web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践 为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
最新文章
- 项目经验分享——Java常用工具类集合 转
- bzoj2326 [HNOI2011]数学作业
- Oracle 原理 ： 动态性能视图和数据字典
- CentOS7静默安装oracle11g
- Stimulsoft reports .net中创建变量
- 同事用void把我给秀翻了！
- visual studio Code配置C++环境:
- 算法面试题(python)——如何找出数组中出现一次的数
- 怎样压缩图片？有这3种图片压缩的方法就够了
- three.js物体移动以及相机的移动（位置以及旋转方位）
- 鼠标滑轮只能控制声音？
- Flink Window Function
- 国产安卓和原生android,定制安卓和原生Android到底有哪些不同？真相了！
- Java实现图片渲染((拖动)马赛克、黑白照、油画风格等）
- 如何在world文档框框里打钩
- Java探针技术详解
- Epson机器人原点与左右手矫正说明
- 史上最全Apidoc文档生成详解
- 大数据Kylin（六）：Kylin构建Cube算法
- 11-【数据库】定义表结构的时间字段的两种方式