首页 > Web开发 > 详细

用jquery制作简易日历

时间:2019-01-12 10:15:32      阅读:23      评论:0      收藏:0      [点我收藏+]

标签:border   单元   may   fun   his   attr   query   com   date   

html代码如下:

div align="center" id="divAll">
<table id="tab" border="1" cellpadding="0" cellspacing="10">
    <tr>
        <td date="一月活动<br>这是一月活动"><h2>1</h2>JAN</td>
        <td date="二月活动<br>这是二月活动"><h2>2</h2>FER</td>
        <td date="三月活动<br>这是三月活动"><h2>3</h2>MAR</td>
    </tr>
    <tr>
        <td date="四月活动<br>这是四月活动"><h2>4</h2>APR</td>
        <td date="五月活动<br>这是五月活动"><h2>5</h2>MAY</td>
        <td date="六月活动<br>这是六月活动"><h2>6</h2>JUN</td>
    </tr>
    <tr>
        <td date="七月活动<br>这是七月活动"><h2>7</h2>JUL</td>
        <td date="八月活动<br>这是八月活动"><h2>8</h2>AUG</td>
        <td date="九月活动<br>这是九月活动"><h2>9</h2>SEP</td>
    </tr>
    <tr>
        <td date="十月活动<br>这是十月活动"><h2>10</h2>OCT</td>
        <td date="十一月活动<br>这是十一月活动"><h2>11</h2>NOV</td>
        <td date="十二月活动<br>这是十二月活动"><h2>12</h2>DEC</td>
    </tr>
</table>
<div id="div_on"></div>
</div>

CSS样式代码如下:

<style>
    *{
        padding: 0;
        margin: 0;
    }
    body {
        background: #f6f9fc; 
        font-family: arial;
    }
    div{
        
        background-color: #ccc;
        width: 50%;
    }
    td{
        background-color: black;
        color: white;
    }
    #tab{
        margin: 0 auto;
        width: 30%;
        text-align: center;
    }
    #div_on{
    width: 30%;
    height: 50px;
    background: #D6D6D6;
    margin: 0 auto;
    
}
    </style>

JS代码如下:

var tdAlls = null,
    divDom = null;
 $(function(){
//     initDom();
    addEvent();
});
//function initDom(){
    tdAlls=$(‘td‘);      //下面用不到的话这里可以注释掉
    divDom=$(‘div_on‘);
//}
function addEvent(){
    $(‘td‘).mouseover(function(){     //这里可以用上面定义的变量名 也可以直接写当前的赋值变量名($(‘td‘))     
        $(‘td‘).css(‘color‘,"white");
        $(this).css(‘color‘,"red");
        var str=$(this).attr(‘date‘);
        $(‘#div_on‘).html(str);
    }).mouseout(function(){
        $(‘td‘).css(‘color‘,"white");
           $(this).css(‘color‘,"red");
    });
}

运行结果:

当鼠标移入字体变红,下面div显示当前单元格显示的内容,当鼠标移入另一个单元格,当前单元格变红,原本单元格变回原来颜色

技术分享图片

 

用jquery制作简易日历

标签:border   单元   may   fun   his   attr   query   com   date   

原文:https://www.cnblogs.com/qq1312583369/p/10258449.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号