前端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("'+data[i].userid+'")"></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空格 (四分之一中文宽度)
相比平时的空格( ), 拥有不间断(non-breaking)特性。即连续的 会在同一行内显示。即使有100个连续的 ,浏览器也不会把它们拆成两行。
// 剔除字符串英文
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放大图片
``` 不撑大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()函数使用标准的数学运算优先级规则;