如何通过点击按钮来启动倒计时计时器，而不是在页面加载时启动？

要通过点击按钮来启动倒计时计时器，而不是在页面加载时启动，可以通过以下步骤实现：

HTML部分：在HTML中，创建一个按钮元素，并为其添加一个唯一的id属性，以便在JavaScript中引用它。例如：

<button id="startButton">启动倒计时</button>

JavaScript部分：使用JavaScript来处理按钮的点击事件，并在点击按钮时启动倒计时计时器。可以使用addEventListener方法来监听按钮的点击事件，并在事件处理程序中启动计时器。例如：

// 获取按钮元素
var startButton = document.getElementById("startButton");

// 定义倒计时时间（以秒为单位）
var countdownTime = 60;

// 定义计时器变量
var countdownTimer;

// 按钮点击事件处理程序
startButton.addEventListener("click", function() {
  // 禁用按钮，防止重复点击
  startButton.disabled = true;
  
  // 启动计时器
  countdownTimer = setInterval(function() {
    // 更新倒计时时间
    countdownTime--;
    
    // 显示倒计时时间
    console.log("倒计时剩余时间：" + countdownTime + "秒");
    
    // 判断倒计时是否结束
    if (countdownTime <= 0) {
      // 倒计时结束，清除计时器
      clearInterval(countdownTimer);
      
      // 启用按钮
      startButton.disabled = false;
    }
  }, 1000); // 每秒执行一次
});

以上代码中，通过addEventListener方法监听按钮的点击事件，并在点击事件处理程序中启动计时器。计时器使用setInterval方法每秒执行一次，更新倒计时时间并判断是否结束。当倒计时结束时，清除计时器并启用按钮。

这是一个简单的示例，你可以根据实际需求进行修改和扩展。关于倒计时计时器的更多功能和样式，可以通过前端开发相关的技术和框架进行实现。

注意：以上代码仅为示例，具体实现方式可能因使用的编程语言、框架和技术而有所差异。