前端基础js css

白图裘

已于 2024-07-08 09:36:21 修改

阅读量188

点赞数

文章标签： css css3 html

于 2022-06-08 10:19:01 首次发布

本文链接：https://blog.csdn.net/qq_35880671/article/details/125179113

版权

js格式化日期方法

/**
 * @param date
 * @param type{'yyyy-MM'|'yyyy-MM-dd'|'MM-dd'|'HH:mm'|'yyyy-MM-dd HH:mm'|'yyyy-MM-dd HH:mm:ss'}
 * @returns {string|number}
 */
export function mFormatDate(date, type) {
  if (!date) return ''
  var now = new Date(date);
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  switch (type) {
    case "MM-dd":
      return addZeroInFront(month) + '-' + addZeroInFront(day);
    case "HH:mm":
      return addZeroInFront(hours) + ":" + addZeroInFront(minutes)
    case "yyyy-MM":
      return year + '-' + addZeroInFront(month);
    case "yyyy-MM-dd":
      return year + '-' + addZeroInFront(month) + '-' + addZeroInFront(day);
    case "yyyy-MM-dd HH:mm":
      return year + '-' + addZeroInFront(month) + '-' + addZeroInFront(day) + " " + addZeroInFront(hours) + ":" + addZeroInFront(minutes);
    case "yyyy-MM-dd HH:mm:ss":
      return year + '-' + addZeroInFront(month) + '-' + addZeroInFront(day) + " " + addZeroInFront(hours) + ":" + addZeroInFront(minutes)
        + ":" + addZeroInFront(seconds)
    default:
      return year

  }
}

export const addZeroInFront = function (e) {
  if (!e) return ''
  return (e + '').length === 1 ? '0' + e : e;
}

解决科学计数法

export const getFullNum = function (num) {
  //处理非数字
  if (isNaN(Number(num))) {
    return ''
  }
  // 没想到吧 我也没想到
  return Number(num);
}

自己平时写的全局方法的注释

/* @{list} 数据源。
 * @{code} id或者Code 即判断值。
 * @{codeField} id或者Code在数据数据源中对应的字段。
 * @{labelField} 想要获得的label、name在数据数据源中对应的字段。
 */
export const getLabelForCode = function (list, code, codeField, labelField) {
  if (!code) return '-'
  var idx = list.findIndex(item => item[codeField] == code)
  if (idx != -1) {
    return list[idx][labelField]
  } else {
    return code ? code : ''
  }
}

正则校验

