前端常用点

前端h5代码
node_modules删除

npm install rimraf -g
rimraf node_modules

a标签点击下载

<a href="xxxx.jpg" download="文件名.jpg">点击下载</a>

list排序

var list = [{num:"3"},{num:"1"},{num:"2"}];
list.sort(function(a,b){
	return a.num-b.num
});
console.log(list);

拼接div的点击事件 加参数（"）

s += '<li class="ui-border-t" onclick="toList(&quot;'+data[i].userid+'&quot;)"></li>';

时间默认控件和选择框去掉倒三角

input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}
select{
  -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

兼容ie的颜色渐变

<svg>
		  <defs>
		    <linearGradient id="grad" x1="0%" y1="100%" x2="100%" y2="100%">
		      <stop offset="0%" style="stop-color:red; stop-opacity:1" />
		      <stop offset="100%" style="stop-color:green; stop-opacity:1" />
		    </linearGradient>
		  </defs>
		  <text x="0" y="26" fill="url(#grad)" style="font-size:26px">技术研发人员占比70%</text>
		</svg>

随机数 （30以内随机数）
Math.floor(Math.random() * 30)
css自定义动画效果

//使用
.App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
//定义动画效果
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

银行卡验证

https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=6225680421001165184&cardBinCheck=true

div平分

//多个item 来判断均分几分
<div class="box-bd">
	<div class="item">
		<div class="icon"><img src="img/xm.jpg"></div>
		<div class="text">信息通知</div>
	</div>
	<div class="item">
		<div class="icon"><img src="img/xm.jpg"></div>
		<div class="text">报备信息</div>
	</div>
</div>
//css
.box-bd {
				display: flex;
				flex-wrap: nowrap;
				flex-direction: row;
				justify-content: center;
			}

			.box-bd .item {
				flex: 1 1 auto;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: center;
				border-right: 1px solid #f1f1f1;
				margin: 15upx 0;
			}

			.item:last-child {
				border: none;
			}

			.box-bd .icon {
				width: 30px;
				height: 30px;
			}

			.box-bd .icon img {
				width: 100%;
				height: 100%;
			}

			.box-bd .text {
				width: 100%;
				text-align: center;
				margin-top: 5px;
			}

文本框隐藏光标

input{
	color:transparent;
	text-shadow:0 0 0 #000;
}

//滚动条样式
.tabbar-name::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}
.tabbar-name::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #fff;
    background: #fff;
}
.tabbar-name::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #fff;
    border-radius: 0;
    background: #fff;
}

//字体间距
letter-spacing:3px；

//字体颜色渐变
background: linear-gradient(to right,#002043,#0F9519);
-webkit-background-clip: text;/*按字体裁剪*/
-webkit-text-fill-color: transparent;/*设置字体透明*/

//设置rem 自适应
<div class="s" style="font-size: 1rem;">我可以改变大小</div>
<div class="s" style="font-size: 20px;color: red;">我是定死的不能改变</div>
$('html').css('font-size',$(window).width()/20+'px');
$(window).resize(function(){
	$('html').css('font-size',$(window).width()/20+'px');
})

占位符

  英文半角空格（可换行）

  ==   ==   == no-break space （普通的英文半角空格但不换行）

　 == 中文全角空格 （一个中文宽度）

  ==   == en空格 （半个中文宽度）

  ==   == em空格 （一个中文宽度）

  == 四分之一em空格 （四分之一中文宽度）

相比平时的空格（ ），&nbsp拥有不间断（non-breaking）特性。即连续的&nbsp会在同一行内显示。即使有100个连续的&nbsp，浏览器也不会把它们拆成两行。

// 剔除字符串英文
var str="da第三方士大夫sss看见了看见dfsdf";
var reg = /[a-zA-Z]/g;
console.log(str.replace(reg,""))

指定日期距离今日天数的计算

function getDate() {
    var s1 = 要计算的日期;
    s1 = new Date(s1.replace(/-/g, "/"));
    s2 = new Date();
    var days = s2.getTime() - s1.getTime();
    var time = parseInt(days / (1000 * 60 * 60 * 24));
}

div横向滚动

overflow-x: auto;white-space: nowrap;width:100px;

文字定义宽度 超出宽度变成…

white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden;width: 100px;

文字定义宽度和行数 超出两行的宽度变成…

width:200px;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;

div对角线

<th width="80">
		<div class="out">
				<b>型号</b> 
				<em>参数</em> 
		</div>
</th>
//css
.out {
  position:relative;
  width:80px;
  height:60px;
  box-sizing:border-box;
  z-index: 66;
}
.out:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:30px;
  box-sizing:border-box;
  border-bottom:1px solid #333;
  transform-origin:bottom center;
  transform:rotateZ(36deg) scale(1.28);
  animation:slash 5s infinite ease;
}
b {
  font-style:normal;
  display:block;
  position:absolute;
  top:0;
  left:40px;
  width:35px;
  z-index: 666;
}
em {
  font-style:normal;
  display:block;
  position:absolute;
  top:25px;
  left:10px;
  width:55x;
  z-index: 7777;
}

