Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

moozi

달력 예제 본문

TIS_2016/HTML5_1기

달력 예제

moozi 2016. 4. 5. 12:02

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Calendar</title>

    <style>

    * {box-sizing:border-box;}

    ul {

        list-style-type: none;/* 기호 삭제 */

    }

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


    .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 .active {/* 오늘 날짜 표시 */

        padding: 5px;

        background: #1abc9c;

        color: white !important

    }    

        

        

</style>


<script type="text/javascript">

function showToday(){

    /* 오늘날짜를 구해서 해당하는 날짜에 active클래스 설정하기 */

    var today=new Date();

    var day=today.getDate();//날짜구하기

    // alert(day);


    // 현재날짜-1인 index를 갖는 li를 찾아서 active를 적용.

    var ul=document.getElementsByTagName("ul");//ul을 찾아서 배열로 저장.

    var i;

    //alert(ul[2].children.length);

    for(i=0;i<ul[2].children.length;i++){

        if(i==day-1+4){

            // 3번째 ul태그의 자식 태그인 li태그 중 오늘 날짜와 일치하는

            // li태그에 active클래스 적용

            ul[2].children[i].classList.add("active"); 

        }

    }

}

</script>


</head>

<body onload="showToday()">

  <div class="month">      

  <ul>

    <li class="prev">&lt;</li>

    <li class="next">&gt;</li>

    <li style="text-align:center">

      May<br>

      <span style="font-size:18px">2016</span>

    </li>

  </ul>

</div>

<ul class="weekdays">

  <li>Mo</li>

  <li>Tu</li>

  <li>We</li>

  <li>Th</li>

  <li>Fr</li>

  <li>Sa</li>

  <li>Su</li>

</ul>


<ul class="days">

  <li></li> 

  <li></li> 

  <li></li> 

  <li></li>       

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

  <li>6</li>

  <li>7</li>

  <li>8</li>

  <li>9</li>

  <li>10</li>

  <li>11</li>

  <li>12</li>

  <li>13</li>

  <li>14</li>

  <li>15</li>

  <li>16</li>

  <li>17</li>

  <li>18</li>

  <li>19</li>

  <li>20</li>

  <li>21</li>

  <li>22</li>

  <li>23</li>

  <li>24</li>

  <li>25</li>

  <li>26</li>

  <li>27</li>

  <li>28</li>

  <li>29</li>

  <li>30</li>

  <li>31</li>

</ul>



</body>

</html>

'TIS_2016 > HTML5_1기' 카테고리의 다른 글

tab  (0) 2016.04.05
accordian  (0) 2016.04.05
2차 포트폴리오  (13) 2016.04.05
d-day 구하기 javascript  (0) 2016.04.04
부트스트랩에서 navbar 배경색 바꾸기  (0) 2016.04.04
'TIS_2016/HTML5_1기' Related Articles more
Comments