【前端学习-14】【day04】键盘事件/按s自动跳转/快递单号查询/BOM/窗口加载事件/window对象事件/调整窗口大小事件/定时器/开始、停止/京东秒杀/this/发送验证/跳转页面对象

最新推荐文章于 2023-06-25 16:19:00 发布
最新推荐文章于 2023-06-25 16:19:00 发布
阅读量235 收藏
点赞数
分类专栏： HTML javascript 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qnanwang/article/details/106059878
版权

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

案例：用户按下s键鼠标自动跳转到输入框在这里插入图片描述

在这里插入图片描述

案例：模拟京东快递单号查询在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

案例：京东秒杀倒计时在这里插入图片描述在这里插入图片描述在这里插入图片描述

案例：开始和停止计时器

在这里插入图片描述

案例：发送短信案例（验证码）60s在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

案例：5s后跳转页面

在这里插入图片描述

案例：跳转页面在这里插入图片描述

页面1：index.html在这里插入图片描述
页面2：login.html
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

QNAN-
关注
专栏目录
前端学习 day10 : 节点,事件进阶和解绑,BOM,定时器
whosedad的博客
11-24 356
1.节点 1.1 什么是节点 //节点主要是添加删除标签的,动态数据渲染 //节点类型 nodeType : //1 元素(标签) 2 属性 3 文本 8 注释 9 文档 //9 文档 console.log(document.nodeType); var dv = document.getElementById("dv") ; //1 元素(标签) console.log(dv.nodeType) ; var c...
JavaScript 学习Day2: BOM / DOM / 事件监听机制 / 案例
qq_40027172的博客
07-06 368
一、DOM 1.1 DOM的简单学习 DOM简单学习：为了满足案例要求 * 功能：控制html文档的内容 * 获取页面标签(元素)对象：Element * document.getElementById("id值"):通过元素的id获取元素对象 * 操作Element对象： 1. 修改属性值： 1. 明确获取的对象是哪一个？ 2. 查看API文档，找其中有哪些属性可以设置 2. 修改标签体内容： * 属性：innerHTML 1. 获取元素对象 2. 使用i
web页面-JS/DOM/BOM/窗口滚动/修改内容/上传文件
weixin_40611700的博客
12-02 1550
1.什么是JavaScript及简单编写JS代码 前端工程师学的编程语言（HTML，CSS，JavaScript，Vue） JavaScript负责页面的动作，跳转等动态化的效果 Vue不是编程语言，只是JavaScript的一种框架而已 为什么前端开发要学JavaScript，因为所有的浏览器都内置安装了JavaScript的运行环境 下面我们来看一下如何编写简单的JS代码： <!DOCTYPE html> <html lang="en"> <head>.
JavaScript之DOM/事件/面向对象/内置对象/BOM
DW-CHEN
09-13 581
JavaScript JavaScript时一种客户端脚本语言，运行在客户端浏览器中，每一个浏览器都具备解析JavaScript的引擎 脚本语言：不需要编译就可以被浏览器直接解析执行了 核心功能就是增强用户和HTML页面的交互过程，让页面有一些动态效果，以此来增强用户的体验 组成部分 ECMAScript:客户端脚本语言标准统一了所有客户端脚本语言的编码方式 DOM BOM 和HTML结合方式 内部引入：<script></script> 外部引入方式:<script
【前端学习】Day-18 js定时器、事件绑定、案例
ChenAi_140的博客
07-15 485
js定时器、事件绑定
js-day11 BOM 事件对象 懒加载
ILove_bugs的博客
09-28 166
BOM BOM: Browser Object Model 浏览器对象模型 js提供给我们用来操作浏览器的信息的接口 iframes location history document navigator .... BOM核心: window 可以直接使用变量名或者函数名就能出线效果的(全局变量、全局函数), 所属对象都是window 对话框 警告框: alert() 带有确定取消按钮的警告框: confirm('提示内容') 带有输入框的对话框: pro
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
upward
02-08 596
JavaScript高级——DOM和事件的简单学习、BOM对象、DOM对象
JS Web APIs-day04 键盘事件、BOM、定时器、JS执行机制
weixin_45734686的博客
10-25 293
JS Web APIs-day04 引文 BOM Browser Object Model 浏览器对象模型。用来操作浏览器。 window对象：浏览器中最大的一个对象（顶级对象） 所有的全局变量和函数都是window对象的属性和方法。 window对象可以省略。 回调函数 回调函数：我们编写的，但是我们不进行调用，当满足某个条件时，由系统调用的函数就成为回调函数。 btn.oncli...
javascript - BOM概念/方法/对象
Jared864的博客
05-09 151
Day19 一、 BOM 概念 BOM（Browse of Module）浏览器对象模型，是个模型，这个模型由一个对象window来体现 作用： 提供了ES和页面的运行环境 浏览器的一些规定，首先需要在ES的基础之上设置，但是最终生效时，一浏览器的标准为主 浏览器的规范没有涉及到的范围，使用ES规范 兼容：不是兼容的兼容问题 alert(); 每个浏览器的弹出窗口样式都不一样 window的具体功能和作用 window提供窗口或者窗口之间的操作 因为所有内容都运行在浏览器中，所以window也是浏览器
JavaScript入门 日期时间对象date/BOM Day09
qq_63354840的博客
08-25 247
日期时间对象date/BOM
016Day-移动端事件、BOM、windows对象常用方法、定时器方法、计时牌练习
Yanxiaona111的博客
08-30 267
一、移动端事件介绍 <style> div{ width: 300px; height: 300px; background-color: red; } </style> </head> <body> <div></div> <script> var div = document.querySelecto
前端之浏览器对象模型(BOM)
云中自有锦书
07-20 1362
1.BOM 概念: BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 通俗理解: 把浏览器当做对象,通过访问对象的属性,实现操作浏览器的一组方法 2. 页面加载事件 2.1 load事件...
5、Web API-DAY5 Bom操作
最新发布
m0_51394252的博客
06-25 171
以前我们页面写的数据一刷新页面就没有了，是不是？随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大，sessionStorage和localStorage约 5M 左右常见的使用场景：https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失。
JavaScript的学习笔记（day14）
woyejiu的博客
08-25 310
JavaScript学习笔记
HTML-POLO360项目实战
QNANWang的博客
09-26 892
HTML-POLO360项目实战 #使用HTML+CSS 1. 引入reset.css清除默认样式 - 2.解决高度塌陷问题 3.引入外部CSS 4.设置文字居中.行高等 5.相对定位和绝对定位 6.背景不重复 居中等等 7.鼠标移入变色 a:hover{ } ...
HTML—项目实战（注册界面的设计以及实现）
QNANWang的博客
10-09 761
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>启迪数字学院</title> <link rel="stylesheet" type="text/css" href="css/reset1.css" /> <...
【前端学习-03】CSS3之2D转换/移动/旋转/缩放
QNANWang的博客
05-04 392
2D转换 实现元素（盒子）的位移、旋转、缩放 2D转换:改变标签在二维平面上的位置和形状的一种技术，与数学的坐标轴不一样 1.2D转换移动Translate 改变元素在页面中的位置，类似定位。 语法：transform:translate(x,y) X为x轴上移动的位置，Y为Y轴移动位置 若只移动X轴或Y轴，Y不能省略 transfrom：translate(100px,0px) transfr...
【前端学习-19】【01】JQuery的基本使用/顶级对象$/DOM和JQuery对象的区别与转换/隐式迭代实现排他思想/新浪下拉菜单/淘宝精品/tab侧边栏/手风琴/高亮效果显示
QNANWang的博客
05-16 371
基本使用： 1.官网下载JQuery->引入JS->调用 JQuery和DOM对象的区别 两对象的相互转换 使用： 利用隐式迭代实现排他思想 案例：新浪下拉菜单 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit..
【前端学习-25】【day04】正则表达式、表单验证、用户名验证
QNANWang的博客
05-23 355
【day04正则表达式】一、正则表达式1.1 什么是正则表达式1.2 正则表达式的特点二、正则表达式在js中的应用2.1 创建正则表达式（两种方式）三、正则表达式的特殊字符3.1 边界符3.2 字符类3.3 常用正则表达式3.4 量词符3.5 括号总结3.6 预定义类四、正则表达式中的替换4.1 replace替换案例1：用户名验证案例2：表单验证 一、正则表达式 1.1 什么是正则表达式 1.2 正则表达式的特点 二、正则表达式在js中的应用 2.1 创建正则表达式（两种方式） 代码演示： &lt
Error reading file D:/javaEE-web-pro/day01moudle/pom.xml maevn
05-20
这错误提示是说在读取 `D:/javaEE-web-pro/day01moudle/pom.xml` 文件时出现了问题，可能是该文件不存在或者无法被访问。 首先，你需要确认文件路径的正确性。检查该文件是否位于指定路径下，并且确保路径中不包含拼写错误或其他错误。 如果路径正确，那么可以尝试检查该文件的权限，确保你具有读取该文件的权限。如果你使用的是 Windows 系统，可以右键点击该文件，选择“属性”，然后在“安全”选项卡中检查你的账户是否具有读取该文件的权限。 如果以上步骤都没有解决问题，那么可能是该文件已经损坏或被删除。你可以尝试重新创建文件或者从备份中恢复该文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值