div背景颜色 渐变（变色）

//从上到下的线性渐变：
div {  
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ 
 background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */  
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */  
background: linear-gradient(red, blue); /* 标准的语法 */ 
}
从左到右的线性渐变：
div  {  
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */  
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ 
background: linear-gradient(to right, red , blue); /* 标准的语法 */ 
}
线性渐变 - 对角：
div {  
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */  
background: -moz-linear-gradient(bottom right, red, blue); /* 
Firefox 3.6 - 15 */  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
 }
颜色结点均匀分布的径向渐变：
div  {  
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */  
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */  
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ 
background: radial-gradient(red, green, blue); /* 标准的语法 */ 
}
颜色结点不均匀分布的径向渐变：
div {  
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ 
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */  
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */  
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */ 
}
形状为圆形的径向渐变：
div  {  
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */  
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */  
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */  
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
 }

字符串分割成数组 再排成字符串

var url = "www.sss.com";
url.split('.').reverse().join("");//把数组分割 倒序输出 comssswww   join是在分各种的字符加入元素
url.split('.').reverse().join("-");//把数组分割 倒序输出 com-sss-www   join是在分各种的字符加入元素
url.split('.').join("");//把数组分割 正序输出 wwwssscom  join是在分各种的字符加入元素
url.split('.').join("-");//把数组分割 正序输出 www-sss-com  join是在分各种的字符加入元素

input限制输入内容

//数字
<input type="text" name="" id="" value="" oninput = "value=value.replace(/[^\d]/g,'')"/>

chrome设置 音频自动播放 url打开chrome://flags/#autoplay-policy 第一个下拉框选择第二个值
div内容水平垂直居中

<div style="width: 285px;height: 200px;display: table-cell;vertical-align: middle;text-align: center;">
					123<br>12
				</div>

获取浏览器参数

//获取参数
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var r = window.location.search.substr(1).match(reg);
    if (r!=null) return (r[2]); return null;
}

file初始化

<input type="file" id="file" style="color: #fff;">
<button onclick="pp()">wwww</button>
//js
function pp(){
	var obj = document.getElementById('file'); 
	obj.outerHTML=obj.outerHTML;
}
//获取file标签内容
var obj = document.getElementById('file').files[0]

//代码
<div class="one">
				<div>小学三年级</div>
				<div>小学四年级</div>
				<div>小学五年级</div>
			</div>
			<div class="two">
				<div>社大版</div>
				<div>人教版</div>
				<div>人民版</div>
				<div>人教版</div>
			</div>
			
