【Javascript Day19】BOM
目录
BOM对象的方法
定时器方法
短信验证码案例
计时器元素动画
同步代码和异步代码
location对象
跳转查询页面参数
跳转多查询参数
BOM对象的方法
// window.alert("提示");// window 中提供的方法和属性，可以在省略window对象的情况下直接调用// BOM对象的属性和方法的使用// alert("提示");// window.onload = function(){// // 监控BOM对象的资源加载，当资源加载完成后执行// var h1Dom = document.querySelector("#title");// console.log(h1Dom);// }// window.addEventListener("load",function(){// var h1Dom = document.querySelector("#title");// console.log(h1Dom);// })window.addEventListener("DOMContentLoaded",function(){var h1Dom = document.querySelector("#title");console.log(h1Dom);})window.onresize = function(){// 当浏览器窗口发生变化时会执行的事件// 监控的时浏览器加载的DOM显示区域的大小变化console.log("窗口大小改变了");}
定时器方法
<input type="button" value="3s内关闭一次性计时器" onclick="closeTimeout()"><input type="button" value="关闭周期计时器" onclick="closeTimerInterval()"><script>// var timer = setTimeout(回调方法,时间ms); 一次性计时器，完成一次执行代码的延迟操作// 方法会返回一个计时器控制对象(timer) => 浏览器输出的结果是编号，该值实际上是一个控制对象// clearTimeout(计时器对象) : 一次计时器的关闭// console.log(1);var timer1 = setTimeout(function(){// 3秒之后执行console.log(2);},3000);console.log("timer1:",timer1);function closeTimeout(){clearTimeout(timer1)}// var timer = setInterval(回调方法,时间ms); 周期性计时器，在设置的时间间隔上多次执行，需要手动停止// 方法会返回一个计时器控制对象(timer) => 浏览器输出的结果是编号，该值实际上是一个控制对象// clearInterval(计时器) : 关闭周期性计时器var timer2 = setInterval(function(){console.log(3);},1000);console.log("timer2:",timer2);function closeTimerInterval(){clearInterval(timer2);}</script>短信验证码案例
<input type="text"><input type="button" value="获取验证码" id="btn"><script>var btnDom = document.querySelector("#btn")btnDom.addEventListener("click",function getCode(){var code = Math.ceil( Math.random()*10000 );console.log(code);// 禁用按钮 => 视觉禁止btnDom.disabled = true;var max = 5;btnDom.value = max+"s后获取验证码"// 彻底删除方法 => 功能禁用btnDom.removeEventListener("click",getCode);// 倒计时// setTimeout(function(){// btnDom.disabled = false;// btnDom.addEventListener("click",getCode)// }, 3000);var i = 1;var timer = setInterval(function(){console.log("计时器");btnDom.value = (max-i)+"s后获取验证码";if(i>=max){btnDom.disabled = false;btnDom.addEventListener("click",getCode);btnDom.value = "获取验证码"clearInterval(timer);}i++;},1000)})</script>
计时器元素动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.ball{padding: 0px;width: 50px;height: 50px;background-color: brown;border-radius: 50%;margin-left: 0px;margin-top: 10px;}.ball1{/* 不能分段执行的动画 */transition:all 3s ease;}.right{width: 30px;height: 30px;margin-left: 400px;background-color: blueviolet;/* display: none; *//* visibility: hidden; */}.ball2{animation:move2 3s ease forwards;}/* @keyframes 时间为主先分段，样式为辅看定义 */@keyframes move2 {0%{/* 0s样式-动画执行前的初始样式 => 可不写 */width: 50px;height: 50px;margin-left: 0px;background-color: brown;}50%{/* 1.5s样式 */margin-left: 400px;width: 30px;height: 30px;background-color: brown;}100%{/* 3s样式-动画执行后的最终样式 => 可不写 */background-color: blueviolet;width: 30px;height: 30px;margin-left: 400px;}}</style>
</head>
<body><input type="button" value="添加样式ball1" onclick="moveFun1()"><input type="button" value="添加样式ball2" onclick="moveFun2()"><!-- 复习CSS动画 --><!-- CSS动画，通过特性元素规则触发的动画 --><div class="ball ball1" id="ball1"></div><div class="ball" id="ball2"></div><div class="ball ball2" ></div><script>function moveFun1(){var ballDom = document.querySelector("#ball1");ballDom.classList.add("right")}function moveFun2(){var ballDom = document.querySelector("#ball2")ballDom.classList.add("ball2")}</script><hr><input type="button" value="基于计时器的动画" onclick="moveFun3()"><div class="ball" id="ball3"></div><!-- 优先CSS --><script>function moveFun3(){var ballDom = document.querySelector("#ball3");// ballDom.style.marginLeft = "100px";// setTimeout(function(){// ballDom.style.marginLeft = "101px";// },20)var start = 0;ballDom.style.marginLeft = start+"px";var timer = setInterval(function(){start++;if(start==200){alert("动画执行一半")}if(start>=400){clearInterval(timer);ballDom.style.display = "none";}else{ballDom.style.marginLeft = start+"px";}},8)}</script>
</body>
</html>同步代码和异步代码
<input type="button" value="执行同步代码" onclick="execFunA()"><input type="button" value="执行异步代码" onclick="execFunB()"><script>// 同步代码：代码按照顺序执行，前置代码没有完成，后续代码无法执行// console.log(1);// console.log(2);// console.log(3);// var res = num + 10;// console.log(4);// console.log(5);// console.log(6);// console.log(7);function execFunA(){console.log(1);console.log(2);console.log(3);var res = num + 10;console.log(4);console.log(5);console.log(6);console.log(7);}// 异步代码：按照代码顺序加载代码，但代码会延迟执行，且不会影响后续代码的执行// 异步内部的执行代码依然同步规则// 异步代码的回调方法，无法通过 return 返回结果// console.log(11);// console.log(22);// setTimeout(function(){// console.log("计时器异步代码1");// var res2 = arg + 10;// console.log("计时器异步代码2");// },1000);// console.log(33);// console.log(44);function execFunB(){console.log(11);console.log(22);setTimeout(function(){console.log("计时器异步代码1");var res2 = arg + 10;console.log("计时器异步代码2");},1000);console.log(33);console.log(44);}</script>
location对象
<h1 id="abc">头部</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="#abc">回到顶部</a><h1 id="end">底部</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><script>// location 对象记录当前页面在浏览器地址中的指向路径// 地址指向路径 => 域名// 域名的组成 => URL 统一资源定位符// protocol: // hostname[:port] / path / path / resource #anchor ?query// 协议: // 域名(ip:端口) / 路径-资源 #锚点 ?参数// // + 协议://域名(ip:端口)/路径-资源 => 访问指定服务器的相关文件// + #锚点 => 将访问的HTML页面滚动到对应的ID指向的标签console.log(location);function gotoPage(){var num = Math.random();console.log(num);if(num>0.5){// 改变浏览器窗口的地址location.href = "https://www.baidu.com";}}</script><hr><input type="button" value="切换页面" onclick="gotoPage()"><br><br><!-- 参数 不合法 --><a href="./16.跳转查寻参数页面.html?第一段文本">跳转到 16.跳转查寻参数页面.html-第一段文本</a><br><a href="./16.跳转查寻参数页面.html?第二段文本">跳转到 16.跳转查寻参数页面.html-第二段文本</a><br><!-- 参数规则和格式?名称1=参数1&名称2=参数2&……?key=value&key=value地址和参数之间通过 ? 分割参数和参数之间通过 & 分割参数名和参数值之间通过 = 分割--><a href="./16.跳转多查询参数.html?name=张三&age=23">跳转到 16.跳转多查询参数.html?name=张三&age=23</a>跳转查询页面参数
<h3>跳转到页面，用于参数解析</h3><h4 id="title">内容-？？？？</h4><script>console.log(location);console.log(location.href);console.log( decodeURI(location.href) );// location.search 当前页面访问时，地址栏中?后续的参数数据// => location 中记录的数据不能出现非英文和符号以外其它字符// 如果存在其它字符串，该字符会被编码成ISO8859-1规则// 提供解码和编码方法// decodeURI( 编码后的字符 ) 解码都只会对不地址栏不识别的字符进行操作// encodeURI( 原始字符 ) 编码都只会对不地址栏不识别的字符进行操作console.log(location.search);var word = decodeURI( location.search );console.log(word);word = word.replace("?","");console.log(word);var titleDom = document.querySelector("#title");titleDom.innerHTML = "内容-" + word;</script>
跳转多查询参数
<h1>解析参数</h1><script>// 获取地址参数，并解码var search = decodeURI( location.search );console.log(search);// 删除参数开始的 ? 分割符search = search.replace("?","");// 分割多个参数var params = search.split("&");console.log(params);var obj = {};for (var i = 0; i < params.length; i++) {var p = params[i].split("=");console.log(p);console.log(p[0]);console.log(p[1]);obj[ p[0] ] = p[1];}console.log(obj);</script>相关文章：
【Javascript Day19】BOM
目录 BOM对象的方法 定时器方法 短信验证码案例 计时器元素动画 同步代码和异步代码 location对象 跳转查询页面参数 跳转多查询参数 BOM对象的方法 // window.alert("提示");// window 中提供的方法和属性，可以在省略window对象的情况下直接调用…...
git 操作 已经 commit 但是没有 push 怎么办
前言： 在操作commit后发现提交错了分支，直接切换分支是不行的，只能先取消commit的代码才能切换分支，因此记录一下git的操作 如果你已经执行了 git commit 但还没有进行 git push，可以通过以下几种方式撤回或修改提交…...
在 macOS 的 ARM 架构上按住 Command (⌘) + Shift + .（点）。这将暂时显示隐藏文件和文件夹。
在 macOS 的 ARM 架构（如 M1/M2 系列的 Mac）上，设置 Finder（访达）来显示隐藏文件夹的步骤如下： 使用快捷键临时显示隐藏文件： 在Finder中按住 Command (⌘) Shift .（点ÿ…...
【核心算法篇二十】《DeepSeek符号回归：让AI化身「数学神探」破解数据背后的宇宙公式》
“宇宙最不可理解之处，就是它居然可以被理解。”——爱因斯坦 如果让AI来续写这句话，或许会是："数据最迷人的地方，在于它总能用数学公式讲出故事。"今天我们要聊的DeepSeek符号回归技术，就是教AI从杂乱数据中自动发现精妙数学规律的「黑魔法」。全程高能预警，建…...
如何在 Visual Studio Code 中使用 DeepSeek R1 和 Cline？
让我们面对现实吧：像 GitHub Copilot 这样的 AI 编码助手非常棒，但它们的订阅费用可能会在你的钱包里烧一个洞。进入 DeepSeek R1 — 一个免费的开源语言模型，在推理和编码任务方面可与 GPT-4 和 Claude 3.5 相媲美。将它与 Cline 配对&#…...
PHP旅游门票预订系统小程序源码
🌍 旅游门票预订系统：一站式畅游新体验，开启您的梦幻旅程 🌟 一款基于ThinkPHPUniapp精心雕琢的旅游门票预订系统，正翘首以待，为您揭开便捷、高效、全面的旅游预订新篇章！它超越了传统预订平台…...
在项目中调用本地Deepseek（接入本地Deepseek）
前言 之前发表的文章已经讲了如何本地部署Deepseek模型，并且如何给Deepseek模型投喂数据、搭建本地知识库，但大部分人不知道怎么应用，让自己的项目接入AI模型。 文末有彩蛋哦！！！ 要接入本地部署的deepsee…...
notepad++右键菜单不见了
卸载时没点击完成，又重新安装了一个，最终导致了一些bug，导致右键没有notepad菜单。 解决方式： 新建一个register.reg文件，加入以下代码，然后双击执行即可 代码说明：Open with Notepad 是右…...
如何用ollama快速布署deepseek-r1大模型
deepseek在春节期间因为特朗普的一番发言而在中国已几乎人尽皆知，热度到了连90高寿的老父亲都向我推荐这个中国产的AI大模型，而且它是开源的！我试验了下，用ollama也可以快速度安装布署deepseek-r1大模型。本想写篇文章来介绍下dee…...
python-leetcode 36.二叉树的最大深度
题目： 给定一个二叉树root,返回其最大深度 二叉树的最大深度是指从根节点到最远叶子节点的最长路径上的节点数 方法一：深度优先搜索 知道了左子树和右子树的最大深度l和r，那么该二叉树的最大深度即为:max(l,r)1 而左子树和右子树的最大深…...
MySQL事务的特性和隔离级别
一、事务的特性 事务是一组操作的集合，它是一个不可分割的工作单位，事务会把所有的操作作为一个整体一起向系统提交或撤销操作，即这些操作要么同时成功，要么同时失败 事务的有以下四个特性（acid）…...
Oracle视图（基本使用）
视图 视图是通过定制的方式显示一个或者多个表的数据。 视图可以视为“虚拟表”或“存储的查询”。 视图的优点： 提供了另外一种级别的表安全性隐藏了数据的复杂性简化了用户的SQL命令隔离基表结构的改变通过重命名列，从另一个角度提供数据。 视图里…...
C++ Primer 类的作用域
欢迎阅读我的 【CPrimer】专栏 专栏简介：本专栏主要面向C初学者，解释C的一些基本概念和基础语言特性，涉及C标准库的用法，面向对象特性，泛型特性高级用法。通过使用标准库中定义的抽象设施，使你更加适应高级…...
【学习笔记】Cadence电子设计全流程（二）原理图库的创建与设计（上）
【学习笔记】Cadence电子设计全流程（二）原理图库的创建与设计（上） 2.1 OrCAD X Capture 界面预览2.2 原理图元件符号的组成2.3 原理图库的创建和元件的创建2.4 以 STM32F103T8U6 芯片为例创建元件 全部内容见专栏：【Ca…...
学习数据结构（11）二叉树（堆）下
1.堆的概念 如果有⼀个集合 K {k0，k1，k2，...，k(n-1)} ，把它的所有元素按完全二叉树的形式存储在一个一维数组中，并满足：K(i)<2*i1且K(i)<2*i2（K(i)>2*i1且K(i)>2*i2&a…...
HarmonyOS NEXT网络状态监听HTTP和RCP请求网络
当我们在HarmonyOS NEXT中开发的应用，基本上都会使用网络请求，从服务端获取数据在客户端显示或者供用户交互，有时候网络发生变化时，我们需要做一些相应的操作，接下来我们一起来了解下在HarmonyOS NEXT下如何监听网络状…...
MySQL数据库（4）—— 数据类型
目录 一，数据类型分类 二，数值类型 2.1 tinyint类型 2.2 bit类型 2.3 float类型 2.4 decimal类型 三，字符串类型 3.1 char类型 3.2 varchar类型 四，时间日期类型 五，enum和set类型 5.1 基本使用 5.2 解释查…...
如何在Odoo 18中创建记录规则Rule
如何在Odoo 18中创建记录规则Rule 记录规则是管理访问控制的关键，它能让你依据用户角色，定义谁可以在系统内查看、创建或修改特定记录。例如，公司中的普通员工只能查看或修改与与自己直接相关的数据，而经理则有权限访问和编辑所有…...
petalinux高版本设置自动登录和开机自启动配置
petalinux-config -c rootfs 依次选择 Image Features -> serial-autologin-root 这是配置 进来就是root权限 创建并安装名为 myapp-init 的新建应用程序 petalinux-create -t apps --template install -n myapp-init --enable 编辑 project-spec/meta-user/recipes-…...
操作系统2.4
一、死锁，饥饿，死循环 死锁：各进程互相等待对方手里的资源，导致各进程都阻塞，无法向前推进的现象 饥饿：由于长期得不到想要的资源，某进程无法向前推进的现象，例如：短进…...
多模态2025：技术路线“神仙打架”，视频生成冲上云霄
文｜魏琳华 编｜王一粟 一场大会，聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...
docker 部署发现spring.profiles.active 问题
报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...