遇到的坑

1.文字两端居中

text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/

2.多个异步请求的执行顺序

点击页面上一个按钮发送两个ajax请求时,这两个异步请求会同时发送,至于执行的快与慢,要看响应的数据量的大小及后台逻辑的复杂程度
当一个异步请求发送时,浏览器不会处于锁死、等待的状态,从一个异步请求发送到获取响应结果的期间,浏览器还可以进行其它的操作。这就意味着多个异步请求的执行时并行的

所以要想使其按一定顺序执行,解决方案:参考

  1. Ajax2()方法的执行放到Ajax1()的success回调函数的最后一行。
  2. Ajax1()的异步请求方法中,增加一个回调函数 :complete : Ajax2

3.限制字数

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

4.获取验证码(正校考)

获取接口并计时:

页面

JS

// 点击获取验证码
var InterValObj; //timer变量,控制时间
var count = 60; //间隔函数,1秒执行
var curCount;//当前剩余秒数
var sms_code = ""; //验证码
var codeLength = 4;//验证码长度
function sms_send(){
    $(".msg").empty(); //先将提示文字清空
    curCount = count;
    var phone = $(".g_phone #tel").val();//手机号码
    var reg = /^1[34578]\d{9}$/;
    if (phone == "") {
        $(".msg").text("请填写手机号");
    } else if (!reg.test(phone)){
        $(".msg").text("请填写正确的手机号码!");
    }else{
        for (var i = 0; i < codeLength; i++) {
            sms_code += parseInt(Math.random() * 9).toString();
        }
        $.ajax({
            type: 'POST',
            url: "/index/login/sms_code",
            dataType: 'json',
            data: {
                sms_code: sms_code,
                phone: phone
            },
            error: function () {
                $(".msg").text('发送失败,请稍后重试!');
            },
            success: function (data) {
                if (data.ret== 200) {
                    $(".g_phone #getCode").css("cursor", "default");
                    $(".g_phone #getCode").removeAttr("onclick");
                    $(".g_phone #getCode").hide();
                    $(".g_phone #time").show().text(curCount + "秒");
                    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
                } else {
                    $(".msg").text(data.msg);
                }
            }
        })
    }
}
function SetRemainTime() {
    if (curCount == 0) {
        window.clearInterval(InterValObj);//停止计时器
        $(".g_phone #getCode").show();
        $(".g_phone #time").hide();
        $(".g_phone #getCode").css("cursor", "pointer");//启用按钮
        $(".g_phone #getCode").attr("onclick", "sms_send()");
        $(".g_phone #getCode").text("重新发送");
        sms_code="";
    }
    else {
        curCount--;
        $(".g_phone #getCode").hide();
        $(".g_phone #time").show().text(curCount + "秒");
    }
}

5.调用微信接口上传图片

①页面中前引入以下两个JS,用途是连接微信授权获取token,只有这样才能有权限上传图片



②加入以下JS方法,只需要修改①②③三个注释的地方即可

function img_upload() {        //①方法名称随意,需要上传图片的时候onclick这个方法就行了
        wx.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: function (res) {
                var localIds = res.localIds[0];
                wx.uploadImage({
                    localId: localIds,
                    isShowProgressTips: 1,
                    success: function (res) {
                        var serverId = res.serverId;
                        $.ajax({
                            type: 'POST',
                            url: "",    //②此处写上传接口
                            dataType: 'json',
                            data: {
                                media_id: serverId
                            },
                            error: function () {
                                layer.msg('网络错误,请稍后再试!');
                            },
                            success: function (data) {
                                if (data.ret == 200) {
                               //③成功后的回调,data,data里返回了用户刚刚上传的图片的地址
                                } else {
                                    layer.msg(data.msg);
                                }
                            }
                        })
                    }
                });
            }
        });
    }

6.刷新页面

  • 异步请求成功后延时跳转页面
    window.setTimeout('window.location.href="/index/index/index";',2000)
  • 页面的刷新
    setTimeout("parent.location.reload();",2000);
       window.location.reload()

7.layui相关问题

  • 表单按第几个排序
    $(document).ready(function () {
      $('.dataTables-example').dataTable({
          "aaSorting": [ 6,"desc" ]
          });
      });
    
  • 页数
    $(document).ready(function () {
        $(".dataTables-example").dataTable();
    });
    
    要放在页面渲染完成后

8.em rem的单位问题

em要将body的font-size设为62.5%
rem要将html的font-size设为62.5%

测得字体直接/10即可

9.移动端tab切换问题

你可能感兴趣的:(遇到的坑)