前端日常编程代码便捷汇总

1、使用form表单进行上传文件需要为form添加enctype="multipart/form-data" 属性，除此之外还需要将表单的提交方法改成post,

如下 method="post", input type的类型需要设置为file
 <form action="/url.do" enctype="multipart/form-data" method="post">
     <input type="file" name="name"/>
     <input type="submit" value="提交">
   </form>

2、文章内容查看更多带有阴影

.article-all{
    width: 100%;
    background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),color-stop(70%, #fff));
    background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%);
    padding-bottom:0.2rem;
    position: relative;
    z-index: 9999;
    padding-top: 1.6rem;
    bottom: 0;
    margin-top: -1.6rem;
}
文章展开全部的原理是限制文章的高度，
height:4rem;//固定数值
overflow: hidden;
当点击展开全部的时候 height：auto !important;

3、清除select自带三角形样式

appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
   给input边框和背景颜色设置全透明，但是里面的字不会消失
1.让背景颜色变透明(二选一)
background-color:rgba(0,0,0,0);
background:rgba(0,0,0,0);
2.让边框变透明(二选一)
border-color: transparent;
border: 1px solid rgba(0,0,0, 0);

4、css3文字渐变

color:#DA0A0A;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(248, 0, 0, 1)), to(rgba(95, 4, 4, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

5、离开网页窗口title的显示

可以通过DOCUMENT.HIDDEN属性判断当前页面是否是激活状态。 
兼容性：IE10+，FIREFOX10+,CHROME14+,OPERA12.1+,SAFARI7.1+ 
兼容性写法示例：
    var hiddenProperty = 'hidden' in document ? 'hidden' :    
        'webkitHidden' in document ? 'webkitHidden' :    
        'mozHidden' in document ? 'mozHidden' :    
        null;
    var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
    var onVisibilityChange = function(){
        if (!document[hiddenProperty]) {    
            document.title='被发现啦(*´∇｀*)';
        }else{
            document.title='藏好啦(つд⊂)  ';
        }
    }
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);

6、文本超出隐藏并出现省略号

多行文本超出出现省略号
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 15px;//
  height:30px;///* 2行隐藏就两倍，三行隐藏就三倍*/
}

单行文本超出隐藏
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

7、使用css清除浮动

   /*用伪元素改造的内墙法—-终极版内墙法*/
    /*在.clearfloat 标签里面的而最后 创建一个标签（块级）*/
   .clearfloat(或者为.clearfixed,类名不同功能不同):after{
        display: block;
       content: “”;
       clear: both;
       visibility: hidden;
       height: 0px;
   }
   .clearfloat{
    zoom:1;
   }

8、当锚点遇上fixed定位出现的bug

在父元素上面加{
padding-top:1rem;
margin-top:-1rem;
}

9、H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
（部分安卓手机的UC浏览器写完以后还是可以放大缩小）
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />（iOS上会明显 有时候会把数字当成电话号码）
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
viewport模板
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">

 

10、webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;} （ios上的下拉框会有圆角，所以要写border-radius:0）
 
在input框获得焦点时文字被清空用value 在input框输入文字时被清空用placeholder
 
webkit表单输入框placeholder的文字能换行么？ios可以，android不行~,在textarea标签下都可以换行~
html,body{
overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题，如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/
-webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/
position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/
}

11、手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象

.box{
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
.box>li{
-webkit-box-flex: 1.0;
box-flex: 1.0;
-webkit-flex: 1.0;
flex: 1;
width: 0;/*解决兼容性问题*/
}

 

 

12、输入框的兼容性解决

input[type="text"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="password"]{
-webkit-appearance: none;
display: block;
width: 100%;
height: 0.8rem;
line-height:normal;/*手机上的line-height不能写成和height的值一样，会出现再次输入光标靠上的现象*/
background: none;
font-size: 0.32rem;
padding-left: 0.28rem;
border-radius: 0;
-webkit-border-radius: 0;
border: 1px solid #d5d5d5;
-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
outline: none;
-webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);/*解决加入js后input框输入瞬间变白的现象*/
}
 
