BOM 方法

@Methods

更多 window 方法，请访问 window - methods

资源获取 fetch()

.资源获取

.更多信息，请访问 window - fetch

响应媒体查询 matchMedia()

检测当前浏览器窗口是否匹配某个CSS媒体查询的函数

返回一个 MediaQueryList 对象；该对象包含一个 matches 属性，表示媒体查询是否与当前窗口大小匹配

可以通过监听 MediaQueryList 对象的 change 事件来响应窗口大小的变化，或者直接检查 matches 属性来获取当前状态

定义媒体查询

let mediaQuery = window.matchMedia("(max-width: 768px)");

监听媒体查询的变化

mediaQuery.addListener(handleMediaChange);

自定义处理函数

    function handleMediaChange(e){
      if (e.matches) {
        // less than or equal to 768px
        // 媒体查询匹配
      } else {
        // wider than 768px
        // 媒体查询不匹配
      }
    }

定时器 Timer

.window的方法；高频使用

.可以定时触发，也可以延迟触发；时间单位是毫秒；需要执行的业务以回调函数 callback 的形式给出

.为节省系统开销，业务处理完毕应及时清除定时器；需指定 id

类别	说明
setInterval()	按照时间间隔定时执行
clearInterval()	清除定时器
setTimeout()	延迟执行；仅执行1次
clearTimeout()	清除延迟

//固定时间间隔触发函数：setInterval
let timeId = setInterval(cb, [time]);
clearInterval(timeId)

//定时/延迟触发函数：setTimeout
let timeId = setTimeout(cb, [time]);
clearTimeout(timeId)

[] 数字时钟

. 原生实现

. momentjs实现

let week_arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
let year = document.querySelector('#yy');
let mon = document.querySelector('#mon');
let day = document.querySelector('#day');
let week = document.querySelector('#week');
let timerTxt = document.querySelector('.timer-txt');
let inter = setInterval(clock, 1000)
function clock() {
  let date = new Date();
  year.innerHTML = date.getFullYear();
  mon.innerHTML = date.getMonth() + 1;
  day.innerHTML = date.getDate();
  week.innerHTML = week_arr[date.getDay()];
  timerTxt.innerHTML = double2(date.getHours()) + ':' + double2(date.getMinutes()) + ':' + double2(date.getSeconds());
}
function double2(num) {
  return num > 9 ? num : '0' + num;
}
clock();

[] 图片时钟

. 通过更改<img>的src切换图片

. 不断向服务器请求图片

time.split('').forEach((num, ind) => {
  imgs[ind].style.backgroundImage = `url(../imgs/number/number-${num}.png)`;
})

[] 更多数字时钟案例 Clock、Clock、Clock - CodePen

.clock div::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.hour::before {
  width: 4px;
  margin-top: 30%;
  height: 25%;
  background-color: #000;
}

.min::before {
  width: 2px;
  margin-top: 20%;
  height: 35%;
  background-color: #ff0;
}

.sec::before {
  width: 1px;
  margin-top: 10%;
  height: 45%;
  background-color: #fff;
}

let date, h, m, s;
let oHour = document.querySelector('.hour');
let oMin = document.querySelector('.min');
let oSec = document.querySelector('.sec');
function getTime() {
  date = new Date();
  h = date.getHours() * 30;
  m = date.getMinutes() * 6;
  s = date.getSeconds() * 6;
  oHour.style.transform = `rotateZ(${h + m / 12}deg)`;
  oMin.style.transform = `rotateZ(${m}deg)`;
  oSec.style.transform = `rotateZ(${s}deg)`;

}
getTime();
let tId = setInterval(getTime, 1000);

[] 日期倒计时

距离2024-12-31 00:00:00还有
天小时分钟秒

[] 秒表倒计时

10
10秒倒计时

样式

getComputedStyle(el)

获取元素定义的所有样式声明 CSSStyleDeclaration ，甚至是复合样式

.box {
  width: 320px;
  height: 180px;
  margin: 0 auto;
  background-color: #f40;
}

let box = document.querySelector('.box');
console.log(getComputedStyle(box));//所有的样式声明
console.log(getComputedStyle(box).padding);//10px
console.log(getComputedStyle(box).width);//320px
console.log(getComputedStyle(box).background);//所有背景相关的样式

其它方法

.较少使用

类别	说明
open()	打开窗口；默认是_blank
close()	关闭窗口；只能关闭使用open()打开的窗口；兼容性差，基本不用
write()	输出；[Violation] Avoid using document.write().
alert()	警告对话框
prompt()	信息输入对话框；获得的都是字符串
confirm()	确认对话框
print()	打印

[] 单击按钮打开 baidu

let btn = document.querySelector('button');
btn.addEventListener('click', () => {
  open('http://www.baidu.com', '_blank');
})

[] 查看提示信息类型

let age = window.prompt('your age');
console.log(typeof (age));

.转化数据类型

let age = parseInt(window.prompt('your age'));
console.log(typeof (age));

[] 输入一个小于10的数字，求其阶层 n!

function fn(n) {
  // if (n == 0) {
  //   return 1;
  // } else {
  //   return n * fn(n - 1);
  // }
  return n == 0 ? 1 : n * fn(n - 1);
}
let n = parseInt(window.prompt('请输入1个小于10的数字'))
window.alert(fn(n));

[] 支付确认-点击支付并确认后跳转到支付成功页面

[拓展]支付成功页面3秒后返回主页，也可以单击立即按钮返回主页

btn.onclick = function () {
  let res = window.confirm('确认要支付吗？');
  console.log(res);
  if (res) {
    // window.alert('zhifu success');
    //立即返回
    //window.location.href = './result.html'
    //延时返回
    setTimeout(() => {
      window.location.href = 'http://www.baidu.com';
    }, 3000);
  }
}

[] 打印指定内容

也可以使用媒体查询 - print

const dom = document.querySelector('.ham')
const cont = document.querySelector('.cont')
dom.addEventListener('click', () => {
  console.log(dom, cont);
  document.body.innerHTML = cont.innerHTML
  window.print()
})