JavaScript WebAPI（三）（详解）

这次介绍一下webAPI中的一些知识：

// 立即执行函数中传递的函数是一个回调函数
(function(){  
    console.log("我是回调函数")
})();

// 监听事件中传递的参数是一个回调函数
const div = document.querySelector('div')
div.addEventListener('click',function(){
    console.log("我是回调函数")
})

只需要记住，如果一个函数A调用函数B作为自己的参数，那么函数B就是回调函数

时间戳是指用来表示某个时间点的数字或字符串。它通常是一个长整型数字，表示自某个固定的起始时间（如1970年1月1日00:00:00 UTC）到某个特定时间点所经过的秒数或毫秒数。时间戳在计算机系统中广泛应用，用于记录事件发生时间、排序、计时等方面。

时间戳的定义可以有多种形式，最常见的是UNIX时间戳，即从1970年1月1日00:00:00 UTC开始计算的秒数。例如，当前时间的UNIX时间戳可以表示为一个长整型数字，比如1638356433。

const date = new Date(2022, 9, 24, 11, 30, 0);

<!DOCTYPE html&gt;
<html lang="en"&gt;

<head&gt;
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
    </div>
    <script>
        const div = document.querySelector('div')
        div.addEventListener('touchstart', function () {
            console.log("开始触摸")
        })
        div.addEventListener('touchend', function () {
            console.log('离开了')
        })
        div.addEventListener('touchmove', function () {
            console.log('一直摸，移动')
        })
    </script>
</body>

</html>

setInterval(code, delay)

setInterval(function() {
  console.log("Hello, World!");
}, 1000);

定时器会按照指定的时间间隔循环执行指定的代码或函数，直到页面被关闭或调用clearInterval()停止定时器。

需要注意返回的值是唯一的，一个定时器对应一个标识符，可以使用这个标识符来取消定时器，即停止代码的执行。可以使用clearInterval()方法来取消定时器，示例如下：

var timerId = setInterval(function() {
  console.log("Hello, World!");
}, 1000);

// 取消定时器
clearInterval(timerId);

<!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>
        const l = setInterval(() => {
            console.log(1)
        }, 1000);
        setTimeout(function(){
            clearInterval(l)
            console.log("清除成功")
        },3000)
    </script>
</body>
</html>

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
var value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 存储数据
sessionStorage.setItem('key', 'value');

// 获取数据
var value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

// 打开或创建数据库
var request = window.indexedDB.open('databaseName', version);

// 监听打开数据库的成功事件
request.onsuccess = function(event) {
  var db = event.target.result;
  
  // 执行数据库操作
  // ...
};

// 监听打开数据库的错误事件
request.onerror = function(event) {
  console.error("Database error: " + event.target.errorCode);
};

// 创建一个对象存储空间
var objectStore = db.createObjectStore('storeName', { keyPath: 'key' });

// 存储数据
var transaction = db.transaction('storeName', 'readwrite');
var store = transaction.objectStore('storeName');
store.put({ key: 'key1', value: 'value1' });

// 获取数据
var getRequest = store.get('key1');
getRequest.onsuccess = function(event) {
  var result = event.target.result;
  console.log(result);
};

// 删除数据
var deleteRequest = store.delete('key1');
deleteRequest.onsuccess = function(event) {
  console.log("Data deleted successfully");
};