只显示年月的js时间控件纯手写

最新推荐文章于 2022-11-28 20:22:58 发布

转载最新推荐文章于 2022-11-28 20:22:58 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bingguang/p/4645690.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用JavaScript实现的简易日期选择器，通过简单的HTML结构配合JavaScript动态生成年份和月份选项，并提供了前后翻页的功能。

<style>
    #date {
        text-align: center;
    }

    .td {
        cursor: pointer;
    }
</style>
<script>
    function GetDate() {
        var date = new Date();
        var year = date.getYear();
        var month = date.getMonth();
        var str = '';
        str += '<table id="date">';
        str += '<tr>';
        str += '<td><a href="javascript:void(0)" onclick="DelYear()">< <</a></td>';
        str += '<td colspan="2"><span id="year">' + year + '</span>年</td>';
        str += '<td><a href="javascript:void(0)" onclick="AddYear()">> ></a></td>';
        str += '</tr>';
        for (i = 0; i < 3; i++) {
            str += '<tr>';
            str += '<td onclick="ChangeMonth(this)" class="td">' + Number(1 + i * 4) + '月</td>';
            str += '<td onclick="ChangeMonth(this)" class="td">' + Number(2 + i * 4) + '月</td>';
            str += '<td onclick="ChangeMonth(this)" class="td">' + Number(3 + i * 4) + '月</td>';
            str += '<td onclick="ChangeMonth(this)" class="td">' + Number(4 + i * 4) + '月</td>';
            str += '</tr>';
        }
        str += '</table>';
        str = str.replace('<td onclick="ChangeMonth(this)" class="td">', '<td onclick="ChangeMonth(this)" class="td" style="color:red">');
        document.write(str);
    }
    function AddYear() {
        var year = document.getElementById("year").innerHTML;
        year = Number(year) + 1;
        document.getElementById("year").innerHTML = year;
    }
    function DelYear() {
        var year = document.getElementById("year").innerHTML;
        year = Number(year) - 1;
        document.getElementById("year").innerHTML = year;
    }
    function ChangeMonth(obj) {
        var trs = document.getElementById("date").getElementsByTagName("tr");
        for (i = 1; i < trs.length; i++) {
            var tds = trs[i].getElementsByTagName("td");
            for (j = 0; j < tds.length; j++) {
                tds[j].style.color = "";
            }
        }
        obj.style.color = "red";
    }
</script>

<div style="width: 100%; text-align: center;">
    <script>GetDate()</script>
</div>