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> ...
随机推荐
- 启动zookeeper时出现的问题
zkEnv.cmd @echo off REM Licensed to the Apache Software Foundation (ASF) under one or more REM contr ...
- UNIX环境编程学习笔记(4)——文件I/O之dup复制文件描述符
lienhua342014-08-23 UNIX 提供了两个函数 dup 和 dup2 用于复制一个现存的文件描述符. #include <unistd.h> int dup(int fi ...
- maven添加本地jar到本地库中
maven添加本地jar到本地库中(用于远端地址下载不了的情况) 在dos命令行执行以下命令将会吧ojdbc14-10.2.0.4.0.jar添加到本地库中(ps:必须已经安装了,maven,并配置了 ...
- debian、ubuntu:使用apt包管理器可能存在的问题! 让新手望而却步!
apt包管理器说好真好,说不好真不好. 最近在debian9.ubuntu18.04上安装oracle 10g 玩. 怎么都准备不好安装环境.原因就是i386构架体系的deb包总安装不正确! baid ...
- 2015-10-07:几乎100%肯定:百度网盘在夜间的时段是不限速的:早晨7点前很轻松达到3M/S,7点后就降低到1M/S了,白天才400K/S左右
最近发现(2015-10-07)几乎100%肯定:百度网盘在夜间的时段是不限速的:早晨7点前很轻松达到3M/S,7点后就降低到1M/S了,白天才400K/S左右
- IntelliJ IDEA删除代码的注释
由于反编译出的Java每一行都有注释,因此查找批量替换 搜索框,正则表达式 (/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+/|[ \t]*//.*) 或者 (/\* ...
- 让Zend Studio联系关系CakePHP模板文件.ctp
让Zend Studio关联CakePHP模板文件.ctp Zend Studio是套强大的PHP编辑器,各种给力让PHP开发者爱不释手.对于CakePHP程序员来说,有件事情相当头疼,在初始安装好Z ...
- PDCA 价值所在
企业IT服务管理实施 不提倡一步到位 对企业IT部门来说,实施ITIL Service Support(服务支持)的意义在于清晰梳理日常IT运维管理过程中遇到的各种各样的事,使IT运维过程变得有序连贯 ...
- Java多线程-两种常用的线程计数器CountDownLatch和循环屏障CyclicBarrier
Java多线程编程-(1)-线程安全和锁Synchronized概念 Java多线程编程-(2)-可重入锁以及Synchronized的其他基本特性 Java多线程编程-(3)-从一个错误的双重校验锁 ...
- mysql数据库中查看当前使用的数据库是哪个数据库?
环境描述: mysql版本:5.5.57-log 操作系统版本:Red Hat Enterprise Linux Server release 6.6 (Santiago) 需求说明: 查看当前使用的 ...