前端小计：js日期（一个最简单的时钟）

最新推荐文章于 2024-05-07 09:15:00 发布

流浪的宇滴

最新推荐文章于 2024-05-07 09:15:00 发布

阅读量405

点赞数

分类专栏： js基础 setInterval setTimeout 文章标签： Date（）日期 setIntervel setTimeout

本文链接：https://blog.csdn.net/qq_45358338/article/details/99866632

版权

js基础同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

setInterval

2 篇文章 0 订阅

订阅专栏

setTimeout

1 篇文章 0 订阅

订阅专栏

今天的要求是：

1、显示当前日期及时间，按秒更新；
2、格式为 YYYY 年 MM 月 DD 日星期 D HH:mm:ss；
3、注意位数的补齐，比如：
– 假设时间为2008年10月10日星期一的12点12分12秒，显示2008年10月10日星期一 12:12:12
– 假设时间为2008年1月1日星期一的3点2分2秒，显示2008年01月01日星期一 03:02:02

注意事项：

1、尽量让一个函数就做一个事情
2、把月、日、小时等出现个位数的情况前面补充0，补充为两位，比如1变为01

代码一：

var para = document.createElement('p');
      document.body.appendChild(para);
      para.setAttribute('id', 'para');

                                             显示区域：para

代码二：

function weeked() {
        var d =  new Date().getDay();
        var arr = ['日','一','二','三','四','五',"六"]
        for (var i = 0; i < 7; i++) {
          if (i == d) {
            D = arr[i];
          }
        }
        return D;
        }

                                             周几需要匹配一下。。

代码三：

function dateFormat(s) {
        if (s < 10) {
          s = '0' + s;
        }
        return s;
      }

                                              个位数的地方需要贾玲

代码四：

setInterval(function() {
        var year = new Date().getFullYear();
        var month = new Date().getMonth() + 1;
        var day = new Date().getDate();
        var hour = new Date().getHours();
        var minute = new Date().getMinutes();
        var second = new Date().getSeconds();

        para.innerHTML = year + '年' + dateFormat(month) + '月' + dateFormat(day) + '日' + '<br/>' + '星期' + weeked() + '<br/>' + dateFormat(hour) + ':' + dateFormat(minute) + ':' + dateFormat(second);
      }, 100)

                                              最后的输出setInterval

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      font-size: 100px;
      color: white;
    }
    #para {
      text-align: center;
      background: #D02090 ;
      border: 2px solid green;
      border-radius: 500px 500px 100px 100px/300px 300px 100px 100px; 
    }
    #para:first-line {
      font-size: 50px;
    }
  </style>
</head>
<body>
  <script>　
      var para = document.createElement('p');
      document.body.appendChild(para);
      para.setAttribute('id', 'para');  

      function weeked() {
        var d =  new Date().getDay();
        var arr = ['日','一','二','三','四','五',"六"]
        for (var i = 0; i < 7; i++) {
          if (i == d) {
            D = arr[i];
          }
        }
        return D;
        }
      
      function dateFormat(s) {
        if (s < 10) {
          s = '0' + s;
        }
        return s;
      }

       setInterval(function() {
        var year = new Date().getFullYear();
        var month = new Date().getMonth() + 1;
        var day = new Date().getDate();
        var hour = new Date().getHours();
        var minute = new Date().getMinutes();
        var second = new Date().getSeconds();

        para.innerHTML = year + '年' + dateFormat(month) + '月' + dateFormat(day) + '日' + '<br/>' + '星期' + weeked() + '<br/>' + dateFormat(hour) + ':' + dateFormat(minute) + ':' + dateFormat(second);
      }, 100)
		//setTimeout的如下：
       /*function time() {
        setTimeout(function() {
          var year = new Date().getFullYear();
          var month = new Date().getMonth() + 1;
          var day = new Date().getDate();
          var hour = new Date().getHours();
          var minute = new Date().getMinutes();
          var second = new Date().getSeconds();

          para.innerHTML = year + '年' + dateFormat(month) + '月' + dateFormat(day) + '日' + '<br/>' + '星期' + weeked() + '<br/>' + dateFormat(hour) + ':' + dateFormat(minute) + ':' + dateFormat(second);

          time();
        }, 100)
      }
       time();*/
      
  </script>
</body>
</html>

流浪的宇滴

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端小计：js日期（一个最简单的时钟）

今天的要求是：1、显示当前日期及时间，按秒更新；2、格式为 YYYY 年 MM 月 DD 日星期 D HH:mm:ss；3、注意位数的补齐，比如：– 假设时间为2008年10月10日星期一的12点12分12秒，显示2008年10月10日星期一 12:12:12– 假设时间为2008年1月1日星期一的3点2分2秒，显示2008年01月01日星期一 03:02:02注意事项：1、尽量让...
复制链接

扫一扫