查漏补缺（十）

查漏补缺（十）

颜色十六进制转换为rgb

使用match匹配出所有符合正则的内容

function transform(color){
	let reg = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/g
	let match = color.match(reg)
	return match ? 'rgb('+parseInt(match[1], 16)+','+parseInt(match[2], 16)+','+parseInt(match[3], 16)+')': color
}

扁平化数组

let list = [1,[[2],3,4],5]
list.flat(Infinity)

function myFlat(list){
	let arr = []
	list.forEach(item=>{
		if(Array.isArray(item)) arr = arr.concat(myFlat(item))
		arr.push(item)
	})
	return arr
}

function myFlat(list){
	list.reduce((prev, cur)=>{
		return prev.concat(Array.isArray(cur) ? myFlat(cur) : cur)
	},[])
}

function myFlat(list){
	while(list.some((item)=>Array.isArray(item))){
		list = [].concat(...list)
	}
	return list
}

function myFlat(list){
	return list.toString().split(',')
}

获取数组的并集

//思路是先将所有传入的参数都扁平化放到一个数组里面，然后对这个数组进行去重
function union(){
	let arr = []
	for(let i=0; i<arguments.length; i++){
		if(Array.isArray(arguments[i])) return
	}
//扁平化
	for(let i=0; i<arguments.length;i++){
		arr = arr.concat(arguments[i].flat(Infinity))
	}
//数组去重
	return arr.reduce((prev, cur)=>{
		prev.indexOf(cur) == -1 && prev.push(cur)
		return prev
	},[])
}

倒计时

window.onload = function(){
	countDown()
	let timer = null
	function countDown(){
		let nowTime = new Date()
		let endTime = new Date('2023-03-12,00:00:00')
	//得到相减的时间戳，除以1000是把毫秒变成秒
		let distance = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
		let day = addZero(distance / (24*60*60))
		let hours = addZero(distance / 60 / 60 % 60)
		let mins = addZero(distance / 60 % 60)
		let seconds = addZero(distance % 60)
		if(distance<=0){
			clearInterval(timer)
			console.log('倒计时已结束')
			return
		}
		console.log('倒计时：', `${day}天${hours}小时${mins}分钟${seconds}秒`);
	}
	function addZero(time){
		return time<10 ? '0' + time : time
	}
	timer = setInterval(()=>{countDown()}, 1000)
}

数组去重，相同value的只保留最后一个

function unique(list){
    for(let i=0; i<list.length;i++){
        if(list.indexOf(list[i]) !== list.lastIndexOf(list[i])){
           list.splice(list.indexOf(list[i]), 1)
           i--
         }
       }
    return list
}

比较

//空数组被隐式转换为0
console.log(0 == []) //true

去掉字符串前后的空字符串

function myTrim(str){
    return str.split('').filter(item=> !(item==' '))
}

function myTrim(str){
	return str.trim()
}

function myTrim(str){
	let reg = /(^\s*)|(\s*$)/g
	return str.replace(reg, '')
}

找出字符串中不含有重复字符的 最长子串 的长度

function maxLength(str){
	let res = 0 //当前无重复子串长度
	let s = '' //无重复子串
	let len = str.length
	for(let i=0; i<len; i++){
		let char = str.charAt(i)
		let idx = s.indexOf(char)
		if(idx == -1){
			s += char
			res = res<s.length ? s.length : res
		}else{
			s = s.substr(idx+1) + char	
		}
	}
	return res
}

行内元素的margin、padding

margin、padding水平方向对行内元素都有效，垂直方向无效。padding的垂直方向虽然有效果，但是不会对周围元素有影响。

设置图片水平垂直居中

可以通过flex布局设置，但是flex布局不支持IE8、9

//table布局
<div class="box1">
	<div class="box2">
		<img src="" alt="" />
	</div>
</div>

.box1{
	width: 300px;
	height: 200px;
	border: 1px solid black;
	display: table;
}
.box2{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
img{
	width: 100px;
}

斑马线表格

核心代码就是tbody里的tr标签的子元素的even行设置背景颜色

<table>
  <caption>斑马线表格</caption>
  <tbody>
    <tr>
      <td>zzzz</td>
      <td>xxxx</td>
      <td>cccc</td>
    </tr>
    <tr>
      <td>aaaa</td>
      <td>ssss</td>
      <td>dddd</td>
    </tr>
    <tr>
      <td>rrrr</td>
      <td>ffff</td>
      <td>cccc</td>
    </tr>
    <tr>
    <td>vvvv</td>
    <td>gggg</td>
    <td>tttt</td>
    </tr>
  </tbody>
 </table>

table{
  /*表格的外边距和大小*/
  margin: 10px 0 0 0;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  /*collapse 表格单元格边框合并 
   border-spacing 表格单元格间距为零
  */
 }
 td{
  width: 32%;
  height: 50px;
  /*单元格大小*/
 }
 tbody td{
   border: 1px solid; /*表格主体的边框*/
 }
 tr:hover{
  background-color: #66D9EF !important;
  cursor: pointer; /*鼠标悬停在表格上时，表格的背景和鼠标的形状*/
 }
 table tbody tr:nth-child(even){
  background-color: gray;
  box-shadow: inset 0 5px rgba(255,255,255,0.5);
  /*even为偶数行 odd为奇数行
    设置表格的主体部分偶数行的样式
    shadow 阴影  inset将外部阴影改为内部阴影
  */
 }

九宫格

//flex版
<div class="content">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
 </div>

.content{
    display: flex;
    flex-wrap: wrap;
    width: 150px;
    height: 150px;
    box-sizing: border-box;
 }
 .box{
    width: 30%;
    border: 1px solid red;
 }

//grid版
.content{
    width: 150px;
    height: 150px;
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
 }

 .box{
    border: 1px solid red;
 }

画0.5px的直线

<div class="hr scale-half"></div>
.hr.scale-half {
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 50% 100%; //scale会导致Chrome变虚
}

.hr.gradient {
    height: 1px;
    background: linear-gradient(0deg, #fff, #000);
}

inear-gradient(0deg, #fff, #000)的意思是：渐变的角度从下往上，从白色#fff渐变到黑色#000，而且是线性的，在高清屏上，1px的逻辑像素代表的物理（设备）像素有2px，由于是线性渐变，所以第1个px只能是#fff，而剩下的那个像素只能是#000，这样就达到了画一半的目的。