2015.7.8js-05(简单日历)
今天做一个简单的小日历,12个月份,鼠标移动其中一个月份时添加高亮并显示本月的活动。其实同理与选项卡致。不过是内容存在js里
window.onload = function(){
var oMain = document.getElementById("month");
var aMonth = oMain.getElementsByTagName("li");
var oContent = document.getElementById("content");
var aActiveContent = ["1月份的活动内容","2月份的活动内容","3月份的活动内容","4月份的活动内容","5月份的活动内容","6月份的活动内容","7月份的活动内容","8月份的活动内容","9月份的活动内容","10月份的活动内容","11月份的活动内容","12月份的活动内容"] for(var i = 0, len = aMonth.length; i < len; i++){
aMonth[i].index = i;
aMonth[i].onclick = function(){
for(var j = 0, len = aMonth.length; j < len; j++){
aMonth[j].className = "";
}
this.className = "active";
oContent.innerHTML = "<h2>"+(this.index+1)+"月</h2><p>"+aActiveContent[this.index]+"</p>";
}
}
}
HTML
<div id="wrap">
<div id="month" class="main">
<ul>
<li class="active"><a href="javascript:'">1月份</a></li>
<li><a href="javascript:'">2月份</a></li>
<li><a href="javascript:'">3月份</a></li>
<li><a href="javascript:'">4月份</a></li>
<li><a href="javascript:'">5月份</a></li>
<li><a href="javascript:'">6月份</a></li>
<li><a href="javascript:'">7月份</a></li>
<li><a href="javascript:'">8月份</a></li>
<li><a href="javascript:'">9月份</a></li>
<li><a href="javascript:'">10月份</a></li>
<li><a href="javascript:'">11月份</a></li>
<li><a href="javascript:'">12月份</a></li>
</ul>
</div>
<div id="content">
<h2>1月</h2>
<p>1月份的活动内容</p>
</div>
</div>
2015.7.8js-05(简单日历)的更多相关文章
- js编写当天简单日历
之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日 ...
- js超简单日历
用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示 ...
- JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- Visual Studio 2015的安装和简单的单元测试
何为单元测试 绝大多数的软件都是由多人合作完成的,大家的工作相互有依赖关系.软件的很多错误都来源于程序员对模块功能的误解.疏忽或不了解其他模块的变化.如何能让自己负责的模块功能的定义尽量的明确,模块内 ...
- jquery编写的简单日历
以前在开发web页面的时候遇到日历,都是直接引入一些日历组件来用,一直不太明白实现原理,总感觉挺复杂的. 今天尝试着用jquery写了一个简单的日历功能,可以选择年份,月份,返回今天,原来简单的日历功 ...
- 【UI插件】开发一个简单日历插件(上)
前言 最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来 而且也用于了这么多频道的东西,如果没有总结,没有整理,没 ...
- java简单日历
一.使用java的calendar类写一个简单的日历 package com.calendar; import java.util.Calendar; import java.util.Date; i ...
- vue初学实践之路——vue简单日历组件(1)
---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...
- 简单日历dom
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- iOS:当点击 FormSheet 之外时,关闭该视图
@interface XXViewController (){ @property (strong, nonatomic) UITapGestureRecognizer *tapGesture; - ...
- java 散列
原文:https://www.cnblogs.com/younghao/p/8333795.html 为什么要设计散列这种数据结构呢?在现实世界中,实体之间可能存在着映射关系(key-value),比 ...
- 用Fiddler可以设置浏览器的UA 和 手动 --Chrome模拟手机浏览器(iOS/Android)的三种方法,亲测无误!
附加以一种软件的方法是:用Fiddler可以设置浏览器的UA 以下3种方法是手动的 通过伪装User-Agent,将浏览器模拟成Android设备. 第一种方法:新建Chrome快捷方式 右击桌面上的 ...
- 安装配置和使用HBASE Cluster(基于发行版CDH5.0.2)——系列随笔
本系列文章只是记录了笔者本人在学习实验安装和使用基于CDH5.0.2的HBASE集群过程中的一些经验教训和心得,绝不是详细的安装过程,因本人不过一初学者,很多方面不甚了了,如果能让不幸读到的人有所得则 ...
- UNIX环境编程学习笔记(19)——进程管理之fork 函数的深入学习
lienhua342014-10-07 在“进程控制三部曲”中,我们学习到了 fork 是三部曲的第一部,用于创建一个新进程.但是关于 fork 的更深入的一些的东西我们还没有涉及到,例如,fork ...
- 如何用BarTender 2016字处理器完成表格设计
很多时候,需要应客户要求,用BarTender 2016设计带表格的标签.在BarTender 2016中字处理器文本对象可以使用字处理中的诸多格式功能(如项目符号.编号列表.表格.混合字体以及RTF ...
- cakephp文件结构
一个项目的开发会用到cakephp的那些文件呢? 如果你的项目使用cake1.3.6,那么可以参考下面的内容 根据我的经验,会涉及一下文件夹: config controllers models ...
- 理解firewall
http://blog.csdn.net/dream361/article/details/54022470 //firewall介绍 http://www.jb51.net/article/103 ...
- Nexus5 电信3G保留数据和Root升级Android 6.0
前提: A 备份手机重要数据,安全第一 B 进入twrp recovery 备份EFS,建议最好拷贝到电脑上(如果没有twrp,则需要先刷twrp,具体指令请看下面步骤第10条) C 因为Androi ...
- Python对象(下)
前面一篇文章介绍了一些Python对象的基本概念,这篇接着来看看Python对象相关的一些内容. Python对象的比较 Python对象有三个要素:身份,类型和值,所以我们就分别从这三个角度出发看看 ...