需求背景：
一个 html, 一个js脚本。 要求 html里面提供若干按钮。第1个按钮，点击之后，触发js里面的 add 函数， 第2个按钮点击之后触发js里面的 del 函数。 第3个按钮，点击之后，在按钮右侧，显示当前时间，每点击一次刷新下一次。 还有，在每个函数调用里面，函数开通打印当前时间戳（精确到毫秒），函数结束打印时间戳，并输出函数执行了多少毫秒。
//// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Functions</title>
</head>
<body>
<button id="addBtn">Add</button>
<button id="delBtn">Delete</button>
<button id="timeBtn">Show Time</button>
<div id="timeDisplay"></div>
<script src="script.js"></script>
</body>
</html>
javascript部分（script.js）
document.getElementById('addBtn').addEventListener('click', function() {
add();
});
document.getElementById('delBtn').addEventListener('click', function() {
del();
});
document.getElementById('timeBtn').addEventListener('click', function() {
showTime();
});
function add() {
const startTime = Date.now();
console.log(`add function start at: ${startTime}`);
// 这里添加add函数的具体逻辑
console.log("Add function logic here...");
let sum = 0; // 引入一个sum变量来演示自加操作（虽然在这个例子中它的值不会被外部使用）
for (let i = 1; i <= 1000000; i++) {
sum += i; // 自加操作
if (i % 100000 === 0) { // 每1000次迭代打印一次
console.log(`Iteration ${i}, sum so far: ${sum}`);
}
}
const endTime = Date.now();
const duration = endTime - startTime;
console.log(`add function ended at: ${endTime}, duration: ${duration}ms`);
}
function del() {
const startTime = Date.now();
console.log(`del function start at: ${startTime}`);
// 这里添加del函数的具体逻辑（如果需要的话）
console.log("Del function logic here (placeholder)...");
let sum = 0; // 引入一个sum变量来演示自加操作（虽然在这个例子中它的值不会被外部使用）
for (let i = 1; i <= 1000000; i++) {
sum += i; // 自加操作
if (i % 100000 === 0) { // 每1000次迭代打印一次
console.log(`Iteration ${i}, sum so far: ${sum}`);
}
}
const endTime = Date.now();
const duration = endTime - startTime;
console.log(`del function ended at: ${endTime}, duration: ${duration}ms`);
}
function showTime() {
const currentTime = new Date().toLocaleTimeString();
document.getElementById('timeDisplay').textContent = currentTime;
console.log(`Current time displayed: ${currentTime}`);
}
双击 index.html， 按F12打开浏览器调试窗口，点击 index.html页面按钮，即可看到输出日志信息。
标签：function,示例,点击,js,add,html,按钮 From： https://www.cnblogs.com/music-liang/p/18344461