前端笔记
/*输入金额限制两位小数*/ <input type="number" placeholder="其他金额" class="m_input" onkeyup="clearNoNum(this)"/> function clearNoNum(obj){ if(! /^\d+(\.\d{1,2})?$/.test(obj.value) ){ obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符 obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字而不是 obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的 obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数 } }
/*菜单固定到屏幕上*/ window.onscroll=function(){//滚轮事件 var top=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;//滚轮滚动的距离 var node=document.getElementById('top-menu');//变化的菜单模块 if(top>450){//就是滚动条滚动到440px位置，显示菜单，并且可以修改它的样式。 node.style.position='fixed'; node.style.width='100%'; //node.style.background='#fff'; node.style.left='0'; node.style.top='0'; node.style.zIndex="999"; }else{//当鼠标滚动回初始位子样式变回。 node.style.position='static'; //node.style.background='rgba(0, 0, 0, 0)'; node.style.zIndex="0"; style="position:fixed;left:0px;top:0px;" } }
/*获取地理位置*/ <script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script> //获取地理位置省份和城市 alert(remote_ip_info.province + remote_ip_info.city)
/*跨域*/ //前端ajax请求 $.ajax({ url: '', dataType: 'json', type: 'POST', xhrFields: { 'withCredentials': true//跨域 }, crossDomain: true }); //php后端 header('Access-Control-Allow-Origin:'.(isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN']: '*')); header('Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS'); header('Access-Control-Allow-Headers:Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, Process-Data'); header('Access-Control-Allow-Credentials:true');
/*返回上次浏览位置*/ <script src="jquery-1.8.3.min.js" type="text/javascript"</script> <script src="jquery.cookie.js" type="text/javascript"></script> $(function () { var str = window.location.href; str = str.substring(str.lastIndexOf("/") + 1); if ($.cookie(str)) { $("html,body").animate({ scrollTop: $.cookie(str) }, 1000); } else { } }) $(window).scroll(function () { var str = window.location.href; str = str.substring(str.lastIndexOf("/") + 1); var top = $(document).scrollTop(); $.cookie(str, top, { path: '/' }); return $.cookie(str); })
/*判断各个平台*/ getUA = function() { var ua = navigator.userAgent.toLowerCase(); var browser = {}; if (ua.match(/iphone|nokia|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i)) { browser.mobile = true; //判断是否是手机访问 } if (ua.match(/MicroMessenger/i)) { browser.weChat = true; //判断是不是微信 } if (ua.match(/iphone|ipad/i)) { browser.ios = true; //判断是不是ios系统 } if (ua.match(/android/i)) { browser.android = true; //判断是不是安卓系统 } if (ua.match(/Windows Phone/i)) { browser.wp = true; //判断是不是windows系统 } if (ua.match(/ipad/i)) { browser.ipad = true; } return browser; }
/*匹配行内style元素*/ function existdisplay() { $('body').find('.pop-box').each(function () { var block = new RegExp('display: block'); var test = block.test($(this).attr("style")); if(test){ exist = 1; return false; }else{ exist = 0; } }); return false; }
/*苹果手机自动播放音频*/ //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 document.getElementById('audio').play(); //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('audio').play(); }, false);
/*数字逗号分隔*/ function initNumber(){ var num = $('.num').html(),num1 = $('.num1').html();//用原生函数，兼容不好 $('.num').html(parseFloat(num).toLocaleString()); $('.num1').html(parseFloat(num1).toLocaleString()); var nums=$('.item_num').html();//number.toFixed(2).replace(/\d(?=(\d{3})+(?!\d))/g, '$&,' );正则分隔 $('.item_info ').each(function(){ var num = $(this).find('.item_num span').text(); console.log(num.replace(/\d(?=(\d{3})+(?!\d))/g, '$&,' )); $(this).find('.item_num').html( num.replace(/\d(?=(\d{3})+(?!\d))/g, '$&,' ) ); }); }
?*slider 触摸滑动*/ //定义变量，用于记录坐标和角度 var startx,starty,movex,movey,endx,endy,nx,ny,angle; var subsidiary = document.getElementById('subsidiary'); //获取DOM标签 //开始触摸函数，event为触摸对象 function touchs(event){ //阻止浏览器默认滚动事件 event.preventDefault(); //通过if语句判断event.type执行了哪个触摸事件 if(event.type=="touchstart"){ console.log('开始'); //获取开始的位置数组的第一个触摸位置 var touch = event.touches[0]; //获取第一个坐标的X轴 startx = Math.floor(touch.pageX); //获取第一个坐标的X轴 starty = Math.floor(touch.pageY); }else if(event.type=="touchmove"){ //触摸中的坐标获取 // console.log('滑动中'); var touch = event.touches[0]; movex = Math.floor(touch.pageX); movey = Math.floor(touch.pageY); //当手指离开屏幕或系统取消触摸事件的时候 }else if(event.type == "touchend" || event.type == "touchcancel"){ //获取最后的坐标位置 endx = Math.floor(event.changedTouches[0].pageX); endy = Math.floor(event.changedTouches[0].pageY); // console.log('结束'); //获取开始位置和离开位置的距离 nx = endx-startx; ny = endy-starty; //通过坐标计算角度公式 Math.atan2(y,x)*180/Math.PI angle = Math.atan2(ny, nx) * 180 / Math.PI; // console.log(nx); if(Math.abs(nx)<=1 ||Math.abs(ny)<=1){ // console.log('滑动距离太小'); return false; } //通过滑动的角度判断触摸的方向 if(angle<45 && angle>=-45){ index-=1; if (index < 0) { // index = sliderNum - 1; index = 0; } if (index > moveSlidenum) { index = moveSlidenum; } console.log(index); // alert('右滑动'); selectSlider(index); return false; } else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){ index+=1; if (index > moveSlidenum) { index = moveSlidenum; } console.log(index); if (index <= moveSlidenum) { selectSlider(index); } // alert('左滑动'); return false; } } } //添加触摸事件的监听，并直行自定义触摸函数 subsidiary.addEventListener('touchstart',touchs,false); subsidiary.addEventListener('touchmove',touchs,false); subsidiary.addEventListener('touchend',touchs,false);
//监听鼠标滚轮 翻页 var screen_height = $(window).height(); var doScroll = true; var oDiv = document.querySelector('.main-wrapper'); var footer = document.querySelector('#main-footer'); function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/ var ev = ev || window.event; var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作 down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0; if (doScroll) { if (down) { if (page_index != 3) { doScroll = false; page_index++; vm.scrollTo(page_index * screen_height); //当响应向下滚动事件的时候，将doScroll设置成false，控制在这次响应过程中，不再响应其他滚轮事件，当这次事件执行结束后（500ms后），再讲doScroll恢复成true，准备响应下次滚动。 setTimeout(function () { doScroll = true; }, 500); } } else { if (page_index != 0) { doScroll = false; page_index--; vm.scrollTo( page_index * screen_height); // $("#main-swiper").css('transition-duration', '.5s'); setTimeout(function () { doScroll = true; }, 500); } } if (ev.preventDefault) {/*FF 和 Chrome*/ ev.preventDefault();// 阻止默认事件 } } return false; } addEvent(oDiv, 'mousewheel', onMouseWheel); addEvent(oDiv, 'DOMMouseScroll', onMouseWheel);//谷歌浏览器 addEvent(footer, 'mousewheel', onMouseWheel); addEvent(footer, 'DOMMouseScroll', onMouseWheel); function addEvent(obj, xEvent, fn) { if (obj.attachEvent) { obj.attachEvent('on' + xEvent, fn); } else { obj.addEventListener(xEvent, fn, false); } }
待续......
