踩坑

 

• IE兼容
  刚来的时候做页面，在IE上排列出现错乱，发现是css中li的选择问题
  li:first-child li:first-of-type 在ie上会失效
  所以改成了li+li

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

• 溢出文字省略号显示
  做后台系统的时候，表格里的标题要做溢出用省略号显示

   .table-info table .txt{
    max-width: 281px;
    position: relative;
    /* display: block; */
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容*/
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    height; 20px;
    line-height: 20px;
  }
  <tr>
  <td width="6%">序</td>
  <td width="22%">标题</td>
  <td width="9%">创建人</td>
  <td width="14%">创建时间</td>
  <td width="10%">分发状态</td>
  <td width="14%">最后操作时间</td>
  <td width="9%">最后操作人</td>
  <td width="16%" class="last-td">操作</td>
  </tr>
  <c:forEach items="${news.datas}" varStatus="key" var="news">
  <tr>
  <td>${key.count}</td>
  <td class="txt">${news.title}</td>
  <td>${news.name}</td>
  <td><Date:date value="${news.time}"></Date:date></td>
  <c:if test="${news.issend ==0}">
  <td>未分发</td>
  </c:if>
  <c:if test="${news.issend ==1}">
  <td>已分发</td>
  </c:if>                              
  <td><Date:date value="${news.modifyTime}"></Date:date></td>
  <td>${news.modifyName}</td>
  <td class="last-td">
    <input type="hidden" value="${news.id}" class="news_id">
    <a href="javascript:;" class="edit">编辑</a>
    <span>|</span>
    <a href="javascript:;" class="delete">删除</a>
  </td>
  </tr>
  

• 选择分类与标签

  
  
   

  

  image.png
  
  

  用数组包对象的格式

  
  
   

  

  image.png

• 时间戳转换
  var date = new Date(obj.news.createTime);

• 时间格式与判断今天、昨天、更早

            var year = date.getFullYear();
            var month= date.getMonth()+1;
            var day= date.getDate();
            var hour= date.getHours();
            var minute= date.getMinutes(); 
            var nowDate = new Date();
            var nowYear = nowDate.getFullYear();
            var nowMonth= nowDate.getMonth()+1;     
            var nowDay= nowDate.getDate();
            var dates;
            if(year == nowYear && month == nowMonth && day == nowDay){
                dates = '今天'+hour+":"+minute;
            }else if(year == nowYear && month == nowMonth && nowDay-day == 1){
                dates = '昨天';
            }else{
                dates = year+'-'+month+'-'+day;
            }
  

• 分页

pagination

        <link rel="stylesheet" href="${rc.contextPath}/resources/nasha/css/pagination.css">
        <script src="${rc.contextPath}/resources/nasha/js/jquery.pagination.js" charset="utf-8"></script>
        //评论分页
        $('#pagination').pagination({
                pageCount:data.data.result.totalpage,
                totalData:data.data.result.total,
                showData:4,
                coping:false,
                isHide:true,
                prevContent:'◀',  
                nextContent:'▶',  
                callback:function(api){
                    //获取当前页码  
                     var current = api.getCurrent();  
                     console.log(current);
                    //请求当前页要展示的数据  
                     var url = ctx+'/news/getEvaluatePager';
                     $.post(url,{ 
                         newsId:id,
                         n: current,
                         s: 4
                     },function(data){  
                        //将数据和HTML拼接并添加到页面渲染  
                        $('.judge-list ul').empty();
                         $.each(data.data.result.datas, function(i, obj){
                             var date = new Date(obj.createTime);
                             var year = date.getFullYear();
                             var month= date.getMonth()+1;
                             var day= date.getDate();
                             var hour= date.getHours();
                             var minute= date.getMinutes(); 
                             var nowDate = new Date();
                             var nowYear = nowDate.getFullYear();
                             var nowMonth= nowDate.getMonth()+1;     
                             var nowDay= nowDate.getDate();
                             var dates;
                             if(year == nowYear && month == nowMonth && day == nowDay){
                                dates = '今天'+hour+":"+minute;
                             }else if(year == nowYear && month == nowMonth && nowDay-day == 1){
                                dates = '昨天';
                             }else{
                                dates = year+'-'+month+'-'+day;
                             }
                                var oDiv = '<li class="clear" id="'+obj.id+'">'+
                                                '<img src="'+ctx+'/resources/nasha/images/ren.png" alt="">'+
                                                '<div>'+
                                                    '<p class="clear">'+
                                                        '<span class="name">'+obj.name+'</span>'+
                                                        '<span class="time">'+dates+'</span>'+
                                                    '</p>'+
                                                    '<p>'+obj.content+'</p>'+
                                                '</div>'+
                                            '</li>';
                            $(oDiv).appendTo($('.judge-list ul'));
                        })
                     },'json');
                 }
              });

