分享一个日历时间tab切换的应用

作者：Terry2020.10.13来源：Web前端之家浏览：4522评论:0

关键词：js

分享一个日历时间tab切换的应用，先看下效果图：

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分享一个日历时间tab切换的应用 - Web前端之家https://www.jiangweishan.com</title>
    <style type="text/css">
    #app {
    width: 400px;
    height: 50px;
    margin: 200px auto;
    position: relative;
    color: darkgray;
    }
    .title {
    position: absolute;
    top: -50px;
    left: 0;
    width: 200px;
    height: 50px;
    }
    ul {
    list-style: none;
    background-color: blanchedalmond;
    width: 100%;
    display: block;
    padding: 0;
    }
    ul li {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    }
    .left {
    position: absolute;
    top: 0;
    left: -50px;
    font-size: 35px;
    cursor: pointer;
    }
    .right {
    position: absolute;
    top: 0;
    right: -50px;
    font-size: 35px;
    cursor: pointer;
    }
    .on {
    color: darkorange;
    }
    </style>
</head>
<body>
    <div id="app">
        <div class="title"></div>
        <div class="left"><</div>
        <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
        </ul>
        <div class="right">></div>
    </div>

    <script src="/demo/js/jq.js"></script>
    <script>
    let now = new Date()
    let oneDay = 1000*60*60*24 // 一天的时间
    let timeArr = [] // 用来存储每次循环真正时间戳的数组
    let onDate = now.getTime() // 当前激活的日期（有且仅有一个）
    init()
    // 点击后添加激活样式
    $('ul li').on('click', function() {
    acton($(this).index())
    })
    $('.left').on('click', function() {
    changeUl(0)
    })
    $('.right').on('click', function() {
    changeUl(1)
    })
    
    function init() {
    // 计算初始化时的周一和周天
    let monday = now.getTime() - (now.getDay() - 1)*oneDay
    let sunday = now.getTime() + (7 - now.getDay())*oneDay
    // 循环渲染本周
    for(let i = 0;i < 7;i++) {
    let nowDate = monday + oneDay * i
    $('ul li').eq(i).text(new Date(nowDate).getDate())
    timeArr.push(nowDate)
    if (nowDate === now.getTime()) { // 初始化时渲染标签并激活当前本地日期和显示
    acton(i)
    }
    }
    }
    
    // 判断数组中是否存在该日期并激活
    function judon() {
    if (timeArr.indexOf(onDate) !== -1) {
    $('ul li').eq(timeArr.indexOf(onDate)).addClass('on').siblings().removeClass('on')
    } else {
    $('ul li').each(function() {
    $(this).removeClass('on')
    })
    }
    }
    
    // 点击前后实现更换每周内容,1是前进一周,0是后退一周
    function changeUl(type) {
    for (let n = 0;n < 7;n++) {
    timeArr[n] = type ? timeArr[n] + oneDay*7 : timeArr[n] - oneDay*7
    $('ul li').eq(n).text(new Date(timeArr[n]).getDate())
    }
    judon()
    }
    
    // 激活日期并显示
    function acton(i) {
    let nowTitle = new Date(timeArr[i]);
    $('ul li').eq(i).addClass('on').siblings().removeClass('on');
    $('.title').text(`${nowTitle.getFullYear()}年${nowTitle.getMonth()+1}月${nowTitle.getDate()}日`);
    onDate = timeArr[i]
    }
    </script>
</body>
</html>

赏您的支持是我们创作的动力！