密码正则校验 6-20位包含大小写字母符号

 var reg = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-zA-Z_])(?=.*[~!@#$%^&*()\-+={}[\]|\\:;"'<,>?/._])[\da-zA-Z~!@#$%^&*()\-+={}[\]|\\:;"'<,>?/._]{6,20}$/;
if (!this.user.newPassword.match(reg)) {
  this.$message.warning('密码强度不够(6-20位包含大小写字母符号)')
}else {
  //TODO 成功逻辑
}

限制四位数字

var reg = /^[0-9]{1,4}$/

最简单的手机号码验证正则表达式

var reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/

校验只能输入数字，且小数点后只能有1-2位，也可没有小数位

var reg = /^\d+(\.\d{1,2})?$/

弹性布局 flex

/*可以很方便的帮助我们横向或者纵向的布局排列*/
/*开启弹性布局*/
display:flex;
/*横向排列  开启弹性布局默认就是row 可写可不写*/
flex-direction: row;
/*换行属性 可选值wrap-reverse ...*/
flex-wrap: wrap;
/*纵向排列*/
flex-direction: column;
/*横向排列 管子元素横向位置 center left end ...*/
/*纵向排列 管子元素纵向位置 center left end ...*/
justify-content: center;
/*横向排列 管子元素纵向位置 */
/*纵向排列 管子元素横向位置 */
align-items: center;
/* 子元素在开启弹性布局的父元素中占比 */
flex：1;

grid 网格布局

没有描述

/* 开启表格布局 */
display: grid;
/* 设置每行每个元素的高度 不设置就是自适应 */
grid-template-rows:30px 30px 30px;
/* 设置每列每个元素的占比  设置多少个就是多少列  这里是3列 每列占33.3% */
grid-template-columns:33.3% 33.3% 33.3%;

js打开新窗口

//传值
window["m_params"] = {
     name:'小学生',
     age:13
 }
window.open("/xxxurl",'_blank')

//新界面js中接收  传值方式相当奇怪 看不懂 但是可以拿到值
 var getBoj = window.opener['m_params'];

时间相关

获取每个月多少天

new Date(year, month + 1, 0).getDate()

取前三个月时的时间

var today = new Date() //当天
today.setMonth(today.getMonth()-3)//三个月前，时间戳

当前月份季度获取

 var tempDate = new Date()
 var nowMonth = tempDate.getMonth() + 1
 var currQuarter = Math.floor( ( nowMonth % 3 == 0 ? ( nowMonth / 3 ) : ( nowMonth / 3 + 1 ) ) );

限制input只能输入数字跟点

//只是数字
oninput="value=value.replace(/[^\d]/g,'')"
//数字跟点
@keyup="value = value.replace(/[^\d.]/g,'')"

禁止文字的复制

.no_copy_no_hurt {
  -moz-user-select: none; /* Firefox私有属性 */
  -webkit-user-select: none; /* WebKit内核私有属性 */
  -ms-user-select: none; /* IE私有属性(IE10及以后) */
  -khtml-user-select: none; /* KHTML内核私有属性 */
  -o-user-select: none; /* Opera私有属性 */
  user-select: none; /* CSS3属性 */
  /*user-select属性设置或检索是否允许用户选中文本。
    user-select的默认值是 text：可以选择文本*/
}

echarts里面的百分比计算方式

var arr= [3,4,5]
getPercentValue(arr,0,2);//25
getPercentValue(arr,1,2);//33.33
getPercentValue(arr,2,2);//41.67
export function getPercentValue(arrList, index, precision) {
	// arrList要计算数据的数组
	// index要计算数组中值的下标
	// precision百分比保留几位小数，默认保留2位小数
	// 判断是否为空
	if (!arrList[index]) {
		return 0
	}
	if (!precision) precision = 2
	// 求和
	const sum = arrList.reduce(function(acc, val) {
		return acc + (isNaN(val) ? 0 : val)
	}, 0)
	if (sum === 0) {
		return 0
	}
	// 10的2次幂是100，用于计算精度。
	const digits = Math.pow(10, precision)
	// 扩大比例100，
	const votesPerQuota = arrList.map(function(val) {
		return ((isNaN(val) ? 0 : val) / sum) * digits * 100
	})
	// 总数，扩大比例意味的总数要扩大
	const targetSeats = digits * 100
	// 再向下取值，组成数组
	const seats = votesPerQuota.map(function(votes) {
		return Math.floor(votes)
	})
	// 再新计算合计，用于判断与总数量是否相同，相同则占比会100%
	let currentSum = seats.reduce(function(acc, val) {
		return acc + val
	}, 0)
	// 余数部分的数组：原先数组减去向下取值的数组，得到余数部分的数组
	const remainder = votesPerQuota.map(function(votes, idx) {
		return votes - seats[idx]
	})
	// 给最大最大的余额加1，凑个占比100%；
	while (currentSum < targetSeats) {
		//  找到下一个最大的余额，给其加1
		let max = Number.NEGATIVE_INFINITY
		let maxId = null
		for (let i = 0, len = remainder.length; i < len; ++i) {
			if (remainder[i] > max) {
				max = remainder[i]
				maxId = i
			}
		}
		// 对最大项余额加1
		++seats[maxId];
		// 已经增加最大余数加1，则下次判断就可以不需要再判断这个余额数。
		remainder[maxId] = 0;
		// 总的也要加1，为了判断是否总数是否相同，跳出循环。
		++currentSum;
	}
	// 这时候的seats就会总数占比会100%
	return seats[index] / digits
}

全局修改element中元素的样式(慎用，会出现各种污染。scss)

$myBgColor: #0A1341;
$myFontColor: rgba(255, 255, 255, 0.8);
//$myGrayColor: #2f4f4f;
$myGrayColor: #808080;

/*========================================================start====================================================*/

.el-table, .el-table__expanded-cell {
  background-color: transparent !important;
  color: $myFontColor;
}

.el-table th, .el-table tr {
  background-color: transparent !important;
  color: $myFontColor !important;
}

/* 用来设置当前页面element全局table 各行变色*/
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: $myFontColor !important;
}

/* 用来设置当前页面element全局table 各行变色*/
.el-table--striped .el-table__body tr.el-table__row--striped:hover td.el-table__cell {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: #1890ff !important;
}

/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: #1890ff !important;
  /* 设置文字颜色，可以选择不设置 */
}

// 鼠标悬停样式
.el-table__body .el-table__row.hover-row td {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: #1890ff !important;
}

//table 边框颜色
.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
  border-bottom: 1px $myGrayColor solid !important;
}

.el-table--border .el-table__cell {
  border-right: 1px $myGrayColor solid !important;
}

.el-table--group, .el-table--border {
  border: 1px $myGrayColor solid !important;
}

.el-table .el-table--border {
  border-right: 1px $myGrayColor solid;
  border-bottom: 1px $myGrayColor solid;
}

