Web API学习笔记(五)

最新推荐文章于 2024-06-21 16:41:46 发布

Java追求者

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量160

点赞数

分类专栏：前端文章标签： js javascript

本文链接：https://blog.csdn.net/Yearingforthefuture/article/details/106527189

版权

前端专栏收录该内容

17 篇文章 2 订阅

订阅专栏

BOM
BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM的顶级对象window
window

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    // 当我们是用window的成员的时候，window可以省略
    // window.document
    // window.alert('hello');
    
    // 定义的全局变量都属于window ，都是window对象的属性
    // var age = 18;
    // console.log(window.age);
    // 
    // console.dir(window);
    // 
    // name 是window的属性，是字符串类型
    var name = 123;
    console.log(name);

    window.console.log('hello');
    // top 是window的属性，只能获取不能赋值
    var top = 'top';
    console.log(top);
    
    var age = 18;
    console.log(age);
  </script>
</body>
</html>

对话框

alert()
prompt()
confirm()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="alert" id="btn1">
  <input type="button" value="prompt" id="btn2">
  <input type="button" value="confirm" id="btn3">

  <script>
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    var btn3 = document.getElementById('btn3');

    btn1.onclick = function () {
      alert('hello world');
    }

    btn2.onclick = function () {
      // 弹出提示，让用户输入内容
      var userName = prompt('请输入姓名', '张三');
      console.log(userName);
    }

    btn3.onclick = function () {
      var isSure = confirm('是否要删除数据？');
      console.log(isSure);
    }
  </script>
</body>
</html>

页面加载事件
onload 页面加载完成之后执行
在onunload中所有的对话框都无法使用 window 对象被冻结

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    // BOM   onload  页面加载完成之后执行  
    // 页面加载完成 页面上所有的元素创建完毕，并且引用的外部资源下载完毕（js，css，图片）
    // window.onload = function () {
    onload = function () {
      var box = document.getElementById('box');
      console.dir(box);
    }

    // window.onunload = function () {
    // 页面卸载的时候执行
    // 
    // 
    onunload = function () {
      // 在onunload中所有的对话框都无法使用 window 对象被冻结
      // Blocked alert('欢迎下次再来') during unload.
      // alert('欢迎下次再来');
      console.log('bye bye');
    }

    // f5 刷新页面  
    // 1 卸载页面
    // 2 重新加载页面
    
  </script>
</head>
<body>
  <div id="box">
    
  </div>
  <img src="" alt="">

  <script>
    // 当页面上的元素创建完毕就会执行
  </script>
</body>
</html>

定时器
setTimeout()和clearTimeout()
在指定的毫秒数到达之后执行指定的函数，只执行一次

setInterval()和clearInterval()
定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数，重复执行

取消定时器的执行
clearTimeout(Id);
id:定时器的Id

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="开始" id="btn1">
  <input type="button" value="取消" id="btn2">
  
  <script>
    // setTimeout()   定时炸弹   隔一段时间执行，并且只会执行一次
    // setInterval()  闹钟       隔一段时间执行，并且会重复执行
    

    // 定时器的标示
    var timerId;
    var btn1 = document.getElementById('btn1');
    btn1.onclick = function () {

      // window.setTimeout()
      // 两个参数
      // 第一个参数 要执行的函数
      // 第二个参数 间隔的时间 单位是毫秒
      // 返回值  是一个整数，是定时器的标示
      // timerId = setTimeout(function () {
      //   console.log('爆炸了');
      // }, 3000);
      // 
      timerId = setTimeout(fn, 3000);
      function fn() {
        console.log('爆炸了');
      }
    }
    var btn2 = document.getElementById('btn2');
    btn2.onclick = function () {
      // 取消定时器的执行
      clearTimeout(timerId);
    }
  </script>
</body>
</html>

删除提示案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #tip {
      width: 150px;
      height: 30px;
      background-color: lightgray;
      opacity: 0.5;
      margin:200px auto;
      padding-top: 5px;
      text-align: center;
      color: red;
      display: none;
    }
  </style>
  <script>
    onload = function () {
      // 当页面的所有元素创建完成, 等待外部文件下载完毕才会执行
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        // 删除操作
        
        // 显示删除成功的tip
        var tip = document.getElementById('tip');
        tip.style.display = 'block';
        // 隔3秒钟之后让tip隐藏
        setTimeout(function () {
          tip.style.display = 'none';
        }, 3000);
      }
    }
  </script>
</head>
<body>
  <input type="button" id="btn" value="删除">
  <div id="tip">删除成功</div>
  <script>
    // 当页面的所有元素创建完成之后执行，不需要等待外部文件下载完毕
  </script>
</body>
</html>

定时器setInterval

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="开始" id="btn1">
  <input type="button" value="取消" id="btn2">

  <script>
    // setInterval()  闹钟  隔一段时间执行，会重复执行
    
    var btn1 = document.getElementById('btn1');
    var timerId; // 定时器的标示
    btn1.onclick = function() {
      // 第一次执行也要先等3秒钟
      timerId = setInterval(function () {
        console.log('早上8点了');
      }, 3000);
    }

    var btn2 = document.getElementById('btn2');
    btn2.onclick = function () {
      clearInterval(timerId);
    }
  </script>
