//今天最头疼的地方在于 getElementsByClassName()的 [] ~~

//错了N遍后只能说有点点头绪，如果不加[] 查找的就是全部吧 加上[]能精确控制的标签或者class

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>简易年历</title>
<style type="text/css">

*{ margin:0px; padding:0px;}
p,li,span{ font-family:"Microsoft YaHei"; font-size:12px; color:#FFF;}
#tab { width:200px; height:340px; background:#dddddd; margin:50px auto; padding:10px; }
ul{ width:190px; height:250px; margin:0 auto; }
li{ list-style:none; width:50px; height:50px; float:left;
text-align:center; font-variant:50px; background:#000; border:1px solid #000;
margin:10px 0 0 10px; }
.text {
width:176px; height:80px; border:1px solid #eeeeee; margin:7px 13px 5px 13px; background:#FFF;
text-indent:24px;
}
.text p{ color:#000; margin:2px 7px;}
.text h4{ margin:3px auto; padding-left:7px;}
.active{ background:#FFF; color:#F00;}
.active p{ background:#FFF;color:#F00;}
#tab ul li h2{ margin-top:5px;}

</style>

</head>

<body>

<div id="tab">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FEB</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APP</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text">
<h4>简易日历</h4><p>由fridolph制作。把鼠标移到相应的月份上，会显示该月份上的信息哦</p>
</div>

</div>

<script src="js/rili.js"></script>

</body>
</html>

--------------------------------------------以下是javascript代码--------------------------------------------

window.onload = function() {
var mouth_title =[　　　　　　　　　　　　//该声明是最后给innerHTML标题的
'大挑战', 　　　　 //一月 标题
'过年咯', 　　　　 //二月 标题
'开学啦', 　　　　 //三月 标题
'奋斗中', 　　　　 //四月 标题
'好累啊', 　　　　 //五月 标题
'毕业季', 　　　　 //六月 标题
'找工作ing', 　　　//七月 标题
'找租房ing', 　　　//八月 标题
'新工作', 　　　　  //九月 标题
'奋斗ing', 　　　   //十月 标题
'生日咯',　　　　  //十一月标题
'快结束了', 　　   //十二月标题
];

var mouth_text =[　　　　　　　　　　　　　　　　　　　　　　　　//该声明是最后给innerHTML的文字的
'又是新的一年了。挺辛苦的，记得多加衣服', 　　　　　　　　　　　      //一月份的文字
'二月了，别让自己太累了哦，回家一起过年吧', 　　　　　　　　　　　　//二月份的文字
'要开学了哦。学得怎么样了，温故而知新，别遗漏太多', 　　　　　　　　//三月份的文字
'长路漫漫，每天保持一个好状态，继续学更多的知识吧', 　　　　　　　　//四月份的文字
'毕业论文要在这个月内搞定了，不能拖啊，好好弄', 　　　　　　　　　　//五月份的文字
'这月一过大学生活就真正宣告结束了，学得怎样了？',　　　　　　　　 　//六月份的文字
'开始去找工作吧，利用好现有这些知识和技能，相信自己',　　　　　　　 //七月份的文字
'得去成都找房子租下来呢，以后就是打拼的日子了', 　　　　　　　　　   //八月份的文字
'工作应该开始了吧，再累再苦都坚持下来，以后就好好', 　　　　　　　　//九月份的文字
'十月了，国庆节！可自己不能轻松下来啊，好好巩固自己吧', 　　　　　   //十月份的文字
'我的生日就要到了，双十一控制住自己的手啊，一不小心就完了', 　　　　//十一月份文字
'今年也要结束了，无论怎样，坚持做最好的自己吧！^_^', 　　　　　　  //一二月份文字
];
　　

　　　　var oTab = document.getElementById('tab');　　　　　　 //获取文件中ID为tab的元素
　　　　var oLi = oTab.getElementsByTagName('li');　　　　　　  //在oTab中找到标签li命名为oLi
　　　　var oTxt = oTab.getElementsByClassName('text')[0];　  //最容易犯错的地方，获取的是class（标签）这是多个对象中的一个 所以要用[]
　　　　for(var i=0; i<oLi.length; i++){
　　　　　　oLi[i].xuhao = i;　　　　　　　　　　　　　　　　　　  //让循环后对应数字的序号为i （从0开始的）
　　　　　　oLi[i].onmouseover = function() {　　　　　　　　　  //添加一个鼠标移入事件
　　　　　　　　for(var i=0; i<oLi.length; i++){
　　　　　　　　　　oLi[i].className = '';　　　　　　　　　　　　 //执行移入后循环让所有li标签的类名清空
　　　　　　　　}
　　　　　　　　this.className = 'active';　　　　　　　　　　　　//让当前鼠标移动到的类名为active
　　　　　　　　oTxt.innerHTML = "<h4>"+(this.xuhao+1)+"月&nbsp;&nbsp;"+mouth_title[this.xuhao]+"</h4><p>"+mouth_text[this.xuhao]+"</p>";
　　　　　　}　　　　　　　　　　　　　　　　　　　　　　　　　　//实现 innerHTML
　　　　}
}

/*  = = 感觉越来越跟不上节奏了…… 一个小地方错N多遍还是改不过来，各种苦逼~~ 果然还是基本功不够扎实， 空下来了还是得多补补基本功

最后实现的效果还算差强人意~~  加油啊，不要放弃。遇到困难是难免的，慢慢寻找解决的办法吧，javascript…… 还是得慢慢来         */

JS入门学习，编写一个简易月历的更多相关文章

  1. 基于OpenGL编写一个简易的2D渲染框架-06 编写一个粒子系统

    在这篇文章中,我将详细说明如何编写一个简易的粒子系统. 粒子系统可以模拟许多效果,下图便是这次的粒子系统的显示效果.为了方便演示,就弄成了一个动图. 图中,同时显示了 7 种不同粒子效果,看上去效果挺 ...

  2. C#编写一个简易的文件管理器

    编写一个简易的文件管理器,通过本次实验,练习 TreeView.ListView 和SplitContainer 控件的使用,同时熟悉 C#文件系统的操作方法以及 File 类和 Directory类 ...

  3. JS入门学习，写一个时钟~

    <!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <t ...

  4. 基于OpenGL编写一个简易的2D渲染框架-01 创建窗口

    最近正在学习OpenGL,我认为学习的最快方法就是做一个小项目了. 如果对OpenGL感兴趣的话,这里推荐一个很好的学习网站 https://learnopengl-cn.github.io/ 我用的 ...

  5. 使用KVM的API编写一个简易的AArch64虚拟机

    参考资料: Linux虚拟化KVM-Qemu分析(一) Linux虚拟化KVM-Qemu分析(二)之ARMv8虚拟化 Linux虚拟化KVM-Qemu分析(三)之KVM源码(1) Linux虚拟化KV ...

  6. 用Java语言编写一个简易画板

    讲了三篇概博客的概念,今天,我们来一点实际的东西.我们来探讨一下如何用Java语言,编写一块简易的画图板. 一.需求分析 无论我们使用什么语言,去编写一个什么样的项目,我们的第一步,总是去分析这个项目 ...

  7. day-1 用python编写一个简易的FTP服务器

    从某宝上购买了一份<Python神经网络深度学习>课程,按照视频教程,用python语言,写了一个简易的FTP服务端和客户端程序,以前也用C++写过聊天程序,编程思路差不多,但是pytho ...

  8. Python Django 编写一个简易的后台管理工具4-添加admin模版

    导入admin后台模版 可以在网上任意搜索模版,我这里也提供一个地址github 拷贝admin后台的html文件至项目的templates文件夹 创建static文件夹,将admin后台的js,im ...

  9. js入门学习~ 运动应用小例

    要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ --------------------- ...

随机推荐

  1. C#测试题若干，都是基础阿

    类的以下特性中,可以用于方便地重用已有的代码和数据的是( ).   A.多态B.封装C.继承D.抽象 答案:http://hovertree.com/tiku/bjaf/a3k6pgq5.htm 可用 ...

  2. .Net(c#)汉字和Unicode编码互相转换

    {"Tilte": "\u535a\u5ba2\u56ed", "Href": "http://www.cnblogs.com&q ...

  3. ReSharper.8.0.14.856注册码

    ReSharper.8.0.14.856注册码 用户名:ronle 注册码:ZoJzmeVBoAv9Sskw76emgksMMFiLn4NM 网络转载

  4. poj2186--tarjan+缩点

    题目大意:       每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么牛A也 ...

  5. 源映射(Source Map)详解

    一.什么是源映射 为了提高性能,很多站点都会先压缩 JavaScript 代码然后上线, 但如果代码运行时出现错误,浏览器只会显示在已压缩的代码中的位置,很难确定真正的源码错误位置. 这时源映射就登场 ...

  6. Docker化运维方式讲解

    应用迁移需求 应用运维需要考虑的一个重要问题就是迁移, 在不同机器.机房.环境间迁移.迁移的原因有很多, 比如硬件过保(硬件故障), 机房迁移, 应用扩缩容等. 应用迁移的核心需求是: 简单.迁移操作 ...

  7. [ASP.NET MVC] ASP.NET Identity登入技术剖析

    [ASP.NET MVC] ASP.NET Identity登入技术剖析 前言 ASP.NET Identity是微软所贡献的开源项目,用来提供ASP.NET的验证.授权等等机制.本篇文章介绍ASP. ...

  8. 很漂亮的用户登录界面HTML模板

    效果预览:http://keleyi.com/keleyi/phtml/divcss/21.htm HoverTree开源项目实现了分层后,准备实现管理员后台登录,这里先把登录界面的HTML模板整理好 ...

  9. js严格模式总结

    首先,我们要理解严格模式的概念,严格模式是一种特殊的执行模式,它修复了部分语言上的不足,提供更强的错误检查,病增强安全性.可以对部分函数进行执行严格模式,如: function func(){ 'us ...

  10. Android开发4： Notification编程基础、Broadcast的使用及其静态注册、动态注册方式

    前言 啦啦啦~(博主每次开篇都要卖个萌,大家是不是都厌倦了呢~) 本篇博文希望帮助大家掌握 Broadcast 编程基础,实现动态注册 Broadcast 和静态注册 Broadcast 的方式以及学 ...