【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
一、死锁，饥饿，死循环 死锁：各进程互相等待对方手里的资源，导致各进程都阻塞，无法向前推进的现象 饥饿：由于长期得不到想要的资源，某进程无法向前推进的现象，例如：短进…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制 您好，我是鹤九日！ 回顾 在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
Mysql8 忘记密码重置，以及问题解决
1.使用免密登录 找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时，遇到的一些问题总结一下 [参考文档]：https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现： 今天在看到这个教程的时候，在自己的电…...
十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建
【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...
海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》
近日，嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》，海云安高敏捷信创白盒（SCAP）成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天，网络安全已成为企业生存与发展的核心基石，为了解…...