精简多组时间代码量

最新推荐文章于 2024-09-03 08:51:36 发布
与妖为邻
最新推荐文章于 2024-09-03 08:51:36 发布
阅读量113
点赞数 2
文章标签： css css3 html javascript 精简代码极端的精简代码
本文链接：https://blog.csdn.net/lulei5153/article/details/141750050
版权
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试版备忘录首页</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        /* 设置全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }


        body {

            background: #0b1b2c;
        }

          /* 时间 */
          #dateTime1 {
            margin-left: 20%;
            color: #ffffff;
            text-shadow: 1px 1px 1px #100000;
            background-color: #144756;
        }

        #dateTime2 {
            background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 1.5rem;
            font-weight: 900;
            text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);

            sub {
                -webkit-text-fill-color: #cfd601;
                text-shadow: 1px 1px 1px #100000;
                font-size: 1rem;
            }
        }

        #dateTime3 {
            transform: translate(20%,60%);
            position: fixed;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 10rem;
            font-weight: 900;
            text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);

            sub {
                -webkit-text-fill-color: #cfd601;
                text-shadow: 1px 1px 1px #100000;
                font-size: 5rem;
            }
        }

        div {
            color: #ed0000;
        }

        pre {
            color: #ffffff;
            text-shadow: 1px 1px 1px #100000;
            background-color: #144756;
            padding: 5px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <!-- 第一组时间 -->
    <time datetime="2024-07-10" title="2024-07-10" id="dateTime1">2024-08-31</time>
    <!-- 第二组时间 -->
    <time datetime="2024-07-10" title="2024-07-10" id="dateTime2">2024-08-31</time>
    <!-- 第三组时间 -->
    <time datetime="2024-07-10" title="2024-07-10" id="dateTime3">2024-08-31</time>
     <div>
        <h2>极端的例子，仅供娱乐,请不要在生产环境中使用</h2><p>下面的代码,可以实现动态显示多组当前时间,并显示星期和时间:</p>
        <pre>
            &lt;body>
                  &lt;!-- 第一组时间 -->
                  &lt;time datetime="2024-07-10" title="2024-07-10" id="dateTime1">2024-08-31&lt;/time>
                  &lt;!-- 第二组时间 -->
                  &lt;time datetime="2024-07-10" title="2024-07-10" id="dateTime2">2024-08-31&lt;/time>
                  &lt;!-- 第三组时间 -->
                  &lt;time datetime="2024-07-10" title="2024-07-10" id="dateTime3">2024-08-31&lt;/time>
            &lt;/body>
            &lt;script>
                  (s=el=>{d=new Date,f=n=>("0"+n).slice(-2),
                  w="日一二三四五六";
                  el.innerHTML=`${d.getFullYear()}-${f(d.getMonth()+1)}-${f(d.getDate())}&lt;sub>星期${w[d.getDay()]}&lt;/sub>${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}`})
            &lt;/script>
        </pre>
</div>
</body>
<script>
    /* 现在时间 极端的例子，仅供娱乐*/
(s=el=>{d=new Date,f=n=>("0"+n).slice(-2),
w="日一二三四五六";
el.innerHTML=`${d.getFullYear()}-${f(d.getMonth()+1)}-${f(d.getDate())}<sub>星期${w[d.getDay()]}</sub>${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}`})
  (setInterval(()=>["dateTime1","dateTime2","dateTime3"].forEach(id=>s(document.getElementById(id))),
  1000));
/* 现在时间 结束 */

// -------------------------------------------------------------------------------

/* 现在时间 
function showTime(el) {
    const d = new Date(), f = n => ("0" + n).slice(-2), w = "日一二三四五六";
    el.innerHTML = `${d.getFullYear()}-${f(d.getMonth() + 1)}-${f(d.getDate())} <sub>星期${w[d.getDay()]}</sub> ${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}`;
}
setInterval(() => ["dateTime1", "dateTime2"].forEach(id => showTime(document.getElementById(id))), 1000);
 现在时间 结束 */

// -------------------------------------------------------------------------------

/* 现在时间 
function showTime(el) {
    const d = new Date(), f = n => ("0" + n).slice(-2), w = "日一二三四五六";
    el.innerHTML = `${d.getFullYear()}-${f(d.getMonth() + 1)}-${f(d.getDate())} <sub>星期${w[d.getDay()]}</sub> ${f(d.getHours())}:${f(d.getMinutes())}:${f(d.getSeconds())}`;
}
setInterval(() => ["dateTime1", "dateTime2"].forEach(id => showTime(document.getElementById(id))), 1000);
现在时间 结束 */

// -------------------------------------------------------------------------------

  /* 现在时间 
  var current_time1 = document.getElementById("dateTime1");
  var current_time2 = document.getElementById("dateTime2");
  function showTime(element) {
      const now = new Date();
      const format = num => ("0" + num).slice(-2);
      const time = `
  ${now.getFullYear()}-${format(now.getMonth() + 1)}-${format(now.getDate())}
      <sub id='sub'>${["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][now.getDay()]}</sub>
     ${format(now.getHours())}:${format(now.getMinutes())}:${format(now.getSeconds())}`;
      element.innerHTML = time;
  }
  function updateTimes() {
      showTime(current_time1);
      showTime(current_time2);
  }
  updateTimes();
  setInterval(updateTimes, 1000);
  现在时间 结束 */

// -------------------------------------------------------------------------------

 /* 现在时间 
 var current_time = document.getElementById("dateTime");
    function showTime() {
        var now = new Date();
        var year = now.getFullYear();
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        var day = ("0" + now.getDate()).slice(-2);
        var hour = ("0" + now.getHours()).slice(-2);
        var min = ("0" + now.getMinutes()).slice(-2);
        var second = ("0" + now.getSeconds()).slice(-2);
        var week = [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
        ][now.getDay()];
        var time = `${year}-${month}-${day}<sub id='sub'>${week}</sub> ${hour}:${min}:${second}`;
        current_time.innerHTML = time;
    }
    showTime();
    setInterval(showTime, 1000);
现在时间 结束 */


</script>


</html>