css 重置normalize.css

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */

/* Document ========================================================================== */

html {
    
 
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */
}
a{
    
  display: block;
}
/* Sections ========================================================================== */

/** * Remove the margin in all browsers (opinionated). */

body {
    
  margin: 0;
}

/** * Add the correct display in IE 9-. */

article, aside, footer, header, nav, section {
    
  display: block;
}

/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */

h1 {
    
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content ========================================================================== */

/** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */

figcaption, figure, main {
    
  /* 1 */
  display: block;
}

/** * Add the correct margin in IE 8. */

figure {
    
  margin: 1em 40px;
}

/** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */

hr {
    
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */

pre {
    
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics ========================================================================== */

/** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */

a {
    
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */

a:active, a:hover {
    
  outline-width: 0;
}

/** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */

abbr[title] {
    
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */

b, strong {
    
  font-weight: inherit;
}

/** * Add the correct font weight in Chrome, Edge, and Safari. */

b, strong {
    
  font-weight: bolder;
}

/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */

code, kbd, samp {
    
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/** * Add the correct font style in Android 4.3-. */

dfn {
    
  font-style: italic;
}

/** * Add the correct background and color in IE 9-. */

mark {
    
  background-color: #ff0;
  color: #000;
}

/** * Add the correct font size in all browsers. */

small {
    
  font-size: 80%;
}

/** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */

sub, sup {
    
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
    
  bottom: -0.25em;
}

sup {
    
  top: -0.5em;
}

/* Embedded content ========================================================================== */

/** * Add the correct display in IE 9-. */

audio, video {
    
  display: inline-block;
}

/** * Add the correct display in iOS 4-7. */

audio:not([controls]) {
    
  display: none;
  height: 0;
}

/** * Remove the border on images inside links in IE 10-. */

img {
    
  border-style: none;
}

/** * Hide the overflow in IE. */

svg:not(:root) {
    
  overflow: hidden;
}

/* Forms ========================================================================== */

/** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */

button, input, optgroup, select, textarea {
    
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/** * Show the overflow in IE. * 1. Show the overflow in Edge. */

button, input {
    
  /* 1 */
  overflow: visible;
}

/** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */

button, select {
    
  /* 1 */
  text-transform: none;
}

/** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */

button,
html [type="button"],
/* 1 */
[type="reset"], [type="submit"] {
    
  -webkit-appearance: button;
  /* 2 */
}

/** * Remove the inner border and padding in Firefox. */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    
  border-style: none;
  padding: 0;
}

/** * Restore the focus styles unset by the previous rule. */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    
  outline: 1px dotted ButtonText;
}

/** * Change the border, margin, and padding in all browsers (opinionated). */

fieldset {
    
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */

legend {
    
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */

progress {
    
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/** * Remove the default vertical scrollbar in IE. */

textarea {
    
  overflow: auto;
}

/** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */

[type="checkbox"], [type="radio"] {
    
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/** * Correct the cursor style of increment and decrement buttons in Chrome. */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    
  height: auto;
}

/** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */

[type="search"] {
    
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
    
  -webkit-appearance: none;
}

/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */

::-webkit-file-upload-button {
    
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive ========================================================================== */

/* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */

details,
/* 1 */
menu {
    
  display: block;
}

/* * Add the correct display in all browsers. */

summary {
    
  display: list-item;
}

/* Scripting ========================================================================== */

/** * Add the correct display in IE 9-. */

canvas {
    
  display: inline-block;
}

/** * Add the correct display in IE. */

template {
    
  display: none;
}

/* Hidden ========================================================================== */

/** * Add the correct display in IE 10-. */

[hidden] {
    
  display: none;
}

a {
    
  text-decoration: none;
  color: #333;
}

html {
    
  color: #000;
  background: #fff;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%
}

html * {
    
  outline: 0;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html, body {
    
  font-family: sans-serif
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    
  margin: 0;
  padding: 0
}

input, select, textarea {
    
  font-size: 100%
}

table {
    
  border-collapse: collapse;
  border-spacing: 0
}

fieldset, img {
    
  border: 0
}

abbr, acronym {
    
  border: 0;
  font-variant: normal
}

del {
    
  text-decoration: line-through
}

address, caption, cite, code, dfn, em, th, var {
    
  font-style: normal;
  font-weight: 500
}

ol, ul {
    
  list-style: none
}

caption, th {
    
  text-align: left
}

h1, h2, h3, h4, h5, h6 {
    
  font-size: 100%;
  font-weight: 500
}
input{
    
	display:block;
	border: none;
  outline: none;
}

透明度兼容

	 filter:alpha(opacity=30); 

css一个元素盖住的下面那层模糊

backdrop-filter: blur(20px);

获取非行内的样式

var allStyle=getComputedStyle('box');
allStyle.width
绑定事件兼容处理
		function addMyEvent(obj,event,fn){
    
			if(obj.addEventListener){
    
				//判断对象有没有addEventListener
				obj.addEventListener(event,fn,false)				
			}else{
    
				//ie低版本
				obj.attachEvent('on'+event,fn)
			}
		}
		addMyEvent(box,'click',my)

颜色随机

function randomColor(){
    
	var r=Math.round(Math.random()*255); 
	var g=Math.round(Math.random()*255);
	var a=Math.round(Math.random()*255);
	return 'rgb('+r+','+g+','+a')'
}

解除绑定事件removeEvent

function removeEvent(obj,event,fn){
	if(obj.removeEventListener){
		//判断对象有没有addEventListener
		obj.removeEventListener(event,fn,false)				
	}else if(obj.detachEvent){
		//ie低版本
		obj.detachEvent('on'+event,fn)
	}
}

封装函数实现获取一个对象的非行间样式，并且保证兼容性

		function getStyle(obj.attr){
    
			//获取谁的属性：obj
			//获取什么属性：attr
			//判断浏览器是否支持getComputedStyle
			if(window.getComputedStyle){
    
				return window.getComputedStyle(obj,null)[attr];
			}else{
    
				//ie低版本方法
				return obj.currentStyle[attr]
			}
		}
/// 事件兼容写法
			  box.onclick = function (e){
    
			         //兼容写法
			         e = e || window.event
			   }

onscroll滚动条

	var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

阻止浏览器默认行为兼容性写法

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

阻止冒泡写法

event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

鼠标右键

document.oncontextmenu=function(){};

滚轮事件

		ie/chrome : onmousewheel
		ie/chrome : event.wheelDelta
			向上滚动返回值大于0，向下滚动返回值小于0
		firefox : DOMMouseScroll 必须用addEventListener
		document.addEventListener('DOMMouseScroll',fn,false);			
		firefox : event.detail
			向上滚动返回值小于0，向下滚动返回值大于0

滚动条平滑滚动到某个位置

window.scrollTo({
    
					left:0,
					top:div1s[this.index].offsetTop,
					behavior:"smooth"
				})

判断一个元素是否在可视区显示

可视区高度+滚动条高度>元素的offsetTop;

跨页面传值encodeURI(),decodeURI()编码，解码

var a=decodeURI(location.search);
function my(a){
	var obj={};
	var b=a.slice(1);
	var c=b.split('&');
	for(var i=0;i<c.length;i++){
		var d=c[i];
		var f=d.split('=');
		obj[f[0]]=f[1];]
	}
	return obj		
}
my(a)

跨页面传多个值，转对象

var str=‘?name=张三&age=12&city=北京&name=王五&age=18&city=上海’;
var str2=str.slice(1);
var arr=str2.split(‘&’);
var arr0=[];
for(var i=0;i<arr.length;i++){
var obj={};
while(arr.length>0){
var b=arr.splice(0,3);
for(var z=0;z<b.length;z++){
var c=b[z].split(‘=’);
obj[c[0]]=c[1];
}
arr0.push(obj);
obj={};
}

	}
	console.log(arr0)	

js将秒转化为时分秒

			function formatSeconds(value) {
    
　　let result = parseInt(value)
　　let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
　　let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60))
　　let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
　　result = `${
      h}:${
      m}:${
      s}`
　　return result
}

判断鼠标是否暂停

 (function(){
    
    let isMove = false,
        timer = null;
    window.onmousemove = function(){
    
        isMove = true;
        clearTimeout(timer);
        console.log(isMove); // 移动时
        timer = setTimeout(function(){
    
            isMove = false;
            console.log(isMove); // 静止后
        },200);
    }
}());

ajax封装函数

function ajax(options){
    
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
    
        xhr = new XMLHttpRequest()
    } else {
    
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if(options.type ==  "GET"){
    
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
    
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
    
        if(xhr.readyState == 4 && xhr.status == 200){
    
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
    
        var arr = [];
        for(var prop in data){
    
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
 
}

ajax({
    
    url : "http://localhost:8082/Ajax/my4.json",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步：false，异步：true 
    data : {
            //传入信息
        name : "张三",
        age : 18
    },
    success : function(data){
       //返回接受信息
       var a=JSON.parse(data);
		console.log(a);
		
    }})

ajax jq

$(function(){
//请求参数

$.ajax({           
    type : "POST",//请求方式
    cache:true,//开启缓存 缓存问题用随机数解决
    async:true,//是否异步请求        
    contentType: "application/x-www-form-urlencoded; charset=utf-8",   //请求的媒体类型           默认是："application/json;charset=UTF-8"
    url : "http://127.0.0.1/admin/list/", //请求地址
    //数据，json字符串
    dataType:"json",
    data : JSON.stringify({
    	
    }),
    success : function(result){//请求成功
        console.log(result);//已经转换成对象了
	},
    error : function(e){  //请求失败，包含具体的错误信息
        console.log(e.status);
        console.log(e.responseText);
    },
    beforeSend:function(){},//ajax请求之前执行
    complete:function(){ },//Ajax请求完成后执行
});

});

cookie设置

		//获取cookie函数封装 参数为想要获取的cookie的名字
		function getCookie(cname){
    
			  var name = cname + "=";
			  var ca = document.cookie.split(';');
			  for(var i=0; i<ca.length; i++) 
			  {
    
			    var c = ca[i].trim();
			    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
			  }
			  return "";
			}
	
		//设置cookie，三个参数，第一个参数cookie的名字，第二个参数是cookie的值，第三个参数是过期时间
		function setCookie(cname,cvalue,exdays){
    
			  var d = new Date();
			  d.setTime(d.getTime()+(exdays*24*60*60*1000));
			  var expires = "expires="+d.toGMTString();
			  document.cookie = cname + "=" + cvalue + "; " + expires;
        }
		//删除cookie 一个参数，是想要删除的cookie的名字 
		function removeCookie(name){
    
			var d=new Date()
			d.setDate(d.getDate()-1)
			document.cookie=name+"=1;expires="+dnjn
		}


//发送
 cookie.setCookie('token',a.data.token);
//获取
 var num=cookie.getCookie('token');
 
 
 

防抖:事件多次出发后,只执行最后一次.利用计时器,当再次点击的时候,会从新计时

 aBtn.onclick = function(){
    
        fn1.call(this)//可以更改this指向
         // fn1（）或者直接调用
     }
 var fn1=debounce(function () {
    
         console.log(111111)//这里也可以写ajax请求
     }, 1000)
//防抖函数封装
function debounce(fun,wait){
    
    var timer=null; 
    return function(){
    
        console.log(this)//可以由外面更改this指向
        clearInterval(timer)
        timer=setTimeout(function(){
    
          fun()
        },wait)
    }
}

节流: 事件多次出发后,一定时间内只执行一次

	function debounce(fun,wait){
    
  var flag=true; 
  return function(){
    
    if(flag){
    
    setTimeout(function(){
    
        fun()
        flag=true
      },wait)
      flag=false
    }
  }
}

文本内容可编辑

1111111

网页切换过程中运动函数setinterval

思路：如果页面是不可见的，那么我们就会清除定时器，如果页面是可见的，那么我们就重新开启定时器。
所以我们需要用document.onvisibilitychange进行监听，然后用document.visibilityState或者是document.hidden进行判断。
document.onvisibilitychange=function(){ if(document.visibilityState==“visible”){ timer=setInterval(slidemove, 1000); }else{ clearInterval(timer); } }

媒体查询

//当屏幕最小宽度为992px
@media screen and (min-width : 992px) {
body {
background-color: red;
}
}
//当屏幕宽度 最小为768px 最大为991px时
@media screen and (min-width:768px) and (max-width:991px) {
body {
background-color: blue;
}
}
//当屏幕最大宽度为767px
@media screen and (max-width:767px) {
body {
background-color: green;
color: #00a;
}
}

网络状态

console.log(window.navigator.onLine)/true/false
online（）有网的时候
offline（）断开时候调用

全屏显示

//准备一个按钮

	<button onclick="handleFullScreen()">全屏</button>


//document.isFullScreen检测当前是否处于全屏
	//定义一个变量进行判断，默认false 非全屏状态
    let exitFullscreen = false
    // 全屏事件
    function handleFullScreen(){
    
        let element = document.documentElement;
        if (this.fullscreen) {
    
            if (document.exitFullscreen) {
    
                document.exitFullscreen();
            } else if (document.webkitCancelFullScreen) {
    
                document.webkitCancelFullScreen();
            } else if (document.mozCancelFullScreen) {
    
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
    
                document.msExitFullscreen();
            }
        } else {
    
            if (element.requestFullscreen) {
    
                element.requestFullscreen();
            } else if (element.webkitRequestFullScreen) {
    
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
    
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
    
                // IE11
                element.msRequestFullscreen();
            }
        }
    }

fetch请求,用来解决ajax的回调地狱

let options = {
method:“post”,
body:JSON.stringify({name:“lhy”,content:“hello”}), // 这里传入的数据类型必须和下面content-type的类型一致
cache:‘reload’, // 表示请求时忽略http缓存，但是请求完成后会刷新http缓存
credentials:‘include’, // 表示请求携带cookie等信息
headers:{
‘Token’:“lhytest”, // 用于设置请求头
‘content-type’: ‘application/json’ // 设置发送的数据类型
}
};
fetch(‘http://localhost/Api’,options).then(function (response) {
return response.json()
}).then(function (data) {
console.log(data);
document.getElementsByTagName(‘p’)[0].innerText = data.meta.token;
}).catch(function (error) {
console.log(error);
})

递归

function my(n){
    
		if(n<2){
    
			return 0
		}
		if(n==2){
    
			return 2
		}else{
    
		return my(n-1)+n	
		}
		
	}
	my(3)

判断俩对象是否相等

const isObjectEqual = (obj1, obj2) => {
let o1 = obj1 instanceof Object;
let o2 = obj2 instanceof Object;
if (!o1 || !o2) { // 如果不是对象 直接判断数据是否相等
return obj1 === obj2
}
// 判断对象的可枚举属性组成的数组长度
if (Object.keys(obj1).length !== Object.keys(obj2).length) {
return false;
}
for (let attr in obj1) {
let a1 = Object.prototype.toString.call(obj1[attr]) == ‘[object Object]’
let a2 = Object.prototype.toString.call(obj2[attr]) == ‘[object Object]’
let arr1 = Object.prototype.toString.call(obj1[attr]) == ‘[object Array]’
if (a1 && a2) {
// 如果是对象继续判断
return isObjectEqual(obj1[attr], obj2[attr])
} else if (arr1) {
// 如果是对象 判断
if (obj1[attr].toString() != obj2[attr].toString()) {
return false;
}
} else if (obj1[attr] !== obj2[attr]) {
// 不是对象的就判断数值是否相等
return false
}
}
return true
}

秒杀倒计时

function getTimer(){
    
    //获取当前开始时间
    var nowTime =new Date();
    //获取截至时间
    var endTime = new Date('2021/11/16 10:00:00');
    //分别获取时间戳(毫秒数)，得到两个时间段之间的时间差
    var now = nowTime.getTime();
    var end = endTime.getTime();
    var diff = end-now;
    var t=null;//存放定时器
   if(diff>=0){
    
        //定义四个变量用来存放天、时、分、秒 d\h\m\s
        var d =Math.floor(diff/1000/60/60/24);
        var h =Math.floor(diff/1000/60/60%24);
        var m =Math.floor(diff/1000/60%60);
        var s =Math.floor(diff/1000%60);
        d = d < 10 ? '0' + d : d;
        h = h < 10 ? '0' + h : h;
        m = m < 10 ? '0' + m : m;
        s = s < 10 ? '0' + s : s;
        document.getElementById('timer2').innerHTML=d+'天'+h+'时'+m+'分'+s+'秒';
        t=  setTimeout(getTimer,1000);
   }else{
    
       clearTimeout(t);
       document.getElementById('timer2').innerHTML='00天'+'00时'+'00分'+'00秒';
   }
}

输入时间倒计时

btn.onclick=function(){
    

var year = Number(document.getElementById('year').value);
 var month = Number(document.getElementById('month').value)-1;
 var day = Number(document.getElementById('day').value);
 var hour = Number(document.getElementById('hour').value);
 var minute = Number(document.getElementById('minute').value);
 var second = Number(document.getElementById('second').value);

 var nowYear = new Date().getFullYear();
 var nowMonth = new Date().getMonth();
 var nowDay = new Date().getDate();
 var nowHour = new Date().getHours();
 var nowMinute = new Date().getMinutes();
 var nowSecond = new Date().getSeconds();


 if(year<nowYear || (month<nowMonth && month>12 && month<0) || (day<nowDay && day<0 && day>31) || (hour<nowHour && hour>60 && hour<0) || (minute<nowMinute && minute>60 && minute<0) || (second<nowSecond && second>60 && second<0)){
    
    alert('请输入大于当前的时间，并且是有效时间数字');
     return false;
 }

  if(timer) clearInterval(timer);
  timer = setInterval(function(){
    
   var time  =  parseInt((new Date(year,month,day,hour,minute,second).getTime() - new Date().getTime())/1000);
    // // 2.26小时=2
    var oHour = parseInt(time/3600);      
    // //15.6分钟 = 15分钟
    var oMinute = parseInt((time %3600)/60);   
    // //36秒
    var oSecond = time  % 60;  
    text.innerHTML = '距离设定时间还有'+oHour+'小时'+oMinute+'分钟'+oSecond+'秒';
  },1000)
}

面向对象选项卡

var that//声明全局变量存储this
		class Tab{
    
			constructor(id){
    
				that=this//保存this
				this.main=document.querySelector(id);
				this.lis=this.main.querySelectorAll('li');
				this.sections=this.main.querySelectorAll('.box')
				this.add=this.main.querySelector('.add')
				this.ul=this.main.querySelector('ul:first-child')
				this.init()
			
			}
			//初始化操作，相关元素绑定元素
			init(){
    
				this.updateNode()
				this.add.onclick=this.addTab
				for(let i=0;i<this.lis.length;i++){
    
					this.lis[i].index=i
					this.lis[i].onclick=this.taggleTab					
				}
				
			}
			clearClass(){
    //清除lis和box的类名
				for(let z=0;z<this.lis.length;z++){
    					
					this.lis[z].classList.remove('active1')
					this.sections[z].classList.remove('active2')
				
			}}
				//获取所有的li和section
				updateNode(){
    
					this.lis=this.main.querySelectorAll('li')
					this.sections=this.main.querySelectorAll('.box')
				}
			//1.切换功能
			taggleTab(){
    				
				that.clearClass()
				this.classList.add('active1')
				that.sections[this.index].classList.add('active2')//that 指向construction的this
			}
			//2.添加功能
			addTab(){
    
				that.clearClass()
				
				//(1)创建li和section元素
				//(2)追加到父元素
// var li=`<li>new</li>`
// that.ul.insertAdjacentHTML('beforeend',li)
				var b=document.createElement('div');
				b.classList.add('box')
				b.classList.add('active2')
				b.innerHTML='new'
				that.main.appendChild(b)
				var a=document.createElement('li')
				a.innerHTML='1'
				a.classList.add('active1')
				that.ul.appendChild(a)
				that.init()
			}
			//3.删除功能
			removeTab(){
    }
			//4.修改功能
			editTab(){
    }
		}
		new Tab('.div')
		

数组去重filter 过滤出第一次出现的位置和当前位置相等的元素

var aaa = [1, 2, 4, 5, 3, 2, 1, 1] var bbb = aaa.filter((item, index) => {
    
        return aaa.findIndex(item2 => item2 === item) === index
    })

知道角度求弧度

（45*Math.PT）/180

数组排序

	function sortNumber(a,b){
    return a - b};
	console.log(arr.sort(sortNumber));
	console.log(arr);//会改变原来数组

数组拍平

arr.flat(Infinity)

取出数组中每个对象的某个值

let list=[{
    name:'a',time:[1,2]},{
    name:'b',time:[3,4]},{
    name:'c',time:[5,6 ]}]
let timeArr=[]
list.forEach(i => timeArr = [...timeArr, ...i.time]);