用HTA制作好玩的小程序，在桌面上随心所欲

2023-09-01 17:39:37

HTA 小程序：创建桌面应用程序的简便指南

简介

HTA（HTML 应用程序）是一种强大的工具，使您可以利用 HTML、JavaScript 和 CSS 的强大功能来创建独立的桌面应用程序。这些应用程序可以在任何支持 HTML 和 JavaScript 的系统上运行，无需安装。在本文中，我们将深入了解 HTA 小程序的创建过程，提供代码示例，并回答常见问题。

创建 HTA 小程序

所需工具

文本编辑器（例如记事本或 Sublime Text）
基本 HTML 和 JavaScript 知识

步骤

创建新文件： 在文本编辑器中创建一个新文件并另存为 .hta 文件（例如，hello.hta）。
添加 HTML 结构： 在文件中输入以下 HTML 结构：

<html>
<head></head>
<body></body>
</html>

添加内容： 在 <body> 标签内，添加您的小程序的内容。例如，创建一个简单的计算器：

<input type="text" id="num1" placeholder="第一个数字">
<input type="text" id="num2" placeholder="第二个数字">
<select id="operator">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
</select>
<button type="button" id="calculate">计算</button>
<p id="result"></p>

添加脚本： 在 <head> 标签内或 <body> 标签的末尾添加以下 JavaScript 脚本：

document.getElementById("calculate").addEventListener("click", function() {
  var num1 = parseInt(document.getElementById("num1").value);
  var num2 = parseInt(document.getElementById("num2").value);
  var operator = document.getElementById("operator").value;
  var result;

  switch (operator) {
    case "+":
      result = num1 + num2;
      break;
    case "-":
      result = num1 - num2;
      break;
    case "*":
      result = num1 * num2;
      break;
    case "/":
      if (num2 === 0) {
        alert("除数不能为0");
      } else {
        result = num1 / num2;
      }
      break;
  }

  document.getElementById("result").innerHTML = result;
});

保存并运行： 保存文件并双击运行它。您的计算器小程序现在应该能够在您的桌面上运行。

固定到桌面

要将您的 HTA 小程序固定到桌面上，请右键单击它并选择“发送到 > 桌面（创建快捷方式）”。

示例 HTA 小程序

计算器： 如上所述，以下是计算器的 HTA 代码示例：

<html>
<head></head>
<body>
<input type="text" id="num1" placeholder="第一个数字">
<input type="text" id="num2" placeholder="第二个数字">
<select id="operator">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
</select>
<button type="button" id="calculate">计算</button>
<p id="result"></p>
<script>
document.getElementById("calculate").addEventListener("click", function() {
  var num1 = parseInt(document.getElementById("num1").value);
  var num2 = parseInt(document.getElementById("num2").value);
  var operator = document.getElementById("operator").value;
  var result;

  switch (operator) {
    case "+":
      result = num1 + num2;
      break;
    case "-":
      result = num1 - num2;
      break;
    case "*":
      result = num1 * num2;
      break;
    case "/":
      if (num2 === 0) {
        alert("除数不能为0");
      } else {
        result = num1 / num2;
      }
      break;
  }

  document.getElementById("result").innerHTML = result;
});
</script>
</body>
</html>

日历： 以下是显示当前日期和星期几的 HTA 日历示例：

<html>
<head></head>
<body>
<input type="text" id="date" placeholder="日期（格式：YYYY-MM-DD）">
<button type="button" id="show">显示</button>
<p id="result"></p>
<script>
document.getElementById("show").addEventListener("click", function() {
  var date = document.getElementById("date").value;
  var year = date.substring(0, 4);
  var month = date.substring(5, 7);
  var day = date.substring(8, 10);

  var dateObj = new Date(year, month - 1, day);

  var weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  var weekday = weekdays[dateObj.getDay()];

  var result = "日期：" + date + "，" + weekday;

  document.getElementById("result").innerHTML = result;
});
</script>
</body>
</html>

记事本： 以下是允许用户保存和加载文本文件的基本记事本 HTA 示例：

<html>
<head></head>
<body>
<textarea id="content" placeholder="在这里输入内容"></textarea>
<button type="button" id="save">保存</button>
<button type="button" id="load">加载</button>
<script>
document.getElementById("save").addEventListener("click", function() {
  var content = document.getElementById("content").value;

  if (content !== "") {
    var blob = new Blob([content], {type: "text/plain"});
    var url = URL.createObjectURL(blob);

    var a = document.createElement("a");
    a.href = url;
    a.download = "notes.txt";
    a.click();

    URL.revokeObjectURL(url);
  }
});

document.getElementById("load").addEventListener("click", function() {
  var input = document.createElement("input");
  input.type = "file";
  input.accept = ".txt";

  input.addEventListener("change", function() {
    var file = input.files[0];

    var reader = new FileReader();
    reader.onload = function() {
      document.getElementById("content").value = reader.result;
    };
    reader.readAsText(file);
  });

  input.click();
});
</script>
</body>
</html>