ThatManK Mobile Article

操作元素改变元素内容

Category: JS Tutorial: DOM实战 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

操作元素改变内容

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>123</p>

    <script>
      // 当我们点击了按钮,   div里面的文字会发生变化

      // 1. 获取元素
      var btn = document.querySelector("button");
      var div = document.querySelector("div");
      var p = document.querySelector("p");

      // 2.注册事件
      btn.onclick = function () {
        // div.innerText = '2019-6-6';
        div.innerHTML = getDate();
      };

      // 我们元素可以不用添加事件
      p.innerHTML = getDate();

      // func
      function getDate() {
        var date = new Date();
        // 我们写一个 xxx年x月x日 星期x
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var day = date.getDay();

        var arr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];

        return (
          "今天是：" + year + "年" + month + "月" + dates + "日 " + arr[day]
        );
      }
    </script>
  </body>
</html>