前端基础js css

已于 2024-05-10 15:58:24 修改
阅读量156 收藏
点赞数
文章标签： css css3 html
于 2022-06-08 10:19:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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}$/

弹性布局 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=====================================================*/
白图裘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端基础入门教程HTML+CSS+JavaScript
BYGFJ的博客
11-19 1406
每一个学习前端的人对于前端三剑客《html+css+JavaScript》都不会陌生，可以说这是前端的世界，就没有前端解决不了的，而在前端的世界里就没有javascript实现不了的。 关于JavaScript有一句话：凡是可以用javascript来写的应用，最终都会用javascript，javascript可运行在所有的主要平台上，也可以运行在每一个主流操作的服务器上。现如今我们在网站写任何一个主要功能的时候都需要有懂够用JavaScript写前端的开发人员。 下面我们就来了解下这三门技术都有什么
前端 js html css 基础教程
08-17
本书为电子版,任何终端下阅读, 欢迎大家下载阅读~~~~~~
前端js，css效果，实用代码
ZLNEWCSDN的博客
11-16 600
特效效果https://blog.csdn.net/m0_37809478/article/details/76619207 阿里云特大优惠活动链接：https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=bsu7swvn 阿里云双十二优惠活动：https://m.aliyun.com/act/team1212?p...
前端知识大全之CSS（含有JS）
快乐学习
12-06 1252
一、概念讲解 学习CSS之前必学的HTML（超链接） 二、正文代码 1.行内样式 2.内部样式（选择器） 3.外部样式 4.样式的优先级 5.简单选择器之定义单个标签（id） 6.简单选择器之定义多个标签（class） 7.简单选择器之全部选择(*) 8.组合选择器（div 标签） 9.选择器之鼠标行为（link、visited、hover、active） 10.伪元素选择器 11.属性选择器（精确查找） 12.文本大小写的转换与颜色设置（transform）
前端学习总结(CSS、JS)
weixin_40885337的博客
02-25 188
CSS(层叠样式表) CSS样式： 内嵌样式： 内部样式：写在html文件style标签中 外部样式：写在css文件中，使用link标签来引入 CSS选择器： 基本选择器 通用选择器 标签选择器 类选择器 id选择器 优先级：ID选择器->类选择器->标签选择器->通用选择器 组合选择器 多元素选择器 p,div {font-size:14px; color:bl...
前端js中修改css样式
个人笔记
03-09 726
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #one{ width: 200px; height: 200px; background-color: gold; } </style> </head> &l
五分钟了解前端基础(HTML/CSS/JavaScript/jQuery)
不断努力的数据汪
06-04 4949
我觉得前端是一个很有意思的东西,它可以让我们直观的看到效果,如果我们的脑洞足够大,它做成我们想要的样子,作为零基础学习前端的码农,这里想跟大家分享一下自己学习的心路历程,前端是什么?以前觉得前端就是我们在页面所能看到的东西,正式接触了几个月后才明白前端的高深莫测,前端,现在不仅仅只是制作网页,在论坛里听一些大牛谈论,怎么又JavaScript写服务器....作为一个菜鸟,就不想那么深远了,先学习怎...
前端js+css表格自动滚动播放-方法
zf2451597310的博客
11-28 1580
背景：项目是做大屏需要在表格上做一些表格实时滚动播放，这时候以下可以快速帮你实现此功能，话不多说，直接展示~css最好将表格的overflow设置为hidden以上就可以做出表格自动滚动的效果啦。注意：#project_table_tbody是我命名的table的名字。
前端垫片polyfill（js+css）
weixin_46759393的博客
02-20 1492
前端垫片polyfill（js+css） 文章目录前端垫片polyfill（js+css）前言一、js垫片集成二、css垫片集成三、package.json集成browserslist 前言 开发时我们会使用一些新的 api，但用户的浏览器各种版本都有，可能并不支持这些 api，但我们也不能因此就不用了，这时候就可以通过 polyfill 来解决。 一、js垫片集成 @babel/preset-env 二、css垫片集成 postcss-preset-env 三、package.json集成brow
前端 css + js 预约列表
随风潜入夜，不白头
01-19 1159
序：预约一个星期的数据，比如当天是19号，预约时间从明天开始计算，其实也可以从后端写计算好的数据返回，前端只负责渲染就行 图： 内容： <style> .date_picker{background-color:#fff;margin-bottom: 30px;} .date_picker_tle{font-size:1.6em;font-weight: bold;text-align: center;margin-bottom: 15px;font-famil.
旅游网站前端 JavaScript+css
06-09
web课程设计，完整的旅游网站页面，包含登录，首页，购物车，订单及资讯页面JavaScript+css实现，适用于大学生课程设计，毕业设计
前端基础三剑客HTML，css，js
04-21
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现UI/UX设计的各种效果，从而让用户获得更好的使用体验。它主要负责页面的展示样式...
前端学习 html css js 算法.zip
01-05
前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js ...
前端基础知识(css+js+vue)概览
10-13
前端学习
css设置滚动条样式；滚动条设置透明
i_am_a_div的博客
06-12 262
css设置滚动条样式；滚动条设置透明
css实现多行文本的展开收起
我码玄黄的博客
06-12 1049
本文通过纯CSS实现多行文本展开收起效果，包括右下角环绕按钮、状态切换及文本行数判断。利用flex布局、input与label关联、伪元素生成等技术，解决展开收起按钮的显示与隐藏问题，实现动态高度和状态切换。
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 377
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
CSS 字体颜色渐变
最新发布
weixin_47981445的博客
06-13 162
CSS 字体颜色渐变，适配多端展示
【Css】纯css展开、收起超出的文本
此人太懒，没有任何简介
06-13 418
* 颜色必须与背景相同 *//* 超过的行数隐藏 *//* 和文本大小一样 */
web前端jsp js css
04-25
能否简单介绍一下它们各自的作用和关系？ 当我们在浏览器中输入一个网址时，...前端开发人员通常需要熟悉HTML、CSS和JS三种语言，以及一些框架和库，如Bootstrap、jQuery、Vue等，来开发出美观、交互丰富的网页应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值