HTML+CSS+JS 实现Tab栏切换 (包含每秒更新当前时间)

2022/2/10 23:17:06

编程Tag： js tab html var break Date background xx weekday

本文主要是介绍HTML+CSS+JS 实现Tab栏切换 (包含每秒更新当前时间)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

效果图

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab栏切换</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/TabChange.css">
</head>
<body>
    <div class="box">
        <div class="tab">
            <ul>
                <li>当前时间</li>
                <li>认识时间</li>
                <li>particular day</li>
            </ul>
        </div>
        <div class="content nowTime" id="nowTime">
            <p>现在是：</p>
            <p>xxxx年xx月xx日</p>
            <p>星期x</p>
            <p>xx：xx：xx</p>
        </div>
        <div class="content meetTime" id="meetTime">
            <p>与你相识于：</p>
            <p>xxxx年xx月xx日</p>
            <p>星期x</p>
            <p>xx：xx</p>
        </div>
        <div class="content Particular" id="Particular">
            <p>Particular：</p>
            <p>xxxx年xx月xx日</p>
            <p>星期x</p>
            <p>xx：xx</p>
        </div>
    </div>

    <script src="../js/TabChange.js"></script>
</body>
</html>

css代码

body {
    background-image: url(../images/background9.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.box {
    /* 定位 */
    /* 居中 */
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 600px;
    height: 500px;
    /* background-color: brown; */
}

.tab {
    float: left;

    width: 150px;
    height: 500px;
    background-color: rgba(134, 132, 129, 0.5);
}

.tab li {
    margin: 25px 0px;
    width: auto;
    height: 50px;
    border-radius: 10%;
    background-color: rgba(90, 92, 88, 0.3);

    text-align: center;
    line-height: 50px;
}

.tab li:hover {
    background-color: rgba(90, 92, 88, 0.6);
}

.content {
    float: left;

    width: 450px;
    height: 500px;
    background-color: rgba(193, 204, 204, 0.3);

}

.content p {

    margin: 15px 0px;

    text-align: center;
    font-size: 45px;
    font-family: '方正舒体';
    color: #000;
}

.content p:first-child {
    margin-top: 110px;
}

/* 默认当前时间可见 */
.nowTime {
    display: block;
}

.meetTime {
    display: none;
}

.Particular {
    display: none;
}

js代码

// tab绑定事件
var lis = document.querySelector('.tab').children[0].querySelectorAll('li');
for ( var i=0; i<lis.length; i++ ) {
    if ( i==0 ) {
        lis[i].onclick = function() {
            displayNone();
            var nowTime = document.getElementById('nowTime');
            nowTime.style.display = 'block';
        }
    }
    if ( i==1 ) {
        
        lis[i].onclick = function() {
            displayNone();
            var meetTime = document.getElementById('meetTime');
            meetTime.style.display = 'block';
        }
    }
    if( i==2 ) {
        lis[i].onclick = function() {
            displayNone();
            var Particular = document.getElementById('Particular');
            Particular.style.display = 'block';
        }
    }
}

// 获取当前时间
function updateNowTime() {
    var nowTime = document.getElementById('nowTime');
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();
    month++;
    if ( month < 10 ) month = '0'+month;
    var day = date.getUTCDate();
    if ( day < 10 ) day = '0'+day;
    var weekday = date.getUTCDay();
    switch ( weekday ) {
        case 1 :
            weekday = '星期一';
            break;
        case 2 :
            weekday = '星期二';
            break;
        case 3 :
            weekday = '星期三';
            break;
        case 4 :
            weekday = '星期四';
            break;
        case 5 :
            weekday = '星期五';
            break;
        case 6 :
            weekday = '星期六';
            break;
        case 7 :
            weekday = '星期天';
            break;
    }
    var hour = date.getHours();
    if ( hour < 10 ) hour = '0'+hour;
    var minute = date.getUTCMinutes();
    if ( minute < 10 ) minute = '0'+minute;
    var second = date.getUTCSeconds();
    if ( second < 10 ) second = '0'+second;

    var ps = nowTime.children;
    console.log(ps);
    for ( var j=1; j<ps.length; j++ ) {
        if ( j==1 ) {
            ps[j].innerHTML = year+'年'+month+'月'+day+'日';
        }
        if ( j==2 ) {
            ps[j].innerHTML = weekday;
        }
        if ( j==3 ) {
            ps[j].innerHTML = hour+':'+minute+':'+second;
        }
    }
}
setInterval( updateNowTime, 1000 );
updateNowTime();

// 所有content不可见
function displayNone() {
    var contents = document.querySelectorAll('.content');
    console.log(contents);
    for ( var i=0; i<contents.length; i++ ) {
        contents[i].style.display = 'none';
    }
}

这篇关于HTML+CSS+JS 实现Tab栏切换 (包含每秒更新当前时间)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

HTML+CSS+JS 实现Tab栏切换 (包含每秒更新当前时间)

效果图

HTML代码

css代码

js代码

相关编程文章