Date日期对象
在 JavaScript 中，你可以使用 Date 对象来处理日期和时间。以下是一些常见的 Date 对象的使用方法：
- 获取当前日期和时间
- 设置日期和时间
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../assets/js/date.js"></script>
</head>
<body>
<script>
let now=new Date();
console.log(formatDate(now));
const df=new Date();
console.log(df);
//比正常时间少10秒
let nowTime = df.getTime();
nowTime -=1000 * 10;
console.log (formatDate(new Date(nowTime)));
console.log("9".padStart(2,"0"));//09
console.log("9".padEnd(3,"2"));//922
</script>
</body>
</html>
执行结果
BOM
在 JavaScript 中，BOM（Browser Object Model）是一个与浏览器交互的对象模型，它提供了一些对象和方法，使 JavaScript 有能力与浏览器窗口和浏览器窗口中的元素进行交互。BOM 主要包括以下几个部分：
- Window 对象：Window 对象表示浏览器窗口，是 JavaScript 中的全局对象。所有的全局变量、函数和对象都是 Window 对象的成员。例如，alert()、confirm()、prompt()、setTimeout()、clearTimeout()、setInterval()、clearInterval() 等方法都是 Window 对象的方法。
- Location 对象：Location 对象表示当前窗口的 URL，它提供了一些属性和方法，使 JavaScript 有能力改变当前文档的 URL。例如，location.href、location.reload() 等。
- Navigator 对象：Navigator 对象表示浏览器的信息，包括浏览器的名称、版本、平台等。例如，navigator.userAgent、navigator.platform 等。
- Screen 对象：Screen 对象表示用户的屏幕信息，包括屏幕的宽度、高度、可用宽度、可用高度等。例如，screen.width、screen.height 等。
- History 对象：History 对象表示浏览器的历史记录，可以用来控制浏览器的前进、后退等操作。例如，history.back()、history.forward()、history.go() 等。
需要注意的是，BOM 是浏览器环境中的特性，只有在浏览器环境中才能使用。如果在 Node.js 等非浏览器环境中使用 BOM，将会出现错误。
alerf指令
alert() 函数用于在浏览器窗口中显示一个警告对话框，该对话框会阻塞用户与页面的交互，直到用户点击“确定”按钮。
代码示例
alerf("点我干啥！");执行结果
执行上述代码，会跳出一个”点我干啥！“警示框。
confirm指令
confirm() 函数用于在浏览器窗口中显示一个带有确认和取消按钮的对话框，该对话框会阻塞用户与页面的交互，直到用户点击“确定”或“取消”按钮。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function click2(){
console.log(this);
const result =confirm ("您确定要删除这个项目吗？");
if(result){
console.log("用户点击了确定按钮");
}else{
console.log("用户点击了取消按钮");
</script>
<button onclick="click2()">hello woed</button>
</body>
</html>执行结果
当运行上述代码时，浏览器页面上会有一个hello woed按钮，点击按钮会出现一个包含 "您确定要删除这个项目吗？" 文本的带有确认和取消按钮的对话框。用户可以选择点击“确定”或“取消”按钮。如果用户点击“确定”按钮，则 confirm() 函数返回 true；如果用户点击“取消”按钮，则 confirm() 函数返回 false。
prompt指令
prompt() 函数用于在浏览器窗口中显示一个带有输入框和确认/取消按钮的对话框，该对话框会阻塞用户与页面的交互，直到用户输入文本并点击“确定”或“取消”按钮。
代码示例
const result = prompt("请输入您的名字：", "默认名字");
if (result !== null) {
console.log("用户输入的名字是：" + result);
} else {
console.log("用户点击了取消按钮。");
}执行结果
当运行上述代码时，浏览器会弹出一个包含 "请输入您的名字：" 文本的带有输入框和确认/取消按钮的对话框。用户可以在输入框中输入文本，然后点击“确定”或“取消”按钮。如果用户点击“确定”按钮，则 prompt() 函数返回用户输入的文本；如果用户点击“取消”按钮，则 prompt() 函数返回 null。
setTimeout / clearTimeout指令
setTimeout() 函数用于在指定的时间间隔后执行一次指定的函数或代码。而clearTimeout（）则是用于取消setTimeout（）设定的函数。
代码示例
function sayHello() {
console.log("Hello, World!");
}
// 设置定时器
const timeoutId = setTimeout(sayHello, 3000);
// 取消定时器
clearTimeout(timeoutId);当运行上述代码时，sayHello() 函数将在 3 秒后执行。setTimeout() 函数返回一个 timeoutId，它是一个整数，表示定时器的唯一标识符。您可以使用 clearTimeout() 函数取消定时器。
setInterval / clearInterval指令
setInterval() 函数用于在指定的时间间隔内重复执行指定的函数或代码。而clearlnterval（）则是用于取消setlnterval（）设定的函数。
代码示例
function sayHello() {
console.log("Hello, World!");
}
const intervalId = setInterval(sayHello, 3000);
// 取消定时器
clearInterval(intervalId);当运行上述代码时，sayHello() 函数将每隔 3 秒执行一次。setInterval() 函数返回一个 intervalId，它是一个整数，表示定时器的唯一标识符。您可以使用 clearInterval() 函数取消定时器。
location.href指令
location.href 属性用于获取或设置当前文档的 URL。
代码示例
/ 获取当前文档的 URL
const currentUrl = location.href;
console.log(currentUrl);
// 设置当前文档的 URL
location.href = "https://www.baidu.com";当运行上述代码时，currentUrl 变量将存储当前文档的 URL，然后使用 console.log() 函数将其输出到控制台。接下来，我们将当前文档的 URL 设置为 "https://www.baidu.com"，浏览器将导航到该 URL。
location.hash
location.hash 属性用于获取或设置当前文档的哈希值（即 URL 中的 "#" 后面的部分）。
代码示例
// 获取当前文档的哈希值
const currentHash = location.hash;
console.log(currentHash);
// 设置当前文档的哈希值
location.hash = "#section2";当运行上述代码时，currentHash 变量将存储当前文档的哈希值，然后使用 console.log() 函数将其输出到控制台。接下来，我们将当前文档的哈希值设置为 "#section2"，浏览器将滚动到具有该哈希值的元素（锚定位）。
location.reload指令
location.reload属性用于重新加载当前文档
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">hello</button>
<script>
document.getElementById("btn").onclick=function(){
console.log(this);
location.reload();//从缓存中重新加载页面
}
</script>
</body>
</html>执行结果
执行代码，浏览器页面会出现hello按钮，点击按钮，页面重新加载。
DOM
在 JavaScript 中，DOM（文档对象模型）是表示和操作 HTML 或 XML 文档的标准接口。DOM 提供了一种在代码中动态访问和更新文档的方式。文档节点是 DOM 中的最顶层节点，代表整个文档。
- DOM (Document Object Model)：文档对象模型。
- 将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。
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>执行结果
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>执行结果
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>执行结果
Text 文本的操作
代码示例
<!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="div"></div>
</body>
<script>
//1. innerText 添加文本内容，不解析标签
let div = document.getElementById("div");
div.innerText = "我是div";
//div.innerText = "<b>我是div</b>";
//2. innerHTML 添加文本内容，解析标签
div.innerHTML = "<b>我是div</b>";
</script>
</html>执行结果
const指令
const 声明一个只读的常量。一旦声明，常量的值就不能改变。
const a = 1;
a = 2; // Uncaught TypeError: Assignment to constant variable.因此， const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
const s; // 声明未赋值
// Uncaught SyntaxError: Missing initializer in const declaration注意，这里 const 保证的不是变量的值不得改动，而是变量指向的那个内存地址不得改动，如果是基本类型的话，变量的值就保存在那个内存地址上，也就是常量，如果是引用类型，它内部的值是可以变更的。
var指令
在 ES6 之前我们都是通过 var 关键字定义 JavaScript 变量。ES6 才新增了 let 和 const 关键字
在全局作用域下使用 var 声明一个变量，默认它是挂载在顶层对象 window 对象下（Node 是 global）。
var 缺陷一：所有未声明直接赋值的变量都会自动挂在顶层对象下，造成全局环境变量不可控、混乱。
1.变量提升（hoisted）
在未定义任何变量 a 的情况下，直接使用 console.log(a);会导致异常；
而在console.log(a);后定义a，则会将a打印成undefined；
2.作用域规则
var 声明可以在包含它的函数，模块，命名空间或全局作用域内部任何位置被访问，包含它的代码块对此没有什么影响，所以多次声明同一个变量并不会报错：
let指令
let 与 var 的写法一致，不同的是它使用的是块作用域
同时， let 解决了 var 的两个缺陷：
1.使用 let 在全局作用域下声明的变量也不是顶层对象的属性
2.不允许同一块中重复声明
练习
<!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>
html,body{
margin: 0;
padding: 0;
height: 100%;
}
*{
box-sizing: border-box;
}
#overlay{
z-index: 999; /* 在html页面上堆叠顺序 */
position: absolute;/*当一个元素的 position 属性设置为 absolute 时，该元素将从文档流中移除*/
background-color: rgba(241, 237, 237, 0.438);
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
}
@keyframes spinner-animation{
0%{
transform: rotate(0deg);/*用于设置 HTML 元素的旋转角度。当一个元素的 transform 属性设置为 rotate(0) 时，该元素将不会旋转，保持其原始方向。*/
}
100% {
transform: rotate(359deg);/
}
}
#overlay-centor{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#overlay-centor>img{
animation: spinner-animation 4s linear infinite;
border-radius: 50%;
height: 30rem;
width: 30rem;
}
</style>
</head>
<body>
<button id="btn">hello</button>
<div id="overlay">
<div id="overlay-centor">
<img id="spin" src="../assets/img/龙.png">
</div>
</div>
<script>
let timer=null;
spin.onclick = function(){
console.log("spin cli");
if(timer !=null){
clearTimeout(timer);
timer = null;
console.log("spin clear timeout")
}
if(interval != null){
clearInterval(interval);
interval = null;
}
}
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 interval = setInterval(() => {
console.log("interval.....");
},1000);
</script>
</body>
</html>执行结果
执行代码后，浏览器页面出现一个hello按钮，点击按钮会出现图片旋转，同时页面被屏蔽，3秒后，页面恢复
扫一扫
849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
