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

2023-01-23 07:52:54

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;

}

JS基础：

(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="data: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="data: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="data:images/warn.png" alt="warn" />'+txt+'</div>'+

								'</div>';

					console.info("other");

				}

			}

			$("body").prepend(showHtml);

			if(times == "" || times == undefined){

				//默认消失时间 1.5s

				times = 1500;

			}

			setTimeout(function(){

				$(".tipsBox").remove();

			},times)

		},

		/*

		 * 常用正则

		 * eg: $.方法名()

		 * */

		//手机号
                isPhone:function(p){
                  var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                 return isMobile.test(p) ? true : false;
               },
             //邮箱
             isEmail:function(e){
                var isEmail=/^([a-zA-Z1-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
               return isEmail.test(e) ? true : false;
            }
            //身份证

	})

})(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";

  	}

}

用JQuery实现选中select里面的option显示对应的div

HTML：

<select class="span9 m-wrap j-pactchoose" name="pactkind">
   <option value="1">标准无价易制毒合同</option>
   <option value="2">标准有价易制毒合同</option>
   <option value="3">非标准无价易制毒合同</option>
      <option value="4"></option>
</select>

<div>

　　<div id="div4" style="display:none">Not Thing</div>

</div>

$(".j-pactchoose").on('change',function(){
       var i = $(this).find("option:selected").val();
       if($("#pressDrug"+i).length == 1){
           $("#pressDrug"+i).show().siblings(".opt-lessdrug").hide()
       }else{
           $(".opt-lessdrug").hide()
       }

   })

常用的插件：1、弹窗： http://mishengqiang.com/sweetalert/ 、http://layer.layui.com/

　　　　　　2、Infinite-Scroll无限滚动加载数据：http://demo.sucaihuo.com/108/

　　　　　　3、图片上传webuploader： http://fex.baidu.com/webuploader/ 和 http://www.jq22.com/jquery-plugins%E4%B8%8A%E4%BC%A0-1-jq　

　　　　　　4、分页layui： http://www.layui.com/demo/laypage.html 和 jQuery Pagination分页插件(ZXX)： https://www.zhangxinxu.com/jq/pagination_zh/　

　　　　　　5、图片延迟加载： http://www.jq22.com/jquery-info390

　　　　　　6、angularjs 链接： https://www.cnblogs.com/ermu-learn/p/5913760.html

　　　　　　7、Vue链接:

　　　　　　8、select多选： http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN#the-position

9、省市联动：http://www.jq22.com/yanshi16612

　　　　　　............等等等用到在加随时更新

这些都是很常见很常见的，不为了学习，只是找个地方封存起来，直接方便用，要是对你有帮助，也算是尽了一份力

demo：

码农公寓

用JQuery实现选中select里面的option显示对应的div

HTML：

相关文章