【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
一、死锁，饥饿，死循环 死锁：各进程互相等待对方手里的资源，导致各进程都阻塞，无法向前推进的现象 饥饿：由于长期得不到想要的资源，某进程无法向前推进的现象，例如：短进…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
三维GIS开发cesium智慧地铁教程（5）Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点： 路径验证：确保相对路径.…...
基于ASP.NET+ SQL Server实现（Web）医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
#Uniapp篇：chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用
中达瑞和自2005年成立以来，一直在光谱成像领域深度钻研和发展，始终致力于研发高性能、高可靠性的光谱成像相机，为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...
Xela矩阵三轴触觉传感器的工作原理解析与应用场景
Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知，帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量，能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度，还为机器人、医疗设备和制造业的智…...