javascript 基础（三）--BOM

最新推荐文章于 2024-05-12 23:24:04 发布
最新推荐文章于 2024-05-12 23:24:04 发布
阅读量267 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dcclove/article/details/77113027
版权

window对象

window对象是BOM的核心，window对象指当前的浏览器窗口.

window对象方法：alert() prompt() confirm()  setInterval()  setTimeout()...


计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)

或

setInterval(clock,1000)

 

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>定时器</title>

<script type="text/javascript">

  var attime;

  function clock(){

    var time=new Date();          

    attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();

    document.getElementById("clock").value = attime;//获取时间， 并赋值给 attime

 

  }

      setInterval(clock,1000)    //显示动态时间

</script>

</head>

<body>

<form>

<input type="text" id="clock" size="50"  />

</form>

</body>

</html>

 

 

 

 

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>计时器</title>

<script type="text/javascript">

   function clock(){

      var time=new Date();                     

      document.getElementById("clock").value = time;

   }// 每隔100毫秒调用clock函数，并将返回值赋值给i

     var i=setInterval("clock()",100);

</script>

</head>

<body>

  <form>

    <input type="text" id="clock" size="50"  />

    <input type="button" value="Stop" οnclick="clearInterval(i)"  />

  </form>

</body>

</html>

 

 

计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

参数说明：

1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

当我们打开网页3秒后，在弹出一个提示框，代码如下:

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

  setTimeout("alert('Hello!')", 3000 );

</script>

</head>

<body>

</body>

</html>

当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function tinfo(){

  var t=setTimeout("alert('Hello!')",5000);

 }

</script>

</head>

<body>

<form>

  <input type="button" value="start" onClick="tinfo()">

</form>

</body>

</html>

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

var num=0;

function numCount(){

 document.getElementById('txt').value=num;

 num=num+1;

 setTimeout("numCount()",1000);

 }

</script>

</head>

<body>

<form>

<input type="text" id="txt" />

<input type="button" value="Start" onClick="numCount()" />

</form>

</body>

</html>

取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

语法:

clearTimeout(id_of_setTimeout)

参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 "Stop" 按钮来停止这个计数器：

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

  var num=0,i;

  function timedCount(){

    document.getElementById('txt').value=num;

    num=num+1;

    i=setTimeout(timedCount,1000);

  }

    setTimeout(timedCount,1000);

  function stopCount(){

    clearTimeout(i);

  }

</script>

</head>

<body>

  <form>

    <input type="text" id="txt">

    <input type="button" value="Stop" onClick="stopCount()">

  </form>

</body>

</html>



History 对象

back()方法，加载 history 列表中的前一个 URL。

语法：

window.history.back();   window可以省略

比如，返回前一个浏览的页面，

window.history.back();

back()相当于go(-1),

window.history.go(-1);


orward()方法，加载 history 列表中的下一个 URL。

如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法,

history.forward();

forward()相当于go(1),

window.history.go(1);


Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL

console.log(location.href)//整个路径

console.log(location.href = '')//改变路径地址

console.log(location.host)//域名

console.log(location.protocol)//协议http: , https:

console.log(location.pathname) //路径'/learn/199'

console.log(location.search)// ？之后的参数

console.log(location.hash)//哈希值


Navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本

navigator.appName  浏览器名称

navigator.appVersion 平台和版本信息

navigator.appCodeName 浏览器代码名称字符

navigator.platform  浏览器操作系统平台

navigator.userAgent//获取浏览器类型


screen对象

screen对象用于获取用户的屏幕信息。

1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽

屏幕可用高和宽度

1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。

2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。