</body>
</html>

计算时间差函数

// 获取两个日期的时间差
function getInterval(start, end) {
  // 两个日期对象，相差的毫秒数
  var interval = end - start;
  // 求 相差的天数/小时数/分钟数/秒数
  var day, hour, minute, second;

  // 两个日期对象，相差的秒数
  // interval = interval / 1000;
  interval /= 1000;

  day = Math.round(interval / 60 / 60 / 24);
  hour = Math.round(interval / 60 / 60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);

  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

倒计时案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .time-item {
      width: 430px;
      height: 45px;
      margin: 0 auto;
    }
    
    .time-item strong {
        background: orange;
        color: #fff;
        line-height: 49px;
        font-size: 36px;
        font-family: Arial;
        padding: 0 10px;
        margin-right: 10px;
        border-radius: 5px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }

    .time-item > span {
        float: left;
        line-height: 49px;
        color: orange;
        font-size: 32px;
        margin: 0 10px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .title {
      width: 260px;
      height: 50px;
      margin:200px auto 50px auto;
    }
  </style>

</head>
<body>
  <h1 class="title">距离光棍节，还有</h1>
  
  <div class="time-item">
    <span><span id="day">00</span>天</span>
    <strong><span id="hour">00</span>时</strong>
    <strong><span id="minute">00</span>分</strong>
    <strong><span id="second">00</span>秒</strong>
  </div>

  <script src="common.js"></script>
  <script>
    // 目标时间
    var endDate = new Date('2020-11-11 0:0:0');

    // 获取span
    var spanDay = my$('day');
    var spanHour = my$('hour');
    var spanMinute = my$('minute');
    var spanSecond = my$('second');

    setInterval(countdown, 1000);

    countdown();
    // 倒计时
    function countdown() {

      // 计算时间差
      // 当前时间
      var startDate = new Date();
      // 计算两个日期差
      var interval = getInterval(startDate, endDate);

      setInnerText(spanDay, interval.day);
      setInnerText(spanHour, interval.hour);
      setInnerText(spanMinute, interval.minute);
      setInnerText(spanSecond, interval.second);

    }
  </script>
</body>
</html>

location对象
location.href = ‘http://www.baidu.com’; 跳转指定页面
assign 委派
assign() 的作用和href的作用一样。可以让页面跳转到指定的地方
替换掉地址栏中的地址，但是不记录历史，不能后退。
location.assign(‘http://www.baidu.com’);
location.replace(‘http://www.baidu.com’);
重新加载 refresh f5
参数:true 强制从服务器获取页面 false 如果浏览器有缓存的话，直接从缓存获取页面
location.reload(true);

offerset获取当前的位置

简单动画案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    #box {
      position: relative;
      background-color: red;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <input type="button" value="开始" id="btn">
  <div id="box"></div>
  <script>
    // 1 点击按钮，让盒子能够向右移动
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    btn.onclick = function () {
      // // style.left 获取的是标签中的style属性设置的样式属性的值
      // // 如果标签中的style没有设置该样式属性，我们获取到的是空字符串
      // console.log(box.style.left);
      // // 10px10px  当我们给样式属性设置非法的值，浏览器会帮我们过滤掉
      // console.log(box.style.left + 10 + 'px');
      // box.style.left = box.style.left + 10 + 'px';
      // 
      // 
      // 获取盒子当前的位置  offsetLeft  offsetTop
      // box.style.left = box.offsetLeft + 10 + 'px';
      // 
      // box.offsetLeft 只读属性
      // 
      // 2 让盒子不停的向右移动
      // 循环的速度非常非常非常快，瞬间循环100次
      // for (var i = 0; i < 100; i++) {
      //   box.style.left = box.offsetLeft + 5 + 'px';
      // }
      

      var timerId = setInterval(function () {
        // 让盒子停在500px的位置
        // 判断盒子当前的位置是否到达500
        // 
        // 最终盒子停止的位置
        var target = 600;
        // 步进
        var step = 6;
        if (box.offsetLeft >= target) {
          // 停止定时器
          clearInterval(timerId);
          // 设置横坐标为500
          box.style.left = target + 'px';
          console.log(box.style.left);
          // 退出函数
          return;
        }
        box.style.left = box.offsetLeft + step + 'px';
        console.log(box.style.left);
      }, 30);
    }
    
  </script>
</body>
</html>

URL

统一资源定位符 (Uniform Resource Locator, URL)
URL的组成

scheme://host:port/path?query#fragment
http://www.baidu.com:80/a/b/index.html?name=lz&age=18#bottom
scheme:通信协议
常用的http,ftp,maito等
host:主机
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径
由零或多个’/‘符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询
可选，用于给动态网页传递参数，可有多个参数，用’&‘符号隔开，每个参数的名和值用’='符号隔开。例如：name=zs
fragment:信息片断
字符串，锚点.

history对象

back()
forward()
go()
history.go(-1);//后退
history.forward();//前进
history.go(1);//前进

navigator对象

userAgent
navigator.userAgent
获取当前的系统版本
获取当前的浏览器版本
判断是PC端的设备还是移动端的设备

Java追求者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web API学习笔记(五)

BOMBOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。BOM的顶级对象windowwindow<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D
复制链接

扫一扫