Jquery日历编写小练习

日历练习

总体效果展示：

代码展示：

源代码部分

<body>

<!--            日历-->

                <div class="div_sty">

            <table cellpadding="10px" cellspacing="10px" height="200px" class="tab_sty">

                <tr>

                    <td data="一月活动<br>这是一月活动">1Jan</td>

                    <td data="二月活动<br>这是二月活动">2Fer</td>

                    <td data="三月活动<br>这是三月活动">3Mar</td>

                </tr>

                <tr>

                    <td data="四月活动<br>这是四月活动">4Apr</td>

                    <td data="五月活动<br>这是五月活动">5May</td>

                    <td data="六月活动<br>这是六月活动">6Jun</td>

                </tr>

                <tr>

                    <td data="七月活动<br>这是七月活动">7Jul</td>

                    <td data="八月活动<br>这是八月活动">8Auq</td>

                    <td data="九月活动<br>这是九月活动">9Sep</td>

                </tr>

                <tr>

                    <td data="十月活动<br>这是十月活动">10Oct</td>

                    <td data="十一月活动<br>这是十一月活动">11Nov</td>

                    <td data="十二月活动<br>这是十二月活动">12Dec</td>

                </tr>

            </table>

            <div id="div_sty1"></div>

        </div>

CSS代码：

*{

    padding:;

    margin:;

}

.div_sty{

    background: #ccc;

    width: 200px;

    height: 300px;

    margin: 0 auto;

    margin-top: 100px;

    text-align: center;

}

.tab_sty td{

    color: #FCFCFC;

    background: #000000;

}

#div_sty1{

    width: 100%;

    height: 150px;

    float: left;

}

js代码：

var tdDoms = null;

var divDoms = null;

$(function(){

    initDom();//初始化变量

    addEvent();//添加事件

    tianjiaEvent();//添加事件

})

function initDom(){

    tdDoms = $("td");//找到td

    divDoms = $("#div_sty1");//找到

}

function addEvent(){

    tdDoms.mouseover(function(){

        tdDoms.css("color","white");

        $(this).css("color","red");

        divDoms.html($(this).attr("data"));

    })

}

注：当鼠标移动到相应月份的时候，下面的事件提示紧接发生相对应的变化。

巴特西

Jquery日历编写小练习

日历练习

最新文章

热门文章