Question

事实上，对于那些理解HTML编程的人来说，这是一件容易的事情，但不幸的是我不在这个领域......

我想问一下如何创建一个html文件，该文件可以在html文件的同一目录中生成.txt。在这种情况下，我想将该txt用于家庭自动化。

我需要2个包含2个选项列表的下拉列表

首先称为'LAMP'并包含2个选项：“ON”和“OFF”

秒被称为'BLOWER'，还包含：“ON”和“OFF”

我还需要一个按钮。按下按钮时，此html会根据选择的选项生成.txt个文件。

检查屏幕截图以查看我的界面说明

如果按下生成的按钮，它就会像这样

示例：

如果LAMP为ON且BLOWER为OFF，则生成的文件中的文本应为“10”

如果LAMP为OFF并且BLOWER为ON，则生成的文件中的文本应为“01”

有人可以帮助我使用.html代码吗？三江源

Answer 1

您可以将select元素，a元素与download属性href一起使用，以设置为data URI文本文件的表示形式。

＆＃13;

var select = document.querySelector("select");
select.addEventListener("change", function(e) {
  var text = e.target.value === "LAMP" ? "10" : "01";
  var file = "data:text/plain," + text;
  var a = document.createElement("a");
  a.download = e.target.value + "-" + new Date().getTime();
  a.href = file;
  document.body.appendChild(a);
  a.onclick = function() {
    this.parentElement.removeChild(this)
  };
  a.click();
})

＆＃13;

<label for="select">Please select an option:</label>
<select id="select">
  <option></option>
  <option value="LAMP">LAMP</option>
  <option value="BLOWER">BLOWER</option>
</select>

＆＃13;

Answer 2

我已从@ guest271314 的上述答案中复制了部分下载内容。感谢他这一点。我相信你想要这样的东西：

JSFIDDLE示例链接： https://jsfiddle.net/zpp4hr21/

UPDATE：

根据OP的评论，

完整的html文件代码将是：

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
  <script type="text/javascript">
    $("#generate").on("click", function(e){
        var lamp = $("#lamp").val();
        var blower = $("#blower").val();

        if (lamp == "Select") {
            alert("Please select a value for LAMP");
        }

        if (blower == "Select") {
            alert("Please select a value for BLOWER");
        }

        if ((lamp != "Select") && (blower != "Select")) {
            var text = lamp.toString()+blower.toString();
            var file = "data:text/plain," + text;

            var a = document.createElement("a");
            a.download = e.target.value + "-" + new Date().getTime();
            a.href = file;
            document.body.appendChild(a);
            a.onclick = function() {
              this.parentElement.removeChild(this)
            };
            a.click();
          }
       });
</script>
</head>

<body>
   <label for="lamp">LAMP:</label>
   <select id="lamp">
      <option>Select</option>
      <option value="1">ON</option>
      <option value="0">OFF</option>
   </select>
   <br/>
   <label for="blower">BLOWER:</label>
   <select id="blower">
     <option>Select</option>
     <option value="1">ON</option>
     <option value="0">OFF</option>
   </select>
   <br/>
   <input type="button" id="generate" value="GENERATE">
</body>
</html>

从下拉列表

2 个答案:

UPDATE：