怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  822 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

E:\song\threejs_learn\vite-project\index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

E:\song\threejs_learn\vite-project\src\counter.ts

/**
* 1. 计数器
* @param element html元素
*/
export function setupCounter(element: HTMLButtonElement) {
// 计数器初始值
let counter = 0;
// 回调函数
const setCounter = (count: number) => {
counter = count;
element.innerHTML = `count is ${counter}`;
};
// 添加click事件
element.addEventListener("click", () => setCounter(counter + 1));
setCounter(0);
}

E:\song\threejs_learn\vite-project\src\main.ts

/**
* 1. vanilla + typescript
* 2. 原生加ts大法
* 3. 这是使用vite创建的模板
*/
import "./style.css";
import { setupCounter } from "./counter";
document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://www.typescriptlang.org/" target="_blank">
<img src="/typescript.svg" class="logo vanilla" alt="TypeScript logo" />
</a>
<h1>Vite + TypeScript</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite and TypeScript logos to learn more
</p>
</div>
`;
setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);
posted on   超级无敌美少男战士  阅读(31)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示