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:0;
    margin: 0;
}
.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"));
    })
}

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

日历练习

相关推荐