• JavaScript学习之路---JavaScript操作BOM

    JavaScript操作BOM

    BOM模型概述：

    BOM一般是操作网页之间的操作，DOM是操作html等节点的操作
    在这里插入图片描述

    常见的BOM对象

    浏览器对象模型（BOM）可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作，常见的BOM对象如下：

    • Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
    • Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
    • Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
    • History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
    • Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

    这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。

    BOM可以实现的功能：

    • 弹出新的浏览器窗口
    • 移动、关闭浏览器窗口以及调整窗口的大小
    • 页面的前进、后退

    Windows对象

    常用属性：

    在这里插入图片描述

    语法：

    window.属性名= "属性值" 

    • 1

    示例：

    window.location="login.html" ;  

    • 1

    常用方法：

    在这里插入图片描述

    三种输入框：

    confirm()：弹出一个确认对话框

    confirm()与alert ()、 prompt()区别：

    alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

    prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息

    confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

    示例：

    var color=window.prompt("请输入颜色");
document.write(color);
window.alert("alert");
window.confirm("confirm");

    • 1
    • 2
    • 3
    • 4
    prompt框：

    在这里插入图片描述

    alert框：

    在这里插入图片描述

    confirm框：

    在这里插入图片描述

    open()

    语法：
    window.open("弹出窗口的url","窗口名称","窗口特征”)

    • 1
    属性：

    在这里插入图片描述
    注意：有的浏览器取消了自动弹出拦截功能，需要手动打开！！

    history对象

    常用方法：

    在这里插入图片描述
    go()方法的值：

    go()：可以用来跳转到指定的页面，它需要一个整数作为参数

    • 1：表示向前跳转一个页面，相当于forward()
    • 2：表示向前跳转两个页面
    • -1：表示向后跳转一个页面，相当于back()
    • -2：表示向后跳转两个页面

    特点：
    在这里插入图片描述

    location对象：

    Location对象中封装了浏览器的地址栏的信息，如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）

    常用方法和属性：

    在这里插入图片描述
    示例：

    <a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回主页面</a>

    • 1
    • 2
    • 3

    Document对象：

    常用属性：

    在这里插入图片描述
    示例：
    1.判断页面是否是链接进入
    2.自动跳转到登录页面

    var preUrl=document.referrer;  //载入本页面文档的地址
if(preUrl==""){	
      document.write("<h2>您不是从领奖页面进入，5秒后将自动 
                         跳转到登录页面</h2>");
      setTimeout("javascript:location.href='login.html'",5000);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    常用方法：

    在这里插入图片描述
    使用方法参考：

    操作DOM对象

    innerHTML：

    获取html节点的内容和标签，写入html标签时可以被识别为html元素：

    读取：

    	<body>
		<div id="myclock"><h1>innerHTML</h1></div>
	</body>
	<script >
			var inner=document.getElementById("myclock");
			console.log(inner.innerHTML);
	</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    可以看到输出


    在这里插入图片描述

    写入：

    	<body>
		<div id="myclock"></div>
	</body>
	<script >
		document.getElementById("myclock").innerHTML ="
    innerHTML
    "    ;
	</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    可以看到写入的html标签被识别
    在这里插入图片描述

    innerText：

    写入的文本时会原样输出
    读取的文本，只能读取到文本内容，不能读取标签

    读取：

    
	
    innerText
    



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述

    写入：

    	<body>
		<div id="myclock"></div>
	</body>
	<script >
		document.getElementById("myclock").innerText ="
    innerText
    "    ;
	</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    JavaScript内置对象

    Date：用于操作日期和时间

    定义格式：

    var 日期对象=new Date(参数)
    参数格式：MM DD,YYYY,hh:mm:ss

    var  today=new Date();   //返回当前日期和时间
var tdate=new Date("september 18,2022,14:58:12");  //设置时间

    • 1
    • 2

    在这里插入图片描述

    常用方法：

    在这里插入图片描述
    示例：

    console.log("========操作时间=========")
var date = new Date();
console.log(date);

console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述
    案例：
    使用Date对象的方法显示当前时间的小时、分钟和秒

    function disptime(){
var today = new Date();  
var hh = today.getHours(); 
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
}
disptime();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述
    发现制作的时钟特效示例中，时间不改变
    由于时间在不停地走，所以应该每隔1秒调用显示时间的方法，需要配合定时函数使用：

    定时函数：

    setTimeout()

    格式：

    setTimeout("调用的函数",等待的毫秒数)

    • 1

    示例：

    //1秒(1000毫秒)之后执行函数disptime()一次
var  myTime＝setTimeout("disptime() ", 1000 );

    • 1
    • 2

    案例：
    三秒后提示

    <input name="s" type="button" value="显示提示消息" onclick="timer()" />
function timer(){
        var t=setTimeout("alert('3 seconds')",3000);
}

    • 1
    • 2
    • 3
    • 4
    setInterval()

    格式：

    setInterval("调用的函数",间隔的毫秒数)

    • 1

    示例：

    每隔1秒(1000毫秒)执行函数disptime()一次
var  myTime＝setInterval("disptime() ", 1000 );

    • 1
    • 2

    如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()

    两个定时函数的区别；

    • setTimeout()在等待指定时间后执行函数，且只执行一次；

    • setInterval()可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval方法会不停地调用函数，所以时钟例子使用setInterval();

    清除函数：

    clearTimeout()

    格式：

    clearTimeout(setTimeOut()返回的ID值)

    • 1

    示例：

    var  myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；

    • 1
    • 2
    clearInterval ()

    格式：

    clearInterval(setInterval()返回的ID值)

    • 1

    示例：

    var  myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；

    • 1
    • 2
    区别：
    • clearTimeout()清除由setTimeout()设置的定时；
    • clearInterval()清除由setInterval()设置的定时；

    Math：用于执行常用的数学任务，它包含了若干个数字常量和函数

    在这里插入图片描述
    示例：
    生成整数范围为2~99：

    var iNum=Math.floor(Math.random()*98+2);

    • 1

    String：用于支持对字符串的处理

    具体操作参考：
    String对象的方法

    Array：用于在单独的变量名中存储一系列的值

    小结：

    在这里插入图片描述

  • 相关阅读:
    尚医通 (二十六) --------- 科室接口开发
    tailwindcss安装完插件代码不提示
    软件测试面试必问：为什么要选择软件测试？
    【学习笔记44】JavaScript的事件传播
    Windows OpenGL ES 图像绿幕抠图
    当年的java考试：Java景区预约登记管理系统(maven整合servlet)
    PHP 初学 GO 学习笔记
    一次性彻底解决 Web 工程中文乱码问题
    「JAVA面试」半年多面试了20多家中大厂，谈谈如何准备面试？
    【标定】张正友：A Flexible New Technique for Camera Calibration
  • 原文地址：https://blog.csdn.net/qq_57480977/article/details/126401139