个人项目前端代码小总结1.0

1.rem移动端的适配:

(function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                };


            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

2.页面之间传递参数

function request(paras) {
    var url = location.href;
    var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
    var paraObj = {}
    for (i = 0; j = paraString[i]; i++) {
        var curpar = paraObj[j.substring(0, j.indexOf("=")).toLowerCase()];
        if (!curpar)
            paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
    }
    var returnValue = paraObj[paras.toLowerCase()];
    if (typeof (returnValue) == "undefined") {
        return "";
    } else {
        return returnValue;
    }
};

3.表单序列化成json对象

(function($) {
    $.fn.serializeJson = function(){ 
        var serializeObj = {};
        var array = this.serializeArray();
        $(array).each(function(){
                if(serializeObj[this.name]){
                      if($.isArray(serializeObj[this.name])){ 
                             serializeObj[this.name].push(this.value);
                      }else{ 
                              serializeObj[this.name] = [serializeObj[this.name],this.value]; 
                      } 
                }else{ 
                        serializeObj[this.name] = this.value;
                } 
        }); 
        return serializeObj; 
    };
})(jQuery);

4.css3改变checkbox的样式

css:

/*checkbox样式*/
.regular-checkbox {
    display: none;
}


.regular-checkbox + label {
    background-color: #fafafa;
    border: 3px solid rgba(167, 164, 164, 0.57);
    width: 0.68rem;
    margin: 0 0 0.3rem 0.4rem;
    height: 0.68rem;
    display: inline-block;
    position: relative;
}


.regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 1.5rem;
    position: absolute;
    top: -0.9rem;
    left: 0rem;
    color: #66c1cc;
}

html:

<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1" class="check-label"></label>

【input的id和label的for要一致】

拓展：

勾选后传值的js：

$(selector).on("click",function(){
    
    if ($(".regular-checkbox:checked").size() == 0) {
          alert("请选择您的奖品！");
    }else{
      var ids = [];
      $(".regular-checkbox").each(function(){
          if($(this).prop("checked")){
              var id =  $(this).attr("id");
              ids.push(id)
          }
      })
      window.location.href=xxx.html?ids="+ids;
    }
    
   
    
})

5：前端与后台接口的数据交互

js部分：

/****
    get方式获取数据
    @param url 接口地址
    @param data 参数
    @param tplId 模板Id
    @param domId 插入数据的DomId
    @callback 回调函数
****/


var getList = function (url, tplId, domId, callback, type) {
    this.url = url;
    this.tpl = juicer($("#"+tplId).html());
    this.dom = $("#" + domId);
    if (callback) this.callback = callback;
    if (type) this.type = type;
}
getList.prototype = {
    ajax: function(data){
        this.data = data;
        var _this = this;
        $.ajax({
            type: this.type || "get",
            url: _this.url,
            data: data,
            contentType: "application/json;charset=utf-8",
            async: false,
            success: function (res) {
                // console.log(res);
                if(res.Status == 1){
                    _this.render(res);
                    if(_this.callback != null) _this.callback(res['pageSize'], res['Total']);
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                console.log(XMLHttpRequest, textStatus, errorThrown);
            }
        });
    },
    render: function(resdata){
        var html = this.tpl.render(resdata);
        this.dom.html(html);
    },
    refresh: function(){
        this.ajax(this.data);
    }
};

html部分：

<form id="form"></form>

<script type="text/javascript" src="/static/js/juicer-min.js"></script>【需要用到模板标签的模板juicer.js】

<script type="text/template" id="form-tpl"></script>

<script>

var newGetList = new getList(url, "form-tpl", "form");

var getListData = {"id":id};

newGetList.ajax(getListData);

</script>

6.动态验证input框字数

js部分：

function wordAccount(maxnum,obj){
        var curLength = $(obj).val().length;
        var $p = $(obj).next(); 
        $p.show();
        $(obj).off('blur');
        if(curLength > maxnum){
             $p.html("超出字数"+($(obj).val().length-maxnum));
             $(obj).css("border","1px solid red");
             
        }
        else{
            $p.html("最多输入"+maxnum+"个字，还可以输入"+(maxnum-$(obj).val().length)+"个字");
            $(obj).on("blur",function(){
                $p.hide();
            });
            $(obj).css("border","1px solid #ddd");
        }
    }

html：

<input  type="text" οnkeyup="wordAccount(30,this);" />

7.数据库获取的单选按钮【在juicer.js的基础上】

html:

<div id="Tags" ></div>

script模板:

<script type="text/template" id="Tags-tpl">
        <label class="control-label col-2">标签</label> 
        <div class="col-10 control-label" style="text-align:left;">
            <div class="Tags-list">
                {@each Data as item} 
                   <label><input type="checkbox" name="Tags" value="${item.Title}"><span class="radio-label">${item.Title}</span></label>//html语句拼接
                {@/each}
            </div>
        </div>
    </script>

js:

function getTags(){
            var getTagsData = {"AppId":appId};
            newGetTags = new getList("/Services/ContentOperateSvr.svc/GetTagByAppId", "Tags-tpl", "Tags");
            newGetTags.ajax(getTagsData);//获取后台接口数据
            $("input[name='Tags']").each(function(){
                var $val = $(this).val();
                if(TagsVal == $val){
                    $(this).attr("checked",'checked');//初始化选中
                }


            });
            
        }

getTags();