【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
一、死锁，饥饿，死循环 死锁：各进程互相等待对方手里的资源，导致各进程都阻塞，无法向前推进的现象 饥饿：由于长期得不到想要的资源，某进程无法向前推进的现象，例如：短进…...
Python爬虫实战：研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件，然后打开终端，进入下载文件夹，键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用，结合SQLite数据库实现联系人管理功能，并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能，同时可以最小化到系统…...
保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统：Ubuntu 24.04 LTS (WSL2)架构：x86_64 (GNU/Linux)Rust 版本：rustc 1.87.0 (2025-05-09)Cargo 版本：cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
Kafka入门-生产者
生产者 生产者发送流程： 延迟时间为0ms时，也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于：异步发送不需要等待结果，同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
STM32---外部32.768K晶振（LSE）无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容；2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容（CL）与匹配电容（CL1、CL2）的关系 2. 如何选择 CL1 和 CL…...