JS入门学习,编写一个简易月历

//今天最头疼的地方在于 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…… 还是得慢慢来         */

时间: 2024-11-09 04:05:35

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

c语言:编写一个简易计算器,打印菜单界面,实现加减乘除运算,可以退出菜单界面

.编写一个简易计算器 程序: #include<stdio.h> enum  OP { EXIT,//0 ADD,//1 SUB,//2 MUL,//3 DIV//4 }; void menu()//menu表示菜单 { printf("**** 1.add  ****\n"); printf("**** 2.sub  ****\n"); printf("**** 3.mul  ****\n"); printf("**** 

JS入门学习,写一个时钟~

<!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <title>数码时钟</title> <meta charset="gb2312"> <style type="text/css"> *{ padding:0; margin:0;} body{background:rgb(0,2

js入门学习

在HTML,CSS学习的最后,开始入门学习javascript, 首先就是去了解它的用途 作用:使web页面能够与用户交互,作为控制浏览器给网页增添活力的方法 定义:它是一种脚本语言,作用于浏览器.和java没有半毛钱关系,主要是当时Netscape公司为了增加影响力改了名,,(是不是感觉很无耻) ps:区分程序的一种方式:1.客户端程序(client-side),像javascript就是,我觉得HTML,CSS应该也是. 2.服务器端程序(server-side),java,perl,php

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

最近正在学习OpenGL,我认为学习的最快方法就是做一个小项目了. 如果对OpenGL感兴趣的话,这里推荐一个很好的学习网站 https://learnopengl-cn.github.io/ 我用的是 vs2013,使用C++语言编写项目.这个小项目叫Simple2D,意味着简易的2D框架.最终的目的是可以渲染几何图形和图片,最后尝试加上一个2D粒子系统和Box2D物理引擎,并编译一个简单的游戏. 第一步,就是创建一个Win32项目. 接下来,生成一个窗口.编写一个RenderWindow类,

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

讲了三篇概博客的概念,今天,我们来一点实际的东西.我们来探讨一下如何用Java语言,编写一块简易的画图板. 一.需求分析 无论我们使用什么语言,去编写一个什么样的项目,我们的第一步,总是去分析这个项目需要满足怎样的需求. 那么,画板需要满足怎样的需要呢?换句话说,在画板上,我们应该赋予它什么功能呢?从我们熟悉的画板来看,我们需要实现诸如铅笔.橡皮.喷枪.刷子的功能,我们可以画出一些规则的图形,比如直线.矩形.圆.最好我们还能调整画笔的颜色和粗细.以上,我们希望的是,当我们点击一个按钮的时候,我们

Python学习 - 编写一个简单的web框架(二)

在上一篇日志中已经讨论和实现了根据url执行相应应用,在我阅读了bottle.py官方文档后,按照bottle的设计重写一遍,主要借鉴大牛们的设计思想. 一个bottle.py的简单实例 来看看bottle是如何使用的,代码来自http://www.bottlepy.org/docs/0.12/index.html: from bottle import route, run, template @route('/hello/<name>') def index(name): return t

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

要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ ----------------------------------------------------js代码如下 ----------------------------------------------------- //执行函数window.onload = function(){ //声明控制变量 var aDiv = docu

[js高手之路]javascript腾讯面试题学习封装一个简易的异步队列

这道js的面试题,是这样的,页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始技术( 0, 1, 2, ....9 ),首先我们用闭包封装一个创建li元素的函数. 1 var create = (function(){ 2 var count = 0; 3 return function(){ 4 var oLi = document.createElement( "li" ); 5 oLi.innerHTML = co

JS入门学习,写一个简单的图片库

<!-- 新手刚开始学JS,每天坚持写点东西 坚持下去,希望能有所进步 .  加油~~ --> <!DOCTYPE html>                                            <html><head> <title>创建一个图片库</title> <meta charset="gb2312" /> <link rel="stylesheet"