一个基础的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 @   He_LiangLiang  阅读(3)  评论(0)  编辑  收藏  举报
相关博文：
· 获取当前时间戳
· 计算函数耗时
· js的event
· 按钮显示倒计时JS
· javascript的一些小demo
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