dcclove
关注
专栏目录
JavaScript 基础语法-BOM编程及JSON（三）
m0_60439135的博客
03-12 1253
JavaScript 基础语法-BOM编程及JSON（三）
JavaScript基础语法-计算机基础
m0_51939262的博客
01-29 148
编程语言 人用计算机解决问题 计算机基础 数据储存 程序运行 cpu与gpu CPU，俗称处理器。办公 牌子：AMD、intel GPU，显卡的主要组成部分。人工智能神经网路训练，游戏渲染倚靠其性能 集成显卡是CPU内置的，独立显卡如其名（强大） 制作工艺：asic/fpga 资料来源网络，侵权必删 ...
第十章：JavaScript基础--BOM
soulcow的博客
04-07 864
一：BOM的定义（浏览器对象模型） 在BOM中为我们提供了一组对象，用来完成对浏览器的操作 二：BOM的对象 （1）Window 代表的是整个浏览器的窗口，同时window也是网页中的全局对象 （2）Navigator 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 （3）Location 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面 （4）History 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录 由于隐私原因，
JavaScript---BOM基础
maidu_xbd的博客
05-15 211
JavaScript发展进程 1995.2月 Netscape公司发布LiveScript，后临时改为JavaScript，为了蹭上Java的热浪。 欧洲计算机制造商协会（ECMA）英文名称是European Computer Manufacturers Association 1997 年，以JavaScript 1.1 为基础。由来自 Netscape、Sun、微软、Borland ...
JavaScript基础--07BOM
weixin_41171614的博客
03-21 1478
JavaScript基础--07BOM
JavaScript----BOM基础
weixin_44711712的博客
06-29 136
BOM基础 BOM也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。 一． window对象 window对象就是BOM的核心对象。 【1】 Window对象属性： 1，history ----- 保存有窗口最近加载的URL 2，location ----- 获取当前窗口的URL 与【document.location】相同 【2】 Window对象方法： 1，系统对话框： ...
JavaScript系列--BOM
2301_79055083的博客
05-12 357
一、概述​ JS由一下几个部分组成，学习BOM要先了解一下事件DOM的基础知识​​​1.1DOM文档对象模型1.2功能控制html文档内容1.3代码获取页面标签（元素）对象 Element​ document.getElementById(“id值”)：通过元素的id1.4操作Element对象​ 1.修改属性值​ 明确获取的对象是哪一个​ 查看API文档，找其中有哪些属型可以设置​ 2.修改标签体内容：​ 属型：innerHTML。
JavaScript基础总结---重点
叶子与海的博客
10-12 3414
JavaScript基础万字总结---重点 JavaScript简介 什么是JavaScript 浏览器执行JS过程 JS的组成 JS的引入方式 函数与作用域 arguments的使用 全局变量与局部变量 预解析 对象 创建对象的三种方式 1.利用字面量创建对象 2.利用 new Object 创建对象 3.利用构造函数创建对象 遍历对象属性 变量、属性、函数、方法总结 new关键字执行过程 内置对象 Math对象 Date对象 获取时间的总毫秒 倒计时案例 Array对象 判断是否为数组 数组排序 数组
JavaScript基础04 - BOM编程
weixin_43636084的博客
04-13 674
BOM编程
前端基础学习-----BOM
weixin_68494982的博客
11-29 1155
学习前端API-BOM学习
JavaScript高级基础-2
12-20
JavaScript高级基础涵盖了许多重要的概念，其中包括BOM（Browser Object Model）操作、正则表达式以及ES6的新特性。本文将详细讲解这些知识点。 首先，BOM全称为浏览器对象模型，它允许JavaScript与浏览器进行交互...
JavaScript基础笔记-尚硅谷视频自己总结
01-13
### JavaScript基础知识点总结 #### 一、语言概念与发展历程 - **语言定义**：计算机语言是一种人与计算机之间沟通的工具。人们通过编程语言来控制和操作计算机完成特定任务。 - **语言发展历史**： - **早期阶段...
JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts（2）
weixin_43200099的博客
03-22 1557
Web APIs Web APIs和JS基础关联性 API和Web API API:应用程序编程接口 Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM DOM） DOM DOM即文档对象模型，处理HTML或XML的标准编程接口。通过DOM接口可以改变样式内容结构。如可以做轮播图、倒计时… DOM树 DOM把以上内容都看作对象。 获取元素 ID、标签名、H5新方法、特殊 getElementByld()返回一个匹配的ID元素 getElementsByTagName(） 返回标签
JSP学生学籍管理系统设计与实现(源代码+论文+开题报告+外文翻译+答辩PPT).zip
09-21
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
省市区数据，完成三级联动，选择地区
09-21
省市区数据，完成三级联动，选择地区
机械原理课程设计网球自动捡球机.doc
最新发布
09-21
机械原理课程设计网球自动捡球机.doc
2024秋招华为笔试题大全-仅供参考具体需要根据实际修改
09-21
2024秋招华为笔试题大全-仅供参考具体需要根据实际修改
借助于Ascend310 AI处理器完成深度学习算法部署任务，
09-21
应用背景为变电站电力巡检，基于YOLO v4算法模型对常见电力巡检目标进行检测，并充分利用Ascend310提供的DVPP等硬件支持能力来完成流媒体的传输、处理等任务，并对系统性能做出一定的优化。.zip深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
基于深度学习的物体识别与抓取方法，六自由度机械臂，python编写程序.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
JavaScript基础教程-掌握网页交互
1. **基于对象和事件驱动**：JavaScript的核心是对象，它可以利用内置对象如DOM（文档对象模型）和BOM（浏览器对象模型）来操作网页元素。同时，它支持事件驱动编程，允许在用户与网页交互时触发特定的代码执行。 2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值