html 时间

小科先生

于 2024-07-15 07:00:00 发布

阅读量158

点赞数 2

分类专栏： html 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_74358570/article/details/140426470

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.html部分

<span id="xkxs">00000</span> <!--时间 ‘ 时 / 分 / 秒 ’-->
<span id="xkxs-date">0000</span> <!--时间 ‘ 年 / 月 / 日 ’-->
<span id="xkxs-xq">星期一</span> <!--星期-->

2.js部分

// 时间

    function updateClock() {
      var now = new Date(); // 获取当前时间
      var hours = now.getHours(); // 小时
      var minutes = now.getMinutes(); // 分钟
      var seconds = now.getSeconds(); // 秒钟

      // 如果时间少于10，则在前面加上0
      hours = checkTime(hours);
      minutes = checkTime(minutes);
      seconds = checkTime(seconds);
      
      // 构建时间字符串
      if(hours > 12 ) {
          var timeString = "下午" + hours + ":" + minutes + ":" + seconds;
      } else {
          var timeString = "早上" + hours + ":" + minutes + ":" + seconds;
      }
      
      // 更新显示时间的元素的文本
      document.getElementById('xkxs').innerText = timeString;
      
      // 每秒钟调用一次updateClock函数
      setTimeout(updateClock, 1000);
    }
    
    function checkTime(i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    }
    
    // 页面加载完成后开始显示实时时间
    window.onload = function() {
      updateClock();
    };
    
    // 年月日
    function getCurrentDate() {
      var today = new Date();
      var date = today.getFullYear() + '/' + ('0' + (today.getMonth() + 1)).slice(-2) + '/' + ('0' + today.getDate()).slice(-2);
      var xkxs = today.getDay()
      var weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; // 星期几名称的数组
      var date1 = weekdays[xkxs]
      document.getElementById('xkxs-date').textContent = date;
      document.getElementById('xkxs-xq').textContent = date1;
    }
    getCurrentDate()