/* 表格下边框颜色 */
.el-table--border::after,
.el-table--group::after,
.el-table__fixed-right::before,
.el-table::before {
  background-color: transparent;
}

.table-no-right-border {
  .el-table tr th:last-child, td:last-child {
    border-right: none !important;
  }
}


.addBg {
  //background: #ecf0f3;
  //background: #e4eff7;
  //background: #3b75ec;
  background: $myBgColor !important;
  //background-size: cover;
}

.mPageFontColor {
  color: $myFontColor;
}

//分页控件 强行改动
.pagination-container {
  background: transparent !important;

  & .el-pagination__total {
    color: $myFontColor;
  }

  & .el-pagination__jump {
    color: $myFontColor;
  }
}

//input相关
.el-form-item__label {
  color: $myFontColor !important;
}

.el-input__inner {
  background: $myBgColor;
  color: $myFontColor !important;
  border: 1px $myFontColor solid !important;
}

//时间选择器
.el-picker-panel .el-input__inner {
  background: $myFontColor;
  color: rgba(0, 0, 0, 0.7) !important;
}

//时间选择区间 里面的背景、字体颜色
.el-input__inner .el-range-input {
  background: transparent !important;
  color: $myFontColor !important;
}

//分割符号的颜色
.el-input__inner .el-range-separator {
  color: $myFontColor !important;
}

.el-dialog {
  & .el-form-item__label {
    color: rgba(0, 0, 0, 0.7) !important;
  }

  & .el-input__inner {
    background: white;
    color: rgba(0, 0, 0, 0.7) !important;
    border: 1px #DCDFE6 solid !important;
  }

  //时间选择区间 里面的背景、字体颜色
  & .el-input__inner .el-range-input {
    background: white !important;
    color: rgba(0, 0, 0, 0.7) !important;
  }

  //分割符号的颜色
  & .el-input__inner .el-range-separator {
    color: rgba(0, 0, 0, 0.7) !important;
  }

  //dialog中的表格
  .el-table, .el-table__expanded-cell {
    background-color: #ffffff !important;
    color: rgba(0, 0, 0, 0.7) !important;
  }

  .el-table th, .el-table tr {
    background-color: #ffffff !important;
    color: rgba(0, 0, 0, 0.7) !important;
  }

}

.el-popover .icon-body {
  & .el-input {
    border: 1px #e6ebf5 solid;
  }

  & .el-input__inner {
    background-color: white !important;
    color: rgba(0, 0, 0, 0.7) !important;
  }
}

.m-login-style {
  & .el-form-item__label {
    color: rgba(0, 0, 0, 0.7) !important;
  }

  & .el-input__inner {
    background: white;
    color: rgba(0, 0, 0, 0.7) !important;
    border: 1px #DCDFE6 solid !important;
  }

  //时间选择区间 里面的背景、字体颜色
  & .el-input__inner .el-range-input {
    background: white !important;
    color: rgba(0, 0, 0, 0.7) !important;
  }

  //分割符号的颜色
  & .el-input__inner .el-range-separator {
    color: rgba(0, 0, 0, 0.7) !important;
  }

  & .el-tabs__header {
    .el-tabs__item {
      color: rgba(0, 0, 0, 0.7) !important;
    }

    .el-tabs__item.is-active {
      color: #1890ff;
    }
  }

}


.el-tree {
  background: transparent !important;
  color: $myFontColor !important;
}

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: whitesmoke !important;
  color: #330000;
}

.el-tree-node__content:hover {
  background-color: whitesmoke !important;
  color: #330000;
}

.el-scrollbar__wrap {
  overflow: auto !important;
}

.el-tabs__header {
  .el-tabs__item {
    color: $myFontColor;
  }

  .el-tabs__item.is-active {
    color: #1890ff;
  }
}

/* 侧边栏 顶部 各种样式修改 */
.topmenu-container {
  background-color: $myBgColor !important;

  .el-menu-item {
    color: $myFontColor;
  }
}

.el-menu .el-menu-item:hover {
  outline: 0 !important;
  color: #2E95FB !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.el-menu .el-menu-item.is-active {
  color: #2E95FB !important;
  background: transparent !important;
}

.el-submenu .el-submenu__title:hover {
  color: #2E95FB !important;
  background: transparent !important;
}

//更多菜单 样式修改
.el-menu--horizontal > .el-submenu .el-submenu__title {
  color: $myFontColor !important;
  background: transparent !important;
}

.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  color: #2E95FB !important;
  background: transparent !important;
}

.el-menu.el-menu--horizontal {
  border-bottom: none !important;
}

.el-textarea__inner {
  background-color: transparent;
  color: $myFontColor;
}

.el-card__body {
  background-color: $myBgColor;
}

/*=========================================================end=====================================================*/