前端相关
ccsbn
这个作者很懒,什么都没留下…
展开
-
HTML/CSS:图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中)css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍: css图片水平居中1.利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下:<div style="text-align: center; ...转载 2018-06-05 11:48:46 · 428 阅读 · 0 评论 -
JS图片压缩 好用
废话不多说,直接上代码 返回的是一个base64的一个字符串/** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径 * @param {Object} obj * obj 对象 有 width, height, quality(0-1) * @param...原创 2018-08-21 17:30:25 · 1367 阅读 · 0 评论 -
jq验证 15位/18位身份证验证 [终极版]
function IdentityCodeValid(idCard) { //15位和18位身份证号码的正则表达式 var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|...原创 2018-08-21 20:33:20 · 754 阅读 · 0 评论 -
js jq 获取屏幕各种高度 宽度
Javascript:网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scro...转载 2018-08-30 08:25:54 · 391 阅读 · 0 评论 -
H5手机禁止触屏页面滑动。滚动
document.addEventListener("touchmove",function(e){ e.preventDefault(); e.stopPropagation();},false);原创 2018-08-30 08:38:20 · 4663 阅读 · 0 评论 -
H5禁止自带键盘弹出
<input type='text' name='text' id='input' />$("#input").focus(function(){ document.activeElement.blur();});原创 2018-08-30 08:40:05 · 1812 阅读 · 0 评论 -
H5禁止默认长按复制
全部都禁止复制*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none; /*火狐*/ -ms-user-select:none; /*IE10...原创 2018-08-30 08:41:27 · 8771 阅读 · 0 评论 -
jq 删除字符串最后一个字符
var a = 'abcdefg';a = a.substring(0, a.length-1);console.log(a); // 'abcdef'原创 2018-08-30 09:51:55 · 3017 阅读 · 0 评论 -
js 保留两位小数
var a = 3.33;var b = 6.66;var c = a * b; // c = 22.1778var d = Math.floor(c * 100)/100; // d = 22.17;var e = Math.round(c * 100)/100; // e = 22.18;var f = Math.floor(c); // f = 22;round 四舍...原创 2018-09-03 11:01:03 · 126 阅读 · 0 评论 -
jq 随机颜色
function getRandomColor(){ var color = ["#F75A61","#F1407B","#32B2EC","#35BB98","#FFB359","#F88D91","#1FABEB"]; return color[~~(Math.random()*7)];}这里的 ~~ 运算符 保证了 Math.random() 不会报错原创 2018-09-06 18:57:36 · 679 阅读 · 0 评论 -
判断微信浏览器/支付宝浏览器
function isAlipayOrWechat() { var userAgent = navigator.userAgent.toLowerCase(); if(userAgent.match(/Alipay/i) == "alipay") { alert("支付宝浏览器"); } else if(userAgent.match(/MicroMes...原创 2018-09-28 09:01:33 · 936 阅读 · 0 评论 -
数组转字符串,字符串转数组
join方法 和split方法var arr = [0,1,2,3];arr.join(); // "0,1,2,3";arr.toString(); // "0,1,2,3"arr.join(''); // "0123";arr.join('-'); // "0-1-2-3";// join()方法不加参数 和 toString()方法结果是一样的var str = '0...原创 2018-10-22 14:40:53 · 195 阅读 · 0 评论 -
JavaScript 判断数组 || 对象
var arr = [];var obj = {};// 1) constructorarr.constructor; // function Object() {}obj.constructor; // function Array() {}// 2) instanceofarr.instanceof Array; // trueobj.instanceof Array; // ...原创 2018-12-19 16:16:32 · 144 阅读 · 0 评论 -
安卓微信浏览器无法触发onchange事件
部分安卓微信浏览器无法触发onchange事件这其实安卓微信的一个遗留问题。解决办法也很简单:input标签 <input type=“file" name="image" accept="image/gif, image/jpeg, image/png”>要写成<input type="file" name="image" accept=“image/*”...原创 2018-12-27 16:01:50 · 2492 阅读 · 3 评论 -
border-radius opacity transform兼容写法
.border-radius{ -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; border-radius:50%;}.opacity{ filter:alpha(opacity=50); /...原创 2018-08-21 15:27:12 · 352 阅读 · 0 评论 -
jq input只能输入数字和两位小数
直接上代码:function num(obj){obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个...转载 2018-08-28 12:29:01 · 918 阅读 · 0 评论 -
flex 兼容写法
CSS样式flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水平居中 flex-pack-justify:子元素两端对齐 flex-justify-space-around:平均分布.flex { display: -webkit-bo...原创 2018-08-21 08:25:20 · 906 阅读 · 0 评论 -
获取微信返回事件
最新一个项目要开发微信公众号的内容,有一个需求是获取返回按钮点击事件在其点击时跳转到特定的页面,可是微信的返回按钮只是相当执行后退一步。然后看了一篇文章很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法,看到了写法tip:在低版本系统不兼容。比如ios8...$(function(){ pushHistory(); //这个必...转载 2018-06-05 11:51:12 · 2758 阅读 · 0 评论 -
js 返回上一页
Code:<a href="javascript:history.back();">返回上一页</a> (history.back()原页表表单中的内容会保留. ) Code:<a onclick="javascript:history.go(-1);">返回上一页</a> (history.go(-1)原页面表单中的内容会丢失)简单的返回上...原创 2018-06-05 17:59:49 · 124 阅读 · 0 评论 -
[html5]input框默认调用九宫格数字键盘
<input type="number" pattern="\d*"> 安卓默认可以调出九宫格但ios需要加上pattern="\d*" 参考网址: link1 link2原创 2018-05-29 17:33:13 · 6150 阅读 · 2 评论 -
去掉css去掉iPhone、iPad的默认按钮样式
去掉css去掉iPhone、iPad的默认按钮样式~input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}textarea { -webkit-appearance: none;}原创 2018-05-27 15:32:01 · 199 阅读 · 0 评论 -
HTML 在安卓手机端软键盘弹出顶起页面布局的解决办法
$('body').height($('body')[0].clientHeight);以上是背景即BODY被顶起的解决办法。如果是footer被顶起,则可以用判断解决,$('input').focus(function(){ $('.share').css('display','none'); }) $('input').blur(function(){ ...原创 2018-05-30 17:29:45 · 4361 阅读 · 0 评论 -
input 每4个数字加个空格
<script type="text/javascript">function xxx(){ var a = document.getElementById("memberID"); if(a.value.length>0){ if((a.value.length+1)%5==0 && a.value.length>0){ a...原创 2018-05-31 08:43:42 · 1653 阅读 · 0 评论 -
js禁止/开启页面滑动
//禁止/开启滑动 function handler() { event.preventDefault(); } document.removeEventListener('touchmove', handler, false); document.addEventListener('touchmove', handler, false); ...原创 2018-06-15 09:11:41 · 1595 阅读 · 0 评论 -
jq判断form表单中的值是否被改变
onload : var data = $(from).serialize(),submit: var dataNew = $(from).serialize() 然后比较..就是这么简单原创 2018-06-01 18:26:42 · 2320 阅读 · 1 评论 -
jq获取当前页面url信息
设置或获取对象指定的文件名或路径。window.location.pathname例:http://localhost:8086/topic/index?topicId=361alert(window.location.pathname); 则输出:/topic/index设置或获取整个 URL 为字符串。window.location.href例:http://localhost:8086/to...原创 2018-06-02 13:00:32 · 6830 阅读 · 0 评论 -
阻止移动设备双击放大(手机,pad)
header加一行就可以了<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />原创 2018-08-01 08:11:12 · 437 阅读 · 0 评论 -
当页面加载就执行jq
【1】$(function( ){ }); $(function(){ $("#name").click(function(){ //codding }); }); 【2】 $(document).ready(function( ){ }) $(document).ready(function(){ $("#name").click(functi...原创 2018-08-22 17:02:06 · 2490 阅读 · 0 评论 -
判断苹果手机系统版本 判断手机浏览器信息
<script type="text/javascript"> /* * 智能机浏览器版本信息: */ var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf(...原创 2018-08-30 18:42:40 · 1663 阅读 · 0 评论 -
css弹窗屏幕居中
position:fixed;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);-ms-transform::translateX(-50%) translateY(-50%);-moz-transform::translateX(-50%) translateY(-50%);-webkit-transform:...原创 2018-08-21 08:18:34 · 5113 阅读 · 0 评论 -
JavaScript trim 兼容
String.prototype.trim=function(){ return this.replace(/(^\s+)|(\s+$)/g,'');}低版本浏览器没trim方法。用正则兼容。 // ^ 表示以...开头// | 或者// $ 表示以...结尾// /s 表示空白字符// * 表示一个或多个// \^/s*\ 表示。以 空白字符开头的一...原创 2019-01-24 19:18:48 · 461 阅读 · 0 评论