//css
.one{
	float: left;width: 100%;height: calc(100% - 55px);background: #840820;
	color: #fff;overflow: auto;
}
.one>div{
	padding: 15px 10px;overflow: hidden;
	white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;
}
.one>div.on{background: #fff;color:#840820}
.two{
	float: left;width: 0%;height: calc(100% - 55px);background: #740820;
	color: #fff;overflow: auto;display: none;
}
.two>div{
	padding: 15px 10px;overflow: hidden;
	white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;
}
.two>div.on{background: #fff;color:#740820}
//js
$('body').on('click','.one>div',function(){
	$('.one').css('width','50%')
	$('.two').animate({width: '50%'}).show();
	$('.three').css('width','0%').hide();
	$('.four').css('width','0%').hide();
	$(this).addClass('on').siblings().removeClass('on')
})
$('body').on('click','.two>div',function(){
	$('.one').css('width','33.33%')
	$('.two').css('width','33.33%')
	$('.three').animate({width: '33.33%'}).show();
	$('.four').css('width','0%').hide();
	$(this).addClass('on').siblings().removeClass('on')
})

highcharts 自定义提示

formatter:function(){
			console.log(this)
			var totle=0;
			$.each(this.points ,function(){
				totle+=this.y;
			});
			var s = '<b style="font-size: 12px;font-weight: bold">2019-'+this.x+'日当天共发生'+totle+'告警。其中</b>';
			// s+='近'+alarmShowTime+'天内发生'+this.points[0].total+'告警。其中';
			$.each(this.points ,function(){
				s += '<br /><span style="color:'+this.color+'">■</span><span>  ' + this.series.name + ':' + this.y+' 条</span>';
			});
			return s;
		},

table tr间距

table{border-collapse:separate; border-spacing:0px 10px;}

字体根据浏览器宽度大小改变

	   <div class="s" style="font-size: 1rem;">ssssssssadsad阿萨德撒</div>
		<div class="s" style="font-size: 1em;">ssssssssadsad阿萨德撒</div>
			$('html').css('font-size',$(window).width()/20+'px');
			$(window).resize(function(){
				$('html').css('font-size',$(window).width()/20+'px');
			})

字体根据浏览器宽度大小改变2

 (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 / 1125) + 'px';
			 		};
			 	if (!doc.addEventListener) return;
			 	win.addEventListener(resizeEvt, recalc, false);
			 	doc.addEventListener('DOMContentLoaded', recalc, false);
			 })(document, window);

多个相同的标签 点击变色

$('#classes_list .classes_type .layui-col-xs1').click(function(){
	$(this).addClass('active').siblings().removeClass('active');
})
等同于
$('#classes_list .classes_type .layui-col-xs1').click(function(){
	$('#classes_list .classes_type .layui-col-xs1').each(function(){
		$(this).removeClass('active');
	})
	$(this).addClass('active');
})

text placeholder 属性文字不在最左边
input::-webkit-input-placeholder {
padding: 5px;
}
input:-ms-input-placeholder {
padding: 5px;
}

text 光标不在最左边
style=“text-indent: 5px;”

鼠标移到标签0.5s向上移动效果
.f1list li { float: left; width: 20%; text-align: center; font-size: 21px; color: #666; transition:.5s;}
.f1list li:hover { margin-top: -10px;}

让底部浮窗在某一高度显示
$(window).scroll(function() {
var h = $(window).height();
var t = KaTeX parse error: Expected '}', got 'EOF' at end of input: … if(t > h/2) { (’.wxTel’).addClass(‘fixed’)}
else {$(’.wxTel’).removeClass(‘fixed’)}
});
.fixed { position: fixed; left: 0; bottom: 0; right: 0; z-index: 20;}

如果是td 的话 父级table 要加上 table-layout:fixed;才能生效

h5多个空格
（→　←）

select文字右对齐
 select {
    direction: rtl;
}
 select option {
    direction: ltr;
}

div不可点击
.noClick{pointer-events: none;}
鼠标移动到a放大图片  

sadasdsadsadsa

``` 不撑大div放大图片

<style type="text/css">
#div1{
  width: 200px;
  height: 138px;
  border: #000 solid 1px;
  margin: 50px auto;
  overflow: hidden;
}
#div1 img{
  cursor: pointer;
  transition: all 0.6s;
}
#div1 img:hover{
  transform: scale(1.4);
}
</style>
</head>
<body>
<div id="div1">
  <img src="demo.jpg" />
</div>

#page1 a:hover+img{transition: transform 300ms;transform: scale(1.2,1.2);}
鼠标放在a标签上 img会放大1.2倍
#page1 img:hover{transition: transform 300ms;transform: scale(1.2,1.2);}
鼠标放在图片上img放大1.2倍
标签+标签 在css中应该是代表同等级的下一个标签
+号代表兄弟标签本标签同级的下个标签

eval(’(’+str+’)’) 转为json格式

css图片垂直居中 让html img图片垂直居中的三种方法

1.flex
<div class="flexbox">
<img src="1.jpg" alt="">
</div>
body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}
2.  相对定位
<div class="posdiv">
<img src="1.jpg" alt="">
</div>
body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}
3.table
<div class="tablebox">
<div id="imgbox">
<img src="1.jpg" alt="">
</div>
</div>
.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}

calc() 函数用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；