日常用的css基础和自己常用的js封装

css基础:base ???/* * 初始化 ?*/*::after, *::before { ???box-sizing: border-box;}body { ???font-family: ‘Microsoft YaHei‘, tahoma, arial, ‘Hiragino Sans GB‘, \5b8b\4f53, sans-serif; ???background: #fff;}html{-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62.5%;}body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,s,a,div { ???margin: 0; ???padding: 0;}li { ???list-style: none;}img { ???display: inline-block;}em { ???font-style: normal;}/* a */.trans{ ????transiton:all 0.3s; ????-moz-transition:all 0.3s; ????-webkit-transition:all 0.3s; ????-ms-transition:all 0.3s;}a:focus { ???outline: none;}a,a:hover { ???text-decoration: none;}a:visited,a:link { ???text-decoration: none;}/* 元素i、select、input、textarea、button */i { ???vertical-align: middle;}i,label,input[type=‘checkbox‘] { ???vertical-align: middle;}select { ???line-height: 24px !important; ???height: 30px !important; ???padding: 4px 2px !important;}input { ???font-size: 14px; ???display: inline-block; ???overflow: hidden; ???height: 30px !important; ???line-height: 28px !important; ???padding-left: 5px; ???vertical-align: middle; ???color: #333; ???border: 1px solid #dcdcdc; ???border-radius: 0; ???background-color: #fff;}input[type=‘button‘] { ???height: auto !important; ???padding: 4px 24px !important;}input[type=‘checkbox‘],input[type=‘radio‘] { ???height: auto !important; ???padding: 0 !important; ???border: none;}.form-control[readonly] { ???opacity: 1; ???background-color: #f5f5f5;}textarea { ???overflow-y: auto; ???padding: 4px 6px !important; ???resize: none; ???transition: border .2s linear 0s, box-shadow .2s linear 0s; ???color: #333; ???border: 1px solid #dcdcdc; ???border-radius: 4px; ???background-color: #fff; ???box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset;}textarea:focus { ???outline: 0 none;}/*浮动*/.pull-left{ ???float: left;}.pull-right{ ???float: right;}/*清除浮动*/.clearfix::after, .clearfix::before,.form-group::after,.form-group::before { ???content: " "; ???display: table;}.clearfix,.clearfix::after,.form-group,.form-group::after{ ???clear: both;}/* ????公用样式*==================================================================*/.width1200 { ???width: 1200px !important;}/* 居中 */.m-c { ???margin: 0 auto;}/* 对齐方式 */.t-c-f { ???text-align: center !important;}.t-l-f { ???text-align: left !important;}.t-r-f { ???text-align: right !important;}/* 省略 */.el-sl { ???display: inline-block; ???overflow: hidden; ???vertical-align: middle; ???white-space: nowrap; ???text-overflow: ellipsis;}/* 文字大小 */.f12 { ???font-size: 12px;}.f14 { ???font-size: 14px;}.f16 { ???font-size: 16px;}.f18 { ???font-size: 18px;}.f22{ ???font-size:22px;}.f24{ ???font-size:24px;}.f28{ ???font-size:28px;}.b { ???font-weight: bold;}.b-n { ???font-weight: normal;}/* 颜色值 ?* =============== */.white { ???color: #fff;}.white-bg { ???background: #fff;}.dark { ???color: #000;}.gray333 { ???color: #333;}.gray333-bg { ???background: #333;}.gray999 { ???color: #999;}.gray999-bg { ???background: #999;}.gray666 { ???color: #666;}.gray666-bg { ???background: #666;}/* ?????图标大全 *==================================== */.i-all { ???display: inline-block; ???background: url(../../img/icon/i_all.png) no-repeat;}/*删除*/.i-del { ???width: 13px; ???height: 15px; ???background-position: -61px -17px;}.i-del:hover,.i-del.active,.i-del-h { ???width: 13px; ???height: 15px; ???background-position: -55px -33px;}/* *弹窗*/.c-modalBg { ???position: fixed; ???z-index: 10; ???top: 0; ???left: 0; ???display: none; ???width: 100%; ???height: 100%; ???background: rgba(0, 0, 0, .5);}.c-modalBox { ???position: fixed; ???z-index: 12; ???top: 50%; ???left: 50%; ???display: none; ???/* margin-top: 150px;*/ ???margin-left: -250px; ???border-radius: 5px; ???background: #fff;}.c-modalBox .c-modalBox-title { ???font-weight: bold; ???line-height: 48px; ???width: 100%; ???height: 48px; ???color: #333; ???border-bottom: 1px solid #e8e8e8; ???border-radius: 5px 5px 0 0; ???background: #fafafa;}.c-modalBox .c-modalBox-title .i-close { ???font-size: 36px; ???font-style: normal; ???font-weight: lighter;}/* * *tipsBox 提示框 */.tipsBox{ ???width:200px; ???position:fixed; ???top:25%; ???left:50%; ???margin-left:-90px; ???z-index:999999; ???}.tipub{padding: 10px; ???border-radius:4px; ???-webkit-border-radius: 4px; ???-moz-border-radius: 4px; ???box-shadow:0 0 3px #ddd inset; ???-webkit-box-shadow: 0 0 3px #ddd inset;}.tipsBox .bgcolok{background-color:#4AAF33;}.tipsBox .bgcolerror{background-color:#EB6B62;}.tipsBox .bgcolwarn{background-color:#F7BA86;}.tipsBox img{ ???vertical-align: middle; ???margin-right:5px; ???margin-top: -4px !important;}

(function($){//$.fn.extend({}) 对象实例来调用此方法 $("").方法名()$.fn.extend({/* 剩余输入字数 num:要输入的字数总个数 * eg:$(".length100").getTextLen(100) * ??$(".length100").getTextLen(1000) * */getTextLen: function(num) { ???????????var _num = num; ???????????var timer = null; ???????????$(this).on(‘mouseover‘, function() { ???????????????clearInterval(timer); ???????????????$(this).attr(‘maxLength‘, _num); ???????????????var _this = $(this); ???????????????timer = setInterval(function() { ???????????????????var thisVal = _this.val(); ???????????????????if (thisVal.length > _num) { ???????????????????????thisVal = thisVal.substring(0, _num); ???????????????????????_this.val(thisVal); ???????????????????} ???????????????????_this.parent().find(‘.leng‘).text(thisVal.length); ???????????????}, 30); ???????????}); ???????????$(this).mouseover(); ???????}, ?});//$.extend({}) ?直接用jQuery类即可引用 $.方法名()$.extend({/* * *提示框， ?*目前三个参数 txt：要显示的文本；times：自动关闭的时间（不设置的话默认1500毫秒） status：状态，*eg: ?$.showTips(‘请输入文本提示‘); ????$.showTips(‘提交成功~ 即将进入下一步‘,1500,1);**/showTips:function(txt,times,status){var showHtml = "";if(txt != ""){if(status == 1 && status !=undefined){console.info("1111");showHtml = ‘<div class="tipsBox t-c-f white">‘+‘<div class="bgcolok tipub"><img src="images/ok.png" alt="OK" />‘+txt+‘</div>‘+‘</div>‘;}else if(status == 2){showHtml = ‘<div class="tipsBox t-c-f white">‘+‘<div class="bgcolerror tipub"><img src="images/error.png" alt="error" />‘+txt+‘</div>‘+‘</div>‘;console.info("222");}else{showHtml = ‘<div class="tipsBox t-c-f white">‘+‘<div class="bgcolwarn tipub"><img src="images/warn.png" alt="warn" />‘+txt+‘</div>‘+‘</div>‘;console.info("other");}}$("body").prepend(showHtml);if(times == "" || times == undefined){//默认消失时间 1.5stimes = 1500;}setTimeout(function(){$(".tipsBox").remove();},times)},/* ?* 常用正则 * eg: $.方法名() * *///验证手机号/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/})})(jQuery);/* * Img:要放图片的img元素，onload时传参可用this * maxHeight ?:img元素的高度，像素（图片框 最大高度） * maxWidth:img元素的宽度，像素（图片框 最大宽度） * eg: <img src="" onload="AutoResizeImage(this,250,300)"/> * */function AutoResizeImage(Img, maxWidth, maxHeight) { ???var image = new Image(); ???//原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响） ???image.src = Img.src; ?????// 当图片比图片框小时不做任何改变 ????if (image.width < maxWidth&& image.height < maxHeight) { ???????Img.width = image.width; ???????Img.height = image.height; ???} ???else{ ???//原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放，反之以框的高为标准缩放 ???????if (maxWidth/ maxHeight ?<= image.width / image.height) { ??????????//原图片宽高比例 大于 图片框宽高比例 ???????????Img.width = maxWidth; ??//以框的宽度为标准 ???????????Img.height = maxWidth* (image.height / image.width); ???????} ????????else { ??????????//原图片宽高比例 小于 图片框宽高比例 ???????????Img.width = maxHeight ?* (image.width / image.height); ???????????Img.height = maxHeight ?; ??//以框的高度为标准 ???????} ???} ?}/* * 图片比例缩放 * eg: <img src="" onload="scalingImg(this)"/> * *//*function scalingImg(obj){ ???var $this = $(obj); ???var imgWidth=$this.width(); ???var imgHeight=$this.height(); ???var parent = $this.parent(); ???var containerWidth = parent.width(); ???var containerHeight=parent.height(); ???var containerRatio = containerWidth / containerHeight; ???var imgRatio = imgWidth / imgHeight; ???if (imgRatio > containerRatio) { ???????imgWidth = containerWidth; ???????imgHeight = containerWidth / imgRatio; ???} else if (imgRatio < containerRatio) { ???????imgHeight = containerHeight; ???????imgWidth = containerHeight * imgRatio; ???} else { ???????imgWidth = containerWidth; ???????imgHeight = containerHeight; ???} ???$this.attr(‘width‘,imgWidth); ???$this.attr(‘height‘,imgHeight);}*//* ?* ?* tab切换 * eg: ?* */function setTab(name,cursel,n){ ?for(i=0;i<=n;i++){ ?var menu=document.getElementById(name+i); ?var con=document.getElementById("con"+name+i); ?if(menu == null || con == null)continue; ?menu.className=i==cursel?"hover":""; ?con.style.display=i==cursel?"block":"none"; ?} }