显示时间
一、BOM
在 JavaScript 中，BOM（Browser Object Model）是一个与浏览器交互的对象模型，它提供了一些对象和方法，使 JavaScript 有能力与浏览器窗口和浏览器窗口中的元素进行交互。BOM 主要包括以下几个部分：
1.Window 对象
Window 对象表示浏览器窗口，是 JavaScript 中的全局对象。所有的全局变量、函数和对象都是 Window 对象的成员。例如，alert()、confirm()、prompt()、setTimeout()、clearTimeout()、setInterval()、clearInterval() 等方法都是 Window 对象的方法。
（1）alert
alert() 函数用于在浏览器窗口中显示一个警告对话框，该对话框会阻塞用户与页面的交互，直到用户点击“确定”按钮。
（2）confirm
confirm() 函数用于在浏览器窗口中显示一个带有确认和取消按钮的对话框，该对话框会阻塞用户与页面的交互，直到用户点击“确定”或“取消”按钮。
（3）prompt
prompt() 函数用于在浏览器窗口中显示一个带有输入框和确认/取消按钮的对话框，该对话框会阻塞用户与页面的交互，直到用户输入文本并点击“确定”或“取消”按钮。
（4）setTimeout / clearTimeout
setTimeout() 函数用于在指定的时间间隔后执行一次指定的函数或代码。clearTimeout()用于取消之前通过 setTimeout()设置的定时器。
（5）setInterval / clearInterval
setInterval() 函数用于在指定的时间间隔内重复执行指定的函数或代码。clearInterval()用于取消之前通过 setInterval()设置的定时器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>obj</title>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
}
*{
box-sizing: border-box;
}
#overlay{
z-index: 999;
position: absolute;
background-color: rgba(46, 43, 43, 0.156);
left: 0;right: 0;
top: 0;bottom: 0;
display: none;
}
#overlay_content{
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
#overlay_content>img {
animation: spinner-animation 2s linear infinite;
border: 1px solid #000;
border-radius: 50%;
}
@keyframes spinner-animation{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(359deg);
}
}
</style>
<script src="/assets/js/utils.js"></script>
</head>
<body>
<button id="btn">Hello</button>
<div id="overlay">
<div id="overlay_content">
<img id="spin" src="/assets/imgs/小羊.jfif" alt="1">
</div>
</div>
<script>
console.log("5".padStart(4,"0"));
console.log(formatDate(new Date()));
let timer = null;
spin.onclick = function(){
console.log("spin click");
if(timer != null){
clearTimeout(timer);
timer = null;
console.log("spin clear timeout");
}
if(intervaler != null){
clearInterval(intervaler);
intervaler = null;
console.log("spin clear interval");
}
}
document.getElementById("btn").onclick = function(){
console.log(this);
this.disabled = true;
console.log(overlay);
overlay.style.display = "block";
timer = setTimeout(()=>{
console.log(this, "this...");
overlay.style.display = "none";
this.disabled = false;
},3000);
}
let intervaler = setInterval(()=>{
console.log("interval...");
},1000);
</script>
</body>
</html>
2.Location 对象
Location 对象表示当前窗口的 URL，它提供了一些属性和方法，使 JavaScript 有能力改变当前文档的 URL。例如，location.href、location.reload() 等。
（1）location.href
location.href 属性用于获取或设置当前文档的 URL。
（2）location.hash
location.hash 属性用于获取或设置当前文档的哈希值（即 URL 中的 "#" 后面的部分）。
3.Navigator 对象
Navigator 对象表示浏览器的信息，包括浏览器的名称、版本、平台等。例如，navigator.userAgent、navigator.platform 等。
4.Screen 对象
Screen 对象表示用户的屏幕信息，包括屏幕的宽度、高度、可用宽度、可用高度等。例如，screen.width、screen.height 等。
5.History 对象
History 对象表示浏览器的历史记录，可以用来控制浏览器的前进、后退等操作。例如，history.back()、history.forward()、history.go() 等。
二、DOM
1.DOM介绍
- DOM (Document Object Model)：文档对象模型。
- 将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。
2.Element 元素的获取操作
方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的获取</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" name="username"/>
</body>
<script>
// 1. getElementById() 根据id属性值获取元素对象
let div1 = document.getElementById("div1");
alert(div1);
// 2. getElementsByTagName() 根据元素名称获取元素对象们，返回数组
let divs = document.getElementsByTagName("div");
alert(divs.length);
// 3. getElementsByClassName() 根据class属性值获取元素对象们，返回数组
let cls = document.getElementsByClassName("cls");
alert(cls.length);
// 4. getElementsByName() 根据name属性值获取元素对象们，返回数组
let username = document.getElementsByName("username");
alert(username.length);
// 5. 子元素对象.parentElement属性 获取当前元素的父元素
let body = div1.parentElement;
alert(body);
</script>
</html>
3.Element 元素的增删改操作
方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的增删改</title>
</head>
<body>
<select id="s">
<option>---请选择---</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</body>
<script>
//1. createElement() 创建新的元素
let option = document.createElement("option");
//为option添加文本内容
option.innerText = "深圳";
//2. appendChild() 将子元素添加到父元素中
let select = document.getElementById("s");
select.appendChild(option);
//3. removeChild() 通过父元素删除子元素
//select.removeChild(option);
//4. replaceChild() 用新元素替换老元素
let option2 = document.createElement("option");
option2.innerText = "杭州";
select.replaceChild(option2, option);
</script>
</html>
4.Attribute 属性的操作
方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性的操作</title>
<style>
.aColor{
color: blue;
}
</style>
</head>
<body>
<a>点我呀</a>
</body>
<script>
// 1. setAttribute() 添加属性
let a = document.getElementsByTagName("a")[0];
a.setAttribute("href","https://www.baidu.com");
// 2. getAttribute() 获取属性
let value = a.getAttribute("href");
//alert(value);
// 3. removeAttribute() 删除属性
//a.removeAttribute("href");
// 4. style属性 添加样式
a.style.color = "red";
// 5. className属性 添加指定样式
a.className = "aColor";
</script>
</html>
5.Text 文本的操作
方法：
三、const、var、let和回调函数
1.const
const 声明一个只读的常量。一旦声明，常量的值就不能改变。但是const 保证的不是变量的值不得改动，而是变量指向的那个内存地址不得改动，如果是基本类型的话，变量的值就保存在那个内存地址上，也就是常量，如果是引用类型，它内部的值是可以变更的。
2.var
通过 var 关键字定义 JavaScript 变量 。
var 的缺陷
所有未声明直接赋值的变量都会自动挂在顶层对象下，造成全局环境变量不可控、混乱
1.变量提升（hoisted）
在未定义任何变量 a 的情况下，直接使用 console.log(a);会导致异常；
而在console.log(a);后定义a，则会将a打印成undefined；
2.作用域规则
var 声明可以在包含它的函数，模块，命名空间或全局作用域内部任何位置被访问，包含它的代码块对此没有什么影响，所以多次声明同一个变量并不会报错。
3.let
let 与 var 的写法一致，不同的是它使用的是块作用域。
let 解决了 var 的两个缺陷：使用 let 在全局作用域下声明的变量也不是顶层对象的属性；不允许同一块中重复声明。
暂时性死区（TDZ）
指 let 声明的变量在被声明之前不能被访问
console.log(x) // Uncaught ReferenceError: x is not defined
let x = 14.var 、 let 、 const 的不同
- 作用域规则
let/const 声明的变量属于块作用域，只能在其块或子块中可用。而 var 声明的变量的作用域是是全局或者整个封闭函数
- 重复声明/重复赋值
var 可以重复声明和重复赋值
let 仅允许重复赋值，但不能重复声明
const 既不可以重复赋值，也不能重复声明
- 变量提升（hoisted）
var 声明的变量存在变量提升，即可以在变量声明前访问变量，值为undefined
let 和 const 不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错ReferenceError
- 暂时死区（TDZ）
var不存在暂时性死区， let和const存在暂时性死区，只有变量声明后，才能被访问或使用。
5.回调函数
在JavaScript中，冒泡排序（Bubble Sort）是一种简单的排序算法。它重复地遍历要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。遍历数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
Sort 函数接受一个数组作为参数，并返回排序后的数组。通过两层循环，比较每个相邻元素并在需要时交换它们。这个过程会重复进行，直到整个数组排序完成。
思维导图如下
扫一扫
689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
