日历练习

html代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="yuefen.js"></script>
        <link rel="stylesheet" href="yuefen.css">    
    </head>

    <body>
        <div id="bjdiv">
            <table id="tb" cellpadding="25px" cellspacing="25px">
                <tr>
                    <td date="这是一月份事件"><h2>1</h2>JAN</td>
                    <td date="这是二月份事件"><h2>2</h2>FER</td>
                    <td date="这是三月份事件"><h2>3</h2>MAR</td>
                </tr>
                <tr>
                    <td date="这是四月份事件"><h2>4</h2>APR</td>
                    <td date="这是五月份事件"><h2>5</h2>MAY</td>
                    <td date="这是六月份事件"><h2>6</h2>JUN</td>
                </tr>
                <tr>
                    <td date="这是七月份事件"><h2>7</h2>JUL</td>
                    <td date="这是八月份事件"><h2>8</h2>AUG</td>
                    <td date="这是九月份事件"><h2>9</h2>SEP</td>
                </tr>
                <tr>
                    <td date="这是十月份事件"><h2>10</h2>OCT</td>
                    <td date="这是十一月份事件"><h2>11</h2>NOV</td>
                    <td date="这是十二月份事件"><h2>12</h2>DEC</td>
                </tr>
            </table>
            <div id="xsdiv"></div>
            
        </div>
        
        
        
    </body>
</html>

css代码

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 #bjdiv{
 6     width: 20%;
 7     height: 600px;
 8     margin: 0 auto;
 9     background-color: beige;
10     margin-top: 50px;
11 
12     
13 }
14 td{
15     background-color: black;
16     padding: 15px;
17     color: white;
18 }
19 table{
20     
21     
22 }
23 #xsdiv{
24     width: 50%;
25     height: 100px;
26     background-color: blue;
27     margin: 0 auto;
28     margin-bottom: 50px;
29 }

jquery代码

 1 //javascript Document
 2 var tdobj = null;
 3 var xiadivobj = null;
 4 $(function(){
 5     initdom();
 6     addEent();
 7 })
 8 function initdom(){
 9     tdobj = $("td");
10     xiadivobj = $("#xsdiv");
11 }
12 function addEent(){
13     　　tdobj.mouseover(function(){
14         tdobj.css("color","white");
15         $(this).css("color","red");
16         xiadivobj.html($(this).attr('date'));
17     });
18 }

引入了一个jQuery的文件

日历 练习

猜你喜欢