一个基础的js,html示例程序
需求背景：
一个 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页面按钮，即可看到输出日志信息。
