选项卡和数字时钟

一、选项卡

1.jpg

<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>
    <style>
        *{margin: 0; padding: 0; box-sizing: border-box;}
        #box{
            width: 400px;
            height: 400px;
            border:solid #888 1px;
            border-radius: 5px;
            overflow:hidden;
            margin: 50px auto;
        }
        #title{
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px orangered solid;
        }
        #title span{
            display: block;
            text-align: center;
            line-height: 50px;
            flex: 1;
            cursor: pointer;
        }
        #title span.active{
            background: orangered;
            color: white;
        }
        #content{
            position: relative;
        }
        #content p{
            position: absolute;
            top: 10px;
            left: 10px;
            opacity: 0;
            transition: all .2s;
        }
        #content p.active{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="title">
            <span class="active">新闻</span>
            <span>动态</span>
            <span>通知</span>
        </div>
        <div id="content">
            <p class="active">新闻内容</p>
            <p>动态</p>
            <p>通知</p>
        </div>
    </div>
    <script>
        var _spans = document.getElementsByTagName("span")
        var _p = document.getElementsByTagName("p")
        //第一个
        _spans[0].onclick = function () {
            for (var i = 0; i < _spans.length; i++) {
                _spans[i].className = ""
            }
            _spans[0].className = "active"

            for (var i =0; i <_p.length; i++) {
                _p[i].style.opacity = 0
            }
            _p[0].style.opacity = 1
        }
        //第二个
        _spans[1].onclick = function () {
            for (var i = 0; i < _spans.length; i++) {
                _spans[i].className = ""
            }
            _spans[1].className = "active"

            for (var i =0; i <_p.length; i++) {
                _p[i].style.opacity = 0
            }
            _p[1].style.opacity = 1
        }
        //第三个
        _spans[2].onclick = function () {
            for (var i = 0; i < _spans.length; i++) {
                _spans[i].className = ""
            }
            _spans[2].className = "active"

            for (var i =0; i <_p.length; i++) {
                _p[i].style.opacity = 0
            }
            _p[2].style.opacity = 1
        }
    </script>
</body>
</html>

二、数字时钟

2.jpg

<!DOCTYPE html>
<html lang="zh">
<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>
  <style>
    #clock{font-size:120px;}
  </style>
</head>
<body>
  <div id="clock">0000-00-00 00:00:00</div>
  
  <script>
    window.onload = function() {
      // 获取当前时间的函数
      function getTime() {
        var date = new Date()
        return date.getFullYear() + "-"
          + (date.getMonth() + 1).toString().padStart(2, "0") + "-"
          + date.getDate().toString().padStart(2, "0") + " "
          + date.getHours().toString().padStart(2, "0") + ":"
          + date.getMinutes().toString().padStart(2, "0")+":"
          + date.getSeconds().toString().padStart(2, "0")
      }
      // 数字时钟
      var _clock = document.getElementById("clock")
      !function() {
        setInterval(function() {
          var result = getTime()
          _clock.innerText = result
        }, 1000)
      }();
    }
  </script>
</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容