【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
一、死锁，饥饿，死循环 死锁：各进程互相等待对方手里的资源，导致各进程都阻塞，无法向前推进的现象 饥饿：由于长期得不到想要的资源，某进程无法向前推进的现象，例如：短进…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
python打卡day49
知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义 作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...
【2025年】解决Burpsuite抓不到https包的问题
环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
AI编程--插件对比分析：CodeRider、GitHub Copilot及其他
AI编程插件对比分析：CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...
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…...