前端查缺补漏——基础

页面跳转

// 跳转到其他页面
	window.location.href = '/';	// 值为要前往的地址,会覆盖当前页
	location='URL'"		//
	window.open('URL','_blank');" // 在新窗口打开
// 刷新当前页面
 	location.reload();

禁止浏览器自动填充已保存的密码

1、在input输入框中加入 autocomplete 字段，值的话new-‘自定义’（火狐浏览器会失效）
2、在代码中写入一个和真正密码输入框同样name的input，并设置为display：none；

 // 方法1
 <input type="password" name="new-password" autocomplete="new-password">
 // 方法2
  <input type="password" name="new-password" style="display:none">
 <input type="password" name="new-password" autocomplete="new-password">

获取时间

 	var date = new Date();	// 创建一个时间对象
 	var timestamp = date.getTime(); 	//获取当前时间戳
    var thisYear = date.getFullYear(); // 当前的年份
    var thisMon = date.getMonth()+1; // 当前的月份，因为getMonth从0开始算1月份
    var thisDay = date.getDate(); // 当前的月份
   	// 每个月中最大的天数
   	function getMaxDay(year,month) {
   		// 如果是今年的当前月份则只返回当天
      if(year === thisYear&& month === thisMon) {
          return thisDay
      }
      const new_date = new Date(year, month, 1); // 拿到下个月的第一天，因为前面已经将月份+1
      return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate()	// 获取时间戳减去1天的时间
    } 
    getMaxDay(thisYear,thisMon)

罩层

弹窗罩层

.common-dialog-mask {
    position: fixed;	// 浏览器固定定位
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
// 当前页面有滚动条时，需要js修改overflow属性为hidden 防止弹窗可以滚动；

懒加载

圆圈懒加载，包裹着com-loading的类必须要有长跟宽

/* loading 样式 */
.com-loading {
    width: 100%;
    height: 100%;
    position: relative;	// 相对定位
}
.com-loading::after{	// 元素伪类来编写圆圈
    position: absolute;	// 绝对定位
    top: calc(50% - 15px);	// 获取父级百分之50的宽度减去圆圈的半径（div的宽）让元素自动居中，calc会自动计算
    left: calc(50% - 15px);	
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #ccc;		// 边框底色
    background: hsla(0,0%,100%,.9);		// 背景颜色为白色
    border-top: 3px solid #EB630C;		// 其中一边高亮
    animation: loading-360 0.8s infinite linear; 	// 加上动画效果，使圆圈动起来（参数1为动画名，2：动画完成总时间，3：播放次数，4：播放次数）
}
@keyframes loading-360 {    
    0% {        
        transform: rotate(0deg); /*动画起始的时候旋转了0度*/    
    }    
    100% {       
         transform: rotate(360deg); /*动画结束的时候旋转了360度*/    
    }
}

实现复制功能

		// 点击按钮获取input里的值
		 <input type="text" name='invitationLink' readonly value='11'/>
         <button onclick='copyLink()'>复制链接</button>
		// 选择input 的值
		$("input[name='invitationLink']").select();
		// 触发浏览器复制的功能
        document.execCommand("Copy");

获取鼠标选择的元素

window.getSelection().toString();

您可以使用CSS为选定的文本设置样式：

::selection {
background: cyan;
}