首页 / WordPress函数讲解 / 基于javascript实现日历功能原理及代码实例

基于javascript实现日历功能原理及代码实例

    • 珂李斯

    发布于

    by

    在学习javascript过程中，有一个javascript实例—css日历，感觉挺有趣的，在它的…

    在学习javascript过程中，有一个javascript实例—css日历，感觉挺有趣的，在它的基础上增加了一些简单的功能（差点哭辽）。

    功能

    按照传统日历方式显示该月的每一天。

    可以突出显示今天的日期

    可以翻阅上一个月和下一个月的日历

    实现

    step1 传统日历布局样式：分别将年份与月份、星期、该月的全部天数采用列表布局，排列组成传统日历的样式。

    step2 初始化和更新月份：先将列表清空（debug过程中，有一个发现，初始化的列表便存在的一个childNodes，该项目中需要清空），然后再填入前导空白（为了和星期能够对应），再填入具体某一个月的天数。

    step3 通过document获取列表对象，改变今天对应行的样式（className变化）来突出显示。

    其他细节在代码中实现

    代码

    html代码

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset=”UTF-8″>

    <title>CSS日历</title>

    <link type=”text/css” rel=”stylesheet” href=”style.css” rel=”external nofollow” >

    </head>

    <body>

     

    <h2>CSS日历</h2>

    <div class=”month”>

    <ul>

    <li class=”prev” onclick=”change(-1)”>❮</li>

    <li class=”next” onclick=”change(1)”>❯</li>

    <li style=”text-align: center”><span id=”month”>August</span><br>

    <span style=”font-size: 18px” id=”year”>2016</span></li>

    </ul>

    </div>

    <ul class=”weekdays” id=”weekdays”>

    </ul>

    <ul class=”days” id=”days”>

    </ul>

    </body>

    <script type=”text/javascript” src=”show.js”></script>

    </html>

    CSS代码

    @charset “UTF-8”;

    * {box-sizing:border-box;}

    ul {list-style-type: none;}

    body {font-family: Verdana,sans-serif;}

    .center {

    text-align: center;

    border: 3px solid green;

    }

    .month {

    padding: 70px 25px;

    width: 100%;

    background: #1abc9c;

    }

    .month ul {

    margin: 0;

    padding: 0;

    }

    .month ul li {

    color: white;

    font-size: 20px;

    text-transform: uppercase;

    letter-spacing: 3px;

    }

    .month .prev {

    float: left;

    padding-top: 10px;

    }

    .month .next {

    float: right;

    padding-top: 10px;

    }

    .weekdays {

    margin: 0;

    padding: 10px 0;

    background-color: #ddd;

    }

    .weekdays li {

    display: inline-block;

    width: 13.6%;

    color: #666;

    text-align: center;

    }

    .days {

    padding: 10px 0;

    background: #eee;

    margin: 0;

    }

    .days li {

    list-style-type: none;

    display: inline-block;

    width: 13.6%;

    text-align: center;

    margin-bottom: 5px;

    font-size:12px;

    color: #777;

    }

    .days li active {

    padding: 5px;

    background: #1abc9c;

    color: white !important;

    }

    /* Add media queries for smaller screens */

    @media screen and (max-width:720px) {

    .weekdays li, .days li {width: 13.1%;}

    }

    @media screen and (max-width: 420px) {

    .weekdays li, .days li {width: 12.5%;}

    .days li .active {padding: 2px;}

    }

    @media screen and (max-width: 290px) {

    .weekdays li, .days li {width: 12.2%;}

    }

    javascript代码

    var date = new Date();

    var year = date.getFullYear();

    var month=date.getMonth();

    var day = date.getDate();

    var week=date.getDay();

    var p=(week-day+1+35)%7+day-1;

    var monthName=[

    “January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”

    ];

    var monthNum=[

    31,28,31,30,31,30,31,31,30,31,30,31

    ];

    var weekName=[

    “Su”,”Mo”,”Tu”,”We”,”Th”,”Fr”,”Sa”

    ];

    var aimmonth=month,aimyear=year;

    function init(){

    createTitle(year,month);

    var weekdays=document.getElementById(“weekdays”);

    for(var i=0;i<7;i++){

    var x = document.createElement(“LI”);

    var t = document.createTextNode(weekName[i]);

    x.appendChild(t);

    weekdays.appendChild(x);

    }

    delDay();

    createDay();

    isnow();

    }

    function change(x){

    aimmonth+=x;

    if(aimmonth==-1){

    aimyear-=1;

    aimmonth=11;

    }else if(aimmonth==12){

    aimyear+=1;

    aimmonth=0;

    }

    createTitle(aimyear,aimmonth);

    delDay();

    createDay();

    isnow();

    }

    function createTitle(y,m){

    document.getElementById(“year”).innerHTML=y;

    document.getElementById(“month”).innerHTML=monthName[m];

    }

    function createDay(){

    var datetmp=new Date();

    datetmp.setFullYear(aimyear,aimmonth,1);

    var firstday=datetmp.getDay();

    var days=document.getElementById(“days”);

     

    for(var i=0;i<firstday;i++){

    var x = document.createElement(“LI”);

    var t = document.createTextNode(“”);

    x.appendChild(t);

    days.appendChild(x);

    }

    for(var i=1;i<=getMonthDay();i++){

    var x = document.createElement(“LI”);

    var t = document.createTextNode(i);

    x.appendChild(t);

    days.appendChild(x);

    }

    }

    function delDay(){

    var list=document.getElementById(“days”);

    var len=list.childNodes.length;

    for(var i=0;i<len;i++){

    list.removeChild(list.childNodes[0]);

    }

    }

    function isnow(){

    if(aimyear==year&&aimmonth==month){

    days.childNodes[p].style=”padding: 5px;background: #1abc9c;color: white !important;”

    }

    }

    function getMonthDay(){

    if(aimmonth!=2){

    return monthNum[aimmonth];

    }else{

    if(aimyear%4!=0||aimyear%100==0&&aimyear%400!=0){

    return monthNum[aimmonth];

    }

    else return 29;

    }

    }

    //main

    init();

    总结

    javascript目前算是起步，最最基础的皮毛学会了，起码不会的东西可以通过去找函数，查资料学习，可能实现的有些复杂，但是最终能够表达出自己的构想，听开心的。下一步，再写一些实例去看jquery。

    css仍是不足，有些东西可能会有冲突，无法实现想要的东西，仍要回去学基础的东西，最重要的一点是多练，积累经验，总结规律和思想。

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本网站。

    基于javascript实现日历功能原理及代码实例 (https://www.wpmee.com/) javascript教程 第1张

    类别：WordPress函数讲解、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！