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

Posted 淡然一笑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了日常用的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;
}

 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="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.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="div1">内容一</div>

  <div id="div2 " style="display:none">内容二</div>

  <div id="div3" style="display:none">内容三</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:

 

以上是关于日常用的css基础和自己常用的js封装的主要内容,如果未能解决你的问题,请参考以下文章

vue3.2 基础及常用方法

常用Javascript代码片段集锦

css常用代码片段 (更新中)

markdown Snippets.md是我最常用的HTML,CSS和JavaScript代码片段,用于前端Web开发

常用js方法封装

js常用代码片段