禁用 radio 和 checkbox 默认样式
input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{
display: none;/*这样就可以用class自定义样式*/
}
 
webkit表单输入框placeholder的颜色值
input::-webkit-input-placeholder{color:#999;}
input:focus::-webkit-input-placeholder{color:#999;}

13、手机上的多行省略

.overflow-hidden{
display: box !important;
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;/*第几行出现省略号*/
/*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/
}
文本标签line-height：1或者是line-height等于height文字会被切掉
 
手机上浮动元素能写宽尽量写宽不然很容易出现兼容性问题,尽量不要写高，因为内容多少不固定

 

14、安卓苹果手机异常bug

 
<button></button>元素一定要写上type属性不然会默认提交表单，出现想不到的bug
 
某些安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件，这些事件会导致不能输入汉字
input框若是不想输入文字 只能读不能写可以加readonly属性
手机上用背景图写运动，如果需要背景图定位来实现运动效果可以用rem进行计算后加上basckground-size:图的个数*100% 0；
写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳
 
弹层的关闭事件容易触发弹层关闭后下一层的事件所以要给弹层关闭事件加上event.preventDefault()
弹层弹出后不允许屏幕滚动给弹层加mousemove事件event.preventDefault()
面包屑导航如果按照bootstrap给li加：after伪元素的话在其他浏览器和在UC浏览器中表现的不一样，UC的的会比其他的浏览器宽，所占位置更多
 
如果一个手机看到的和其他手机不一样 会比其他的手机大或者小，查看他的浏览器字体设置是否正常，应该是他把手机浏览的字号调小或者调大了（坑人的所谓的bug）
 
IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的，那么就将该元素与别的元素同级
 
苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;

16、使用cookie提交表单自增

 function getCookie(cookieName){
        var cookieStr = unescape(document.cookie);
        var arr = cookieStr.split("; ");
        var cookieValue = "";
        for(var i=0;i<arr.length;i++){
            var temp = arr[i].split("=");
            if(temp[0]==cookieName){
                cookieValue = temp[1];
                break;
            }
        }
        return cookieValue;
    }   
    // cookie 
    if(getCookie('nums')== ''){
        $(".submit-nums").html('3562')
    }else{
        $(".submit-nums").html(getCookie('nums'))
    }
   
    //表单
    $(".formPageSub").click(function(){
        if($(".submit-nums").html() == 3562){
            let numss=Number(3562)+1
            document.cookie='nums='+numss
        }else{
            let numss=Number($(".submit-nums").html())+1
            document.cookie='nums='+numss
        }
    })

17、浏览器复制文本颜色和滚动条样式

::selection{
    background-color: #156B27;
    color:#fff;
    font-family: '楷体' !important;
}
html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,green,#156B27);
    border-radius: 30px;
    box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
html::-webkit-scrollbar-track {
    background: linear-gradient(90deg,#f2f2f2,#fff 1px,#ddd 0,#f2f2f2);
}
html::-webkit-scrollbar {
    width: 10px;
    height:10px;
}

18、input[number]去掉箭头样式

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

19、ISO 8601 扩展格式时间转换成正常格式

例：‘2020-05-31T17:44:15.663’
filters: {
    date_all(value) {
      var d = new Date(value)
      var times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
      return times
    }
  }

20、双击向下滚动（定时器）

var currentpos, timer;
    function initialize() {
        timer = setInterval("scrollwindow()", 20);
    }
    function sc() {
        clearInterval(timer);
    }
    function scrollwindow() {
        window.scrollBy(0, 1);
    }
    $(function () {
        document.onmousedown = sc;
        document.ondblclick = initialize;
  
        $(window).keydown(function (e) {
            var c = e.keyCode;
            if (c == 37) {
                location.href = pre;
            } else if (c == 39) {
                location.href = nex;
            }
        });
    });