在HBuilder输入数字返回星期

使用input标签输入数字,使用input或p、或h1等容器标签输出,根据输入的数字(1-7)返回星期。

HTML、CSS和JavaScript实现在HBuilder输入数字返回星期的代码


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>输入数字返回星期</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        input {
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }
        button {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
        }
        #result {
            font-size: 24px;
            font-weight: bold;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<h1>输入数字返回星期</h1>
<label for="num">请输入数字(1-7):</label>
<input type="number" id="num" min="1" max="7">
<br>
<button onclick="getWeekday()">获取星期</button>
<div id="result"></div>

<script>
    function getWeekday() {
        const num = document.getElementById("num").value;
        const weekdays = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"];
        if (num >= 1 && num <= 7) {
            document.getElementById("result").innerHTML = weekdays[num - 1];
        } else {
            alert("请输入1-7之间的数字!");
        }
    }
</script>
</body>
</html>

该回答引用ChatGPT

如有疑问可以回复我
可以使用如下的代码来实现根据数字返回星期的功能:

<!DOCTYPE html>
<html>
<head>
  <title>根据数字返回星期</title>
  <meta charset="utf-8">
</head>
<body>
  <input type="text" id="input">
  <button onclick="showWeek()">显示星期</button>
  <p id="output"></p>
  <script>
    function showWeek() {
      var input = document.getElementById("input").value;
      var output = document.getElementById("output");
      switch (input) {
        case "1":
          output.innerText = "星期一";
          break;
        case "2":
          output.innerText = "星期二";
          break;
        case "3":
          output.innerText = "星期三";
          break;
        case "4":
          output.innerText = "星期四";
          break;
        case "5":
          output.innerText = "星期五";
          break;
        case "6":
          output.innerText = "星期六";
          break;
        case "7":
          output.innerText = "星期日";
          break;
        default:
          output.innerText = "输入有误,请输入数字 1-7";
          break;
      }
    }
  </script>
</body>
</html>


在这个代码中,我们首先定义了一个 input 输入框和一个按钮,用来让用户输入数字和触发显示星期的操作。然后,在 JavaScript 中,我们使用 switch 语句根据输入的数字来返回对应的星期,如果输入的数字不在 1-7 的范围内,就会显示一个提示信息。最后,我们将结果输出到一个 p 标签中。

参考GPT和自己的思路,以下是一个 JavaScript 代码示例,它接收用户输入的数字,然后根据数字返回相应的星期。

<!DOCTYPE html>
<html>
<head>
  <title>数字转星期</title>
</head>
<body>
  <label for="number-input">请输入数字 1 到 7:</label>
  <input type="number" id="number-input">
  <button onclick="convertToWeekday()">转换</button>
  <p id="result"></p>

  <script>
    function convertToWeekday() {
      // 获取用户输入的数字
      const numberInput = document.getElementById("number-input").value;
      
      // 根据输入的数字返回相应的星期
      let weekday;
      switch (Number(numberInput)) {
        case 1:
          weekday = "星期一";
          break;
        case 2:
          weekday = "星期二";
          break;
        case 3:
          weekday = "星期三";
          break;
        case 4:
          weekday = "星期四";
          break;
        case 5:
          weekday = "星期五";
          break;
        case 6:
          weekday = "星期六";
          break;
        case 7:
          weekday = "星期日";
          break;
        default:
          weekday = "请输入 1 到 7 的数字";
      }
      
      // 将结果输出到页面上
      document.getElementById("result").textContent = weekday;
    }
  </script>
</body>
</html>

在这个代码示例中,我们使用了一个 switch 语句来根据用户输入的数字返回相应的星期。如果用户输入的数字不在 1 到 7 的范围内,我们输出一个提示信息。最后,我们将结果输出到页面上,使用了 document.getElementById() 获取相应的元素并修改 textContent 属性。

代码和运行截图如下,记得采纳哦!

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        
</head>
<body>
    <label for="day">请输入数字(1-7):</label>
    <input type="number" id="day" min="1" max="7" required>
    <button onclick="getWeekday()">获取星期</button>
    <p id="weekday"></p>
</body>
<script>
    function getWeekday() {
        let dayInput = document.getElementById("day");
        let weekdayOutput = document.getElementById("weekday");
        let day = Number(dayInput.value);
        let weekday;

        switch (day) {
            case 1:
            weekday = "星期一";
            break;
            case 2:
            weekday = "星期二";
            break;
            case 3:
            weekday = "星期三";
            break;
            case 4:
            weekday = "星期四";
            break;
            case 5:
            weekday = "星期五";
            break;
            case 6:
            weekday = "星期六";
            break;
            case 7:
            weekday = "星期日";
            break;
            default:
            weekday = "请输入有效的数字(1-7)";
        }

    weekdayOutput.innerText = weekday;
}
</script>
</html>