• 微信分享

        //wechat
    //初始化
    var url=location.href;
    //alert(url);
    url = encodeURIComponent(url);
    //alert(url);
    var path=location.href.split('/oss')[0];
    //alert(path);
  $.ajax({ 
           url : "/oss/share/getWxConfig",
       type : "get",
            //将编码的url作为参数传到接口里
       data : {"url":url},
       dataType: "json",
       success : function(data){ 
        console.log(data);
           wx.config({    
               debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，
                      //若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
               appId: data.data.result.appId,    
               timestamp: data.data.result.timestamp,    
               nonceStr: data.data.result.nonceStr,    
               signature: data.data.result.signature,    
               jsApiList: [//需要调用的JS接口列表
                            'checkJsApi',//判断当前客户端版本是否支持指定JS接口
                            'onMenuShareTimeline',//分享给好友
                            'onMenuShareAppMessage',//分享到朋友圈
                            'onMenuShareQQ',//分享到QQ
                            'onMenuShareWeibo',//分享到微博
                            'onMenuShareQZone'//分享到QQ空间
                            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
           });    
       },    
        error:function(data){    
            //alert("data");    
        }    
     });
    //分享写在ready里
    wx.ready(function () {
        wx.checkJsApi({
            jsApiList: [
                'checkJsApi',//判断当前客户端版本是否支持指定JS接口
                'onMenuShareTimeline',//分享给好友
                'onMenuShareAppMessage',//分享到朋友圈
                'onMenuShareQQ',//分享到QQ
                'onMenuShareWeibo',//分享到微博
                'onMenuShareQZone'//分享到QQ空间
            ]
        });
      //分享朋友圈
        wx.onMenuShareTimeline({
            title: '那啥APP送红包啦！',
            desc: '用那啥，轻轻松松找翻译~', // 分享描述
            link: base, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: path+'/oss/resources/images/share_logo.png',// 自定义图标
            trigger: function (res) {
                // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，
                //因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回.
                //alert('click shared');
            },
            success: function (res) {
                //alert('shared success');
                //some thing you should do
                $('.mask').hide();
            },
            cancel: function (res) {
                //alert('shared cancle');
                $('.mask').hide();
            },
            fail: function (res) {
                //alert(JSON.stringify(res));
                $('.mask').hide();
            }
        });
        //分享给好友
        wx.onMenuShareAppMessage({
            title: '那啥app派红包啦！',
            desc: '用那啥，轻轻松松找翻译~', // 分享描述
            link: base, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: path+'/oss/resources/images/share_logo.png', // 自定义图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
                //alert('shared success');
                $('.mask').hide();
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
                //alert('shared cancle');
                $('.mask').hide();
            },
            fail: function (res) {
                //alert(JSON.stringify(res));
                $('.mask').hide();
            }
        });
      //分享到QQ
        wx.onMenuShareQQ({
            title: '那啥APP送红包啦！',
            desc: '用那啥，轻轻松松找翻译~', // 分享描述
            link: base, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: path+'/oss/resources/images/share_logo.png', // 自定义图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
                //alert('shared success');
                $('.mask').hide();
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
                //alert('shared cancle');
                $('.mask').hide();
            },
            fail: function (res) {
                //alert(JSON.stringify(res));
                $('.mask').hide();
            }
        });
        //分享到腾讯微博
        wx.onMenuShareWeibo({
            title: '那啥APP送红包啦！',
            desc: '用那啥，轻轻松松找翻译~', // 分享描述
            link: base, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: path+'/oss/resources/images/share_logo.png', // 自定义图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
                //alert('shared success');
                $('.mask').hide();
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
                //alert('shared cancle');
                $('.mask').hide();
            },
            fail: function (res) {
                //alert(JSON.stringify(res));
                $('.mask').hide();
            }
        });
        //分享到QQ空间
        wx.onMenuShareQZone({
            title: '那啥APP送红包啦！',
            desc: '用那啥，轻轻松松找翻译~', // 分享描述
            link: base, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: path+'/oss/resources/images/share_logo.png', // 自定义图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
                //alert('shared success');
                $('.mask').hide();
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
                //alert('shared cancle');
                $('.mask').hide();
            },
            fail: function (res) {
                //alert(JSON.stringify(res));
                $('.mask').hide();
            }
        });
    });
    wx.error(function (res) {
        alert(res.errMsg);
    });
  

• 页面视频播放自动全屏问题

      var oVideo = '<video id="myVideo" x5-playsinline="" playsinline="" webkit-playsinline=""  preload="auto" src="'+datas.videoUrl+'" poster="'+datas.videoUrl+'?vframe/jpg/offset/0"></video><img src="../images/icon_home_play@3x.png" alt="" class="icon_play pause">';
      // <video  src=""  controls=""  poster="" preload="auto"></video>
      $('.video').append(oVideo);
  
    //按钮控制视屏播放暂停
    $('.content').on('click','.icon_play',function(){
           if ($(this).hasClass('pause')) {
               $(this).siblings('video').trigger("play");
               $(this).removeClass('pause');
               $(this).addClass('play');
               $(this).hide();
               $(this).siblings('video')[0].controls='true';
          }
          else {
               $(this).siblings('video').trigger("pause");
               $(this).removeClass('play');
               $(this).addClass('pause');
          }
       })
  

`

• 验证手机号函数

       function regExpTel(){
            var phoneCall = $('#phoneCall').val();
            var telTest = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
            if(!phoneCall.replace(/^\s*/,"")){
                tip("手机号码不能为空")
                telState = 0;
                return;
            }
            if(!telTest.test(phoneCall)){
                tip("请输入正确的手机号码");
                telState = 0;
                return;
            }else{
                telState = 1;
            }
        }
  

• 验证验证码函数

      function regExpCode(){
            var phoneCode = $("#phoneCode").val();   
            if(!phoneCode.replace(/^\s*/,"")){
                tip("验证码不能为空");
                codeState = 0;
                return;
            }else{
                codeState = 1;
            }
        }
  

• 倒计时

      function countDown(){
            // 60秒倒计时
            var i = 59;
            var timer = setInterval(function(){
                if(i < 0){
                    clearInterval(timer);
                    $(".code").text("获取验证码").bind("click",getMsgCode);
                }else{
                    $(".code").text(i+"s");
                    i--;
                }
            },1000);
        }
  

• 获取地址栏参数

    function GetQueryString(name){
         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);
         if(r!=null)return  unescape(r[2]); return null;
    }