项目备份

static/dexieParse.js

@@ -0,0 +1,49 @@
+// dexie文档：https://dexie.org/docs/API-Reference  https://www.npmrc.cn/en/Dexie-js.html
+class dexieDemo {
+  dbName = "jafar";
+  dbVersion = 1;
+  constructor(dbName, dbVersion) {
+    if (dbName) {
+      this.dbName = dbName;
+    }
+    if (dbVersion) {
+      this.dbVersion = dbVersion;
+    }
+    this.db = new Dexie(this.dbName);
+    this.db.version(this.dbVersion).stores(
+      { tabName: "++id,nKey,nValue,nTime" }, // 创建表，已有表则建立链接，id为自增主键；仅需要列举需要索引的字段即可
+    );
+  }
+  async get() {
+    const getLastData = await this.db.tabName.orderBy("id").last();
+    return getLastData;
+  }
+  async post(nKey, nValue) {
+    await this.db.tabName.add({
+      nKey: nKey,
+      nValue: nValue,
+      nTime: Date.now(),
+    });
+    const getLastData = await this.db.tabName.orderBy("id").last();
+  }
+  async put(id) {
+    await this.db.tabName.put({
+      id: 1,
+      userName: "zhangsan",
+    });
+  }
+  async del(id) {
+    await this.db.tabName.delete(id);
+  }
+}
+
+export const myDexie = new dexieDemo();
+
+// document.querySelector("#goto_indexedDB_post").addEventListener("click",async () => {
+//     let nKey = Math.random()
+//     let nValue = new Date().getTime();
+//     await myDexieDemo.post( nKey,nValue );
+// })
+// document.querySelector("#goto_indexedDB_get").addEventListener("click",async () => {
+//     console.log( await myDexieDemo.get() )
+// })

static/script.js

@@ -0,0 +1,18 @@
+// addEventListener 能添加事件
+// 鼠标事件 : 如 click（点击）、dblclick（双击）、mousedown（按下鼠标键）、mouseup（释放鼠标键）、mousemove（鼠标移动）、mouseenter（鼠标进入元素）、mouseleave（鼠标离开元素）、mouseover（鼠标悬停）和 mouseout（鼠标移出）。
+//  键盘事件 : 如 keydown（按下键盘键）、keyup（释放键盘键）和 keypress（按下字符键，已废弃）。
+//  触摸与指针事件 : 如 touchstart（触摸开始）、touchmove（触摸移动）、touchend（触摸结束）、pointerdown（指针按下）和 pointerup（指针释放），适用于触屏设备和笔输入。
+//  表单事件 : 如 submit（表单提交）、change（值改变）、input（输入内容）、focus（获得焦点）和 blur（失去焦点）。
+//  窗口与页面事件 : 如 load（页面加载完成）、resize（窗口大小改变）、scroll（滚动）、beforeunload（页面即将卸载）和 unload（页面卸载）。
+//  媒体事件 : 如 play（媒体开始播放）、pause（媒体暂停）、ended（媒体播放结束）和 loadeddata（媒体数据加载完成）。
+//  自定义事件 : 可以通过 Event 构造函数创建并派发自定义事件，用于应用内部组件通信。
+
+// 监听DOM加载完成事件
+document.addEventListener("DOMContentLoaded", function () {
+  console.log("document加载完成!!!");
+});
+
+document.querySelector("#appChildEleButton").addEventListener("click", () => {
+  const resultDiv = document.getElementById("appChildEle");
+  resultDiv.innerHTML += `<li>点击添加元素完成</li>`;
+});

static/styles.css

@@ -0,0 +1,39 @@
+.myFontWenDao {
+  font-family: myFontWenDao, sans-serif;
+}
+
+#app {
+  border: 1px dotted blueviolet;
+  border-radius: 3rem;
+  padding: 2rem;
+  margin: 1rem;
+}
+
+#app .title {
+  text-align: center;
+}
+#appChildEleButton {
+  background-color: whitesmoke;
+  border: 2px dotted grey;
+  border-radius: 0.5rem;
+}
+#appChildEleButton :hover {
+  opacity: 0.5;
+  background-color: black;
+}
+
+.con {
+  padding: 0.5rem;
+  margin: 1rem auto;
+  border: 1px dotted grey;
+  border-radius: 1rem;
+  text-align: center;
+  width: fit-content;
+}
+li {
+  display: block;
+}
+
+#localVideo {
+  display: none;
+}