BOM 操作学习案例

BOM 操作学习案例

还是 JavaScript 基础语法-dom-bom-js es6 新语法-jQuery-数据可视化 echarts 黑马程序员 pink 老师前端入门视频教程(500 多集课程) 的学习案例。

主要是定时器(setInterval, setTimeOut),以及重定向部分的学习案例。

定时器案例

setTimeOutsetInterval 两个方法的使用。

setTimeOut

因为 setTimeOut 有一个 延时性+一次性 的特性,所以用的比较多的案例应该是配合着关闭广告:

setTimeOut

使用 clearTimeout() 也可以取消 setTimeOut 的效果,点击 停止定时器 按钮后的对比,广告就不关闭了:

clearTimeout

完整代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .commercial {
        width: 500px;
        height: 300px;
        margin: 0 auto;
        background: url("https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg")
          no-repeat center;
      }
    </style>
  </head>
  <body>
    <div class="commercial"></div>
    <button>点击停止定时器</button>
    <script>
      // 到了 2s 后就去调用这个函数
      //   setTimeout(function () {}, 2000);

      // 案例:5s后自动关闭广告
      const commercial = document.querySelector(".commercial");
      const btn = document.querySelector("button");
      const closeCommercial = setTimeout(() => {
        commercial.style.display = "none";
      }, 5000);

      btn.addEventListener("click", function () {
        clearTimeout(closeCommercial);
      });
    </script>
  </body>
</html>

setInterval

setInterval 的案例有两个,一个是常见的倒计时,这种在秒杀比较常见。另外一个是模拟发送手机号后禁止短时间内继续发送手机号。

案例 1,倒计时

案例中的日期我写死了,效果图:

countdown

源码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #111;
        color: #eee;
        text-align: center;
        line-height: 40px;
      }
    </style>
  </head>
  <body>
    <div class="timer">
      <span class="hour"></span>
      <span class="minute"></span>
      <span class="second"></span>
    </div>
    <script>
      const timer = document.querySelector(".timer");
      const hour = timer.querySelector(".hour");
      const minute = timer.querySelector(".minute");
      const second = timer.querySelector(".second");

      const inputTime = +new Date("2021-5-14 9:00:00");

      // 第一次调用,防止页面空白
      countDown();

      function countDown() {
        const now = +new Date();
        const timeDiff = (inputTime - now) / 1000;
        const hours = parseInt((timeDiff / 3600) % 24);
        hour.textContent = hours < 10 ? `0${hours}` : hours;
        const minutes = parseInt((timeDiff / 60) % 60);
        minute.textContent = minutes < 10 ? `0${minutes}` : minutes;
        const seconds = parseInt(timeDiff % 60);
        second.textContent = seconds < 10 ? `0${seconds}` : seconds;
      }

      setInterval(countDown, 1000);
    </script>
  </body>
</html>

案例 2,禁止按钮点击事件

为了演示效果我只禁用了 5 秒,效果图:

disable-button

源码部分:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    手机号: <input type="tel" name="" id="" />
    <input type="button" value="发送" />

    <script>
      const btn = document.querySelector("input[type='button']");
      let countDown = 5;
      btn.addEventListener("click", function () {
        btn.disabled = true;
        btn.value = `还剩下${countDown--}秒`;
        const timer = setInterval(function () {
          if (countDown === 0) {
            clearInterval(timer);
            btn.disabled = false;
            countDown = 5;
            btn.value = "发送";
          } else {
            btn.value = `还剩下${countDown--}秒`;
          }
        }, 1000);
      });
    </script>
  </body>
</html>

JavaScript 同步与异步

这个其实只是为了加深理解的,单看这个案例可能需要把 setTimeOut 里面的值改成 0 配合比较好:

event-loop

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log(1);
      setTimeout(() => {
        console.log(3);
      }, 10000);
      console.log(2);
    </script>
  </body>
</html>

因为 JavaScript 是先执行同步代码,再执行异步的代码,所以就算将 setTimeOut 里面等待的时间改为 0,console 输出的结果还是 1 > 2 > 3

实现页面跳转功能

这个也是 location 搭配着 setInterval 完成的功能,倒计时后跳转页面或是关闭页面的实现:

redirect-page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 实现 5s后自动重定向 的功能 -->
    <div>自动重定向跳转</div>
    <script>
      const div = document.querySelector("div");
      let countdown = 5;
      setInterval(function () {
        if (countdown === 0) {
          location.href = "https://www.baidu.com";
        } else if (countdown > 0) {
          div.textContent = `${countdown--}秒后自动跳转`;
        }
      }, 1000);
    </script>
  </body>
</html>

使用 location 重定向页面并且传参

不像其他的案例,这个案例是跨页面实现的:

pass-param

第一个有用户名的页面是 login 页面,第二个页面是 homepage,这也是第一次实现和完成 跨页面+传信息 的功能。

登录,login 页面:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="homepage.html">
      用户名:<input type="text" name="username" />
      <input type="submit" value="提交" />
    </form>
  </body>
</html>

信息展示,homepage 页面:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <script>
      const div = document.querySelector("div");
      const { search } = location;
      const queries = search.substr(1, search.length).split("=");
      console.log(queries);
      div.textContent = `${queries[1]}你好`;
    </script>
  </body>
</html>

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数&#xff1a; gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点&#xff1a; 完后运行&#xff0c;r gdb 中的有用命令 下面是一个有用的 gdb 命令子集&#xff0c;按可能需要的顺序大致列出。 第一列给出了命令&#xff0c;可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布&#xff1a; 一元高斯分布&#xff1a;(将多元高斯分布中的D取值1&#xff09; 其中代表的是平均值&#xff0c;是方差的平方&#xff0c;也可以用来表示&#xff0c;是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要&#xff0c;需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容&#xff0c;经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch &#xff0c;简称ES 。是一个全文搜索服务器&#xff0c;也可以作为NoSQL 数据库&#xff0c;存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项&#xff1a; (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候&#xff0c;访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议&#xff1a;以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么&#xff1f; 在java规范中是这样描述的&#xff1a;Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联&#xff0c;线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口&#xff0c;远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能&#xff0c;出了大概一年了。 程序员们在编程时遇到不会的问题&#xff0c;又没有老师可以提问&#xff0c;就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法&#xff0c;但是不一定得到回复&#xff0c;…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎&#xff0c;题目很狗&#xff0c;第一次踩这个坑&#xff0c;单拉出来写个题解记录一下 题意&#xff1a;给一个数字矩阵&#xff0c;一次操作&#xff1a;对于每一行&#xff0c;可以去掉左端或者右端的数&#xff0c;得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1&#xff09;全特化2&#xff09;偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类&#xff1a; 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…