一个基础的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页面按钮，即可看到输出日志信息。

 

posted @ 2024-08-06 09:14  He_LiangLiang  阅读(28)  评论(0)    收藏  举报