文档章节

日历的制作

LeesurYoo
 LeesurYoo
发布于 2016/04/05 22:25
字数 708
阅读 12
收藏 1
 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>

© 著作权归作者所有

LeesurYoo
粉丝 0
博文 5
码字总数 15014
作品 0
武汉
程序员
私信 提问
日历控件开发详解0

从今天开始,我们将一步步学习如何实现一个Android的日历控件,今天是第一天! 一、准备工作之配置参数 制作一个日历控件,我们首先要配置一些参数 1.尺寸 dimension.xml 10dp48dp...

eclipse_xu
2013/01/10
0
0
ECharts 3.5 发布:新增日历坐标系和 echarts 统计扩展

在 echarts 新发布的 3.5 版本中,新增了日历坐标系,增强了坐标轴指示器。同时,echarts 统计扩展 1.0 版本发布了。 日历坐标系用于在日历中绘制图表,提供了超级简单好用的日历图,高度可定...

局长
2017/03/28
10.2K
46
如何用Java制作一个简易日历

简易日历制作 记录一下Java实现的一个日历小程序,效果图如下: 实现以上的效果,我们需要用到两个类:SimpleDateFormat和Calendar。 首先看看这两个类的用法: 类 SimpleDateFormat 是一个以...

Zero_Yi
2018/07/19
0
0
关于fullcalendar里显示json格式的events(java)

cyper的java代碼(spring mvc controller): @RequestMapping(value = "calendarEvents")@ResponseBodypublic String calendarEvents(){List<LecturerAgendaVo> agendas = lecturerAgendaServ......

cyper
2013/10/08
11K
2
根据年和月得到打印出当月的日历

package org.crazybird.learn.objectandclass; import java.util.GregorianCalendar; import java.util.Scanner; import com.sun.org.apache.bcel.internal.classfile.JavaClass; public cla......

JAVA_NINA
2011/02/15
228
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.7K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部