日历的制作

最新推荐文章于 2023-06-20 15:34:17 发布

chike8692

最新推荐文章于 2023-06-20 15:34:17 发布

阅读量89

点赞数

原文链接：https://my.oschina.net/LeesurYoo/blog/653190

版权

 1.样式表

 2.js部分
 3.div部分

  <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>日历表</title>
    <link rel="stylesheet" href="jingdongshouye.css">
    <style>
     #content{
         width:350px;
         height:500px;
         background:#ceda9e;
         margin:0  auto;

     }
        #yueFen{
            width:300px;
            height:370px;
           /*background: #4ddaa3;*/
 margin:30px 25px 0px  25px;
        }
     #yueFen ul{

         margin:15px;
     }

        #yueFen ul li{
            width:80px;
            height:80px;
            background:#da2fb4;
            margin:5px;
            float:left;
            font-size:20px;
            border-radius:5px;
            text-align:center;
            line-height:30px;
            cursor:pointer;

        }
         #yueFen ul .active{
         background:red;
     }
        #jiHua{
            width:300px;
            height:90px;
            background:#FFF;
            margin:20px 20px  10px  25px;
            border-radius:10px;
        }
        #jiHua p,#jiHua h2{
            font-size:15px;
            font-family:微软雅黑；

 }


    </style>
    <script>
        window.onload=function   () {
            var oDate=['1月到了，我们该点什么',
                    '2月到了，英国威斯敏斯特大学的研究人员发现',
                    '3月到了，一种能引起心脏病的物质含量较高，因此，在7:21之后起床对身体健康更加有益',
                    '4月到了，打开台灯一醒来，就将灯打开，这样将会重新调整体内的生物钟',
                    '5月到了，调整睡眠和醒来模式。”拉夫堡大学睡眠研究中心教授吉姆·霍恩说。喝一杯水',
                    '6月到了，是身体内成千上万化学反应得以进行的必需物质。早上喝一杯清水，可以补充晚上的缺',
                    '7月到了，在早饭之前刷牙。“在早饭之前刷牙可以防止牙齿的腐蚀，因为刷牙之后',
                    '8月到了，可以在牙齿外面涂上一层含氟的保护层。要么，就等早饭之后半小时再刷牙',
                    '9月到了，英国牙齿协会健康和安全研究人员戈登·沃特金斯说。',
                    '10月到了，吃早饭。“早饭必须吃，因为它可以帮助你维持血糖水平的稳定',
                    '11月到了，”伦敦大学国王学院营养师凯文·威尔伦说。早饭可以吃燕麦粥等，这类食物具有较低',
                    '12月到了，避免运动。来自布鲁奈尔大学的研究人员发现，在早晨进行锻炼的运动员更容易感染'

                      ]
            var oYue = document.getElementById('yueFen');
            var oFen = oYue.getElementsByTagName('li');
            var oHua =document.getElementById('jiHua');

            for (var i = 0; i < oFen.length; i++) {
                oFen[i].index=i;
                oFen[i].onmouseover = function () {
                    for (var i = 0; i < oFen.length; i++) {
                        oFen[i].className = '';
                    }
                    this.className = 'active';
                    oHua.innerHTML='<h2>'+(this.index+1)+'月</h2><p>'+oDate[this.index]+'</p>';
                }  //此处利用innerHTML来替换变化的内容，主要是利用数组的遍历这一功能


 }
        }

    </script>
</head>
<body>
<div id="content">
    <div id="yueFen">
        <ul>
            <li class="active"><p>1</p>JAN</li>
            <li><p>2</p>FER</li>
            <li><p>3</p>MAR</li>
            <li><p>4</p>APR</li>
            <li><p>5</p>MAY</li>
            <li><p>6</p>JUN</li>
            <li><p>7</p>JUL</li>
            <li><p>8</p>AUG</li>
            <li><p>9</p>SEP</li>
            <li><p>10</p>OCT</li>
            <li><p>11</p>NOV</li>
            <li><p>12</p>DEC</li>

        </ul>
    </div>
    <div id="jiHua">
        <h2>1月</h2>
        <p>我们该干点什么。。。。。。。</p>
    </div>




</div>
</body>
</html>

转载于:https://my.oschina.net/LeesurYoo/blog/653190