移动端总结的一些公共方法
Posted 前端渣的博客园
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端总结的一些公共方法相关的知识，希望对你有一定的参考价值。
1 //--下面是全局变量及方法-- 2 var path=getRootPath(); 3 var pattens = { 4 mobile:"^(1[34578])[0-9]{9}$", //手机号 5 email : "^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$", //邮箱 6 idCard:"(^\\d{15}$)|(^\\d{17}([0-9]|X)$)", //身份证 7 tel:"^(1[34578][0-9]{9,9}|([48]00(?:[0-9]{7,7}|-[0-9]{7,7}|-[0-9]{3,3}-[0-9]{4,4}|-[0-9]{4,4}-[0-9]{3,3}|[0-9]-[0-9]{3,3}-[0-9]{3,3}|[0-9]-[0-9]{2,2}-[0-9]{4,4}))|([0-9]{3,4}(\-|\\s))?[0-9]{7,8}((\-|\\s)[0-9]{3,4})?)$", //电话（固定电话+手机） 8 fixPhone:"^(([48]00(?:[0-9]{7,7}|-[0-9]{7,7}|-[0-9]{3,3}-[0-9]{4,4}|-[0-9]{4,4}-[0-9]{3,3}|[0-9]-[0-9]{3,3}-[0-9]{3,3}|[0-9]-[0-9]{2,2}-[0-9]{4,4}))|([0-9]{3,4}(\-|\\s))?[0-9]{7,8}((\-|\\s)[0-9]{3,4})?)$" //固定电话 9 } 10 11 function getRootPath(){ 12 var pathName=window.document.location.pathname; 13 path=pathName.substring(0,pathName.substr(1).indexOf(‘/‘)+1); 14 return path; 15 } 16 17 //验证电话（手机+电话） 18 function test_tel(a){ 19 if(!new RegExp(pattens.tel).test(a.val())){ 20 $.toast("电话号码不符合规范，请确认！",700); 21 return false; 22 } 23 return true; 24 } 25 26 //验证固定电话 27 function test_fixPhone(a){ 28 if(!new RegExp(pattens.fixPhone).test(a.val())){ 29 $.toast("电话号码不符合规范，请确认！",700); 30 return false; 31 } 32 return true; 33 } 34 35 //验证手机 36 function test_phone(a){ 37 if(!new RegExp(pattens.mobile).test(a.val())){ 38 $.toast("手机号码不符合规范，请确认！",700); 39 return false; 40 } 41 return true; 42 } 43 44 //验证邮箱 45 function test_email(a){ 46 if(!new RegExp(pattens.email).test(a.val())){ 47 $.toast("邮箱不符合规范，请确认！",700); 48 return false; 49 } 50 return true; 51 } 52 53 //验证身份证 54 function test_idCard(a){ 55 if(!new RegExp(pattens.idCard).test(a.val())){ 56 $.toast("身份证号码格式不正确!",1000); 57 return false; 58 } 59 return true; 60 } 61 62 //三级联动 63 function cityPicker(){ 64 $("#city-picker").cityPicker({ 65 toolbarTemplate: ‘<header class="bar bar-nav"> 66 <button class="button button-link pull-right close-picker">确定</button> 67 <h1 class="title">选择收货地址</h1> 68 </header>‘ 69 }); 70 } 71 72 //base64原尺寸图片上传 73 function imageBase64(m_this,id){ 74 if (typeof m_this.files == ‘undefined‘ || typeof FileReader == ‘undefined‘) { 75 $.toast(‘当前浏览器不支持图片上传!‘,700); 76 return false; 77 } 78 79 if(!/image\/\w+/.test(m_this.files[0].type)){ 80 $.toast("请上传图片！",700); 81 return false; 82 } 83 84 var reader = new FileReader(); 85 reader.onload = function(e) { 86 //this.result 返回结果 87 $(id).attr(‘src‘,this.result); 88 }; 89 reader.readAsDataURL(m_this.files[0]); 90 } 91 92 /* 93 * checkImageWidth() //检查图片宽度并压缩上传 94 * @param arguments[0] //图片对象this 95 * @param arguments[1] //显示图片id 96 * @param arguments[2] //压缩后图片宽度，‘‘为原尺寸压缩 97 * @param arguments[3] //压缩图片质量，默认为0.8 98 * @param arguments[4] //限制上传图片宽度 99 * */ 100 function checkImageWidth() { 101 var that = arguments[0]; 102 var id = arguments[1]; 103 var wxid = arguments[2]; 104 var quality = arguments[3]; 105 var file = arguments[0].files[0]; 106 var URL = window.URL || window.webkitURL; 107 var blob = URL.createObjectURL(file); 108 var img = new Image(); 109 img.src = blob; 110 111 if(!/image\/\w+/.test(that.files[0].type)){ 112 $.toast("请上传图片！",1000); 113 return false; 114 } 115 116 if(!!arguments[4]){ 117 var wid = arguments[4]; 118 }else{ 119 $.toast(‘请给定要限制的图片宽度‘,1000); 120 return false; 121 } 122 img.onload = function() { 123 if(img.width < wid){ 124 $.toast(‘图片宽度不得小于‘+ wid +‘px‘,1000); 125 return false; 126 } 127 cutImageBase64(that,id,wxid,quality); 128 }; 129 return true; 130 } 131 132 /* 133 * base64支持压缩尺寸上传 134 * author:zhb 135 * time:2016-05-03 136 * @param m_this //当前对象 137 * @param id //展示图片id 138 * @param wid //压缩后宽度 139 * @param quality //压缩质量 140 * */ 141 function cutImageBase64(m_this,id,wid,quality) { 142 var file = m_this.files[0]; 143 var URL = window.URL || window.webkitURL; 144 var blob = URL.createObjectURL(file); 145 var base64; 146 147 var img = new Image(); 148 img.src = blob; 149 150 img.onload = function() { 151 var that = this; 152 153 //生成比例 154 var w,scale,h = that.height; 155 if(wid == ‘‘){ 156 w = that.width; 157 }else{ 158 w = wid; 159 } 160 scale = w / h; 161 h = w / scale; 162 163 //生成canvas 164 var canvas = document.createElement(‘canvas‘); 165 var ctx = canvas.getContext(‘2d‘); 166 $(canvas).attr({ 167 width: w, 168 height: h 169 }); 170 ctx.drawImage(that, 0, 0, w, h); 171 172 // 生成base64 173 base64 = canvas.toDataURL(‘image/jpeg‘, quality || 0.8); 174 175 $(id).attr(‘src‘,base64); 176 }; 177 } 178 179 /* 180 * 模拟checkBox多选 181 * @param that //当前选择对象 182 * @param num //最多可选个数 183 * 184 * 例子： 185 * <dl id="checkBox" class="checkBoxDiv"> 186 * <dd>种子期<input type="checkbox" name="time" value="" class="hidden"></dd> 187 * <dd>天使期<input type="checkbox" name="time" value="" class="hidden"></dd> 188 * <dd>成长期<input type="checkbox" name="time" value="" class="hidden"></dd> 189 * <dd>成熟期<input type="checkbox" name="time" value="" class="hidden"></dd> 190 * </dl> 191 * 192 * 调用： 193 * $(page).on(‘click‘,‘#checkBox dd‘,function(){ 194 * var that = $(this); 195 * checkBoxSelected(that,3); 196 * }) 197 * 198 * */ 199 function checkBoxSelected(that,num){ 200 if(!that.hasClass(‘active‘)){ 201 if(that.parent().find(‘.active‘).size() < num){ 202 that.addClass(‘active‘).find(‘input‘).attr(‘checked‘,true); 203 }else{ 204 $.toast(‘最多选择三个！‘,1000); 205 } 206 }else{ 207 that.removeClass(‘active‘).find(‘input‘).attr(‘checked‘,false); 208 } 209 } 210 211 /* 212 * isInteger() //判断是否为整数,是整数返回true,否则返回false 213 * */ 214 function isInteger(obj) { 215 return obj%1 === 0 216 } 217 218 /*当前时间与改变后的时间作比较 219 * $(id).returnTime({ 220 * onTime : onTime, 221 * changeTime : changeTime, 222 * success:function (data) { 223 * $(‘#days‘).html(data.cutDay); 224 * } 225 * }); 226 * 227 * */ 228 $.fn.returnTime = function (obj) { 229 var _minutes = 1000 * 60; 230 var _hours = _minutes * 60; 231 var _days = _hours * 24; 232 var _years = _days * 365; 233 234 var startTime = new Date(obj.onTime.replace(/-/g,"/")); 235 startTime = Date.parse(startTime); //取得距离 1970/01/01的毫秒数 236 237 var endTime = new Date(obj.changeTime.replace(/-/g,"/")); 238 endTime = Date.parse(endTime); 239 240 var cutTime = endTime - startTime; 241 var cutDays = cutTime/_days; 242 243 var startDay = startTime /_days; 244 var endDay = endTime /_days; 245 246 var result = { 247 startDay :startDay, 248 endDay :endDay, 249 cutDay :cutDays //可配置返回结果 250 }; 251 252 obj.success(result); //回调 253 };
1 /* 2 * 裁剪图片 3 * $(id).resizeImage({ 4 * that:this, //当前图片对象 5 * cutWid:‘‘, //裁剪尺寸 6 * quality:0.6, //图片质量0~1 7 * limitWid:400, //最小宽度 8 * success:function (data) { 9 * do something... 10 * } 11 * }) 12 * 13 * */ 14 $.fn.resizeImage = function (obj) { 15 var file = obj.that.files[0]; 16 var URL = window.URL || window.webkitURL; 17 var blob = URL.createObjectURL(file); 18 var base64; 19 20 var img = new Image(); 21 img.src = blob; 22 23 if(!/image\/\w+/.test(obj.that.files[0].type)){ 24 $.toast("请上传图片！",1000); 25 return false; 26 } 27 28 img.onload = function() { 29 if(img.width < obj.limitWid){ 30 $.toast(‘图片宽度不得小于‘+ obj.limitWid +‘px‘,1000); 31 return false; 32 } 33 var that = this; 34 35 //生成比例 36 var w,scale,h = that.height; 37 if(obj.cutWid == ‘‘){ 38 w = that.width; 39 }else{ 40 w = obj.cutWid; 41 } 42 scale = w / h; 43 h = w / scale; 44 45 //生成canvas 46 var canvas = document.createElement(‘canvas‘); 47 var ctx = canvas.getContext(‘2d‘); 48 $(canvas).attr({ 49 width: w, 50 height: h 51 }); 52 ctx.drawImage(that, 0, 0, w, h); 53 54 // 生成base64 55 base64 = canvas.toDataURL(‘image/jpeg‘, obj.quality || 0.8); 56 var result = { 57 base64:base64 58 }; 59 60 //成功后的回调 61 obj.success(result); 62 }; 63 }; 64 65 //相册弹窗 66 $.fn.popupImage = function (obj) { 67 var $this = obj.this; 68 var sj_w = $this[0].naturalHeight; 69 var src = $this.attr(‘src‘); 70 var h = $(‘body‘).height(); 71 var w = $(‘body‘).width(); 72 var padding = 10; 73 var shadeW = w - padding*2; 74 var img = ‘‘,shade = ‘‘; 75 76 img = ‘<div class="popup-image" style="position:absolute; top:0; left:0; z-index: 999999; padding:10px ‘+padding+‘px; width: ‘+w+‘px; height:‘+h+‘px; line-height: ‘+h+‘px; text-align: center;" >‘ + 77 ‘<img src="‘+src+‘" style="max-width: ‘+shadeW+‘px"/></div>‘; 78 shade = ‘<div class="shade" style="position:absolute; top:0; left:0; width: ‘+w+‘px; height:‘+h+‘px;background: #000; z-index: 999990; opacity: .8;"></div>‘; 79 80 $(‘body‘).append(shade); 81 $(‘body‘).append(img); 82 83 $(‘.popup-image‘).on(‘click‘,function () { 84 $(‘.popup-image‘).remove(); 85 $(‘.shade‘).remove(); 86 }) 87 88 }; 89 90 function checkBox(param){ 91 if(!param.id.hasClass(‘active‘)){ 92 if(param.id.parent().find(‘.active‘).size() < param.num){ 93 param.id.addClass(‘active‘).find(‘input‘).attr(‘checked‘,true); 94 }else{ 95 $.toast(‘最多选择三个！‘,1000); 96 return false; 97 } 98 }else{ 99 param.id.removeClass(‘active‘).find(‘input‘).attr(‘checked‘,false); 100 } 101 }
以上是关于移动端总结的一些公共方法的主要内容，如果未能解决你的问题，请参考以下文章