前端笔记

/*输入金额限制两位小数*/
<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+).(dd).*$/,'$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);
        }
    }

待续......