JS制作类似选项卡切换的年历
本文实例为大家分享了用JS制作简易的可切换的年历，类似于选项卡，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
background-color: green;
border-radius: 20px;
padding: 10px;
height: 800px;
width: 450px;
margin: 20px auto;
}
ul,li{
margin: 0;
padding: 0;
list-style-type: none;
}
ul{
overflow: hidden;
}
li{
background-color: yellow;
height: 120px;
width:120px;
float: left;
margin: 10px;
text-align: center;
color:blueviolet;
}
#bottom{
margin: 10px;
}
.active{
background-color: crimson;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="active"><h2>一月</h2><p>January </p></li>
<li><h2>二月</h2><p>February </p></li>
<li><h2>三月</h2><p>March </p></li>
<li><h2>四月</h2><p> April </p></li>
<li><h2>五月</h2><p> May </p></li>
<li><h2>六月</h2><p>June</p></li>
<li><h2>七月</h2><p>July </p></li>
<li><h2>八月</h2><p>August</p></li>
<li><h2>九月</h2><p>September </p></li>
<li><h2>十月</h2><p> October </p></li>
<li><h2>十一月</h2><p> November </p></li>
<li><h2>十二月</h2><p>December</p></li>
</ul>
<div id="bottom">
<h2>一月</h2>
<p>天气很好，去哪里玩呢？？？</p>
</div>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var bottom=document.getElementById("bottom");
var li=box.getElementsByTagName("li");
for (var i=0;i<li.length;i++) {
li[i].index=i;
var arr=["一月吃牛排","二月吃意面","三月看帅哥","四月看星星"
,"五月吃猪蹄","六月吃西瓜","七月吃雪糕","八月吹空调","九月捡树叶","十月吃烤鸡",
"十一月吃麻辣烫","十二月回家过年"];
li[i].onmouseover=function(){//事件绑定
for (var i=0;i<li.length;i++) {
//清除所有的li的className
li[i].className=" ";
}
this.className="active";//给当前的li添加className
bottom.innerHTML='<h2>'+(this.index +1)+'月活动 </h2><p>'+arr[this.index]+'</p>';
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
C语言实现的一个万年历小程序
该程序简单地输入一个年份(1901年之后的年份),随后程序输出该年份十二个月的日历. #include<stdio.h> #define Mon 1 #define Tues 2 #define Wed 3 #define Thur 4 #define Fri 5 #define Sat 6 #define Sun 0 #define January_days 31 #define February_days 28 #define March_days 31 #define April_day
-
JAVA实现的简单万年历代码
本文实例讲述了JAVA实现的简单万年历.分享给大家供大家参考,具体如下: import java.util.Scanner; public class PrintCalendar { public static void main(String[] args) { int years = 0; int month = 0; int days = 0; boolean isRun = false; //從控制台輸入年,月 Scanner input = new Scanner(System.in)
-
Python实现的简单万年历例子分享
复制代码 代码如下: #!/usr/bin/env python2#-*- coding:utf-8 -*-__author__ = 'jalright' """使用python实现万年历""" def is_leap_year(year): """判断是否是闰年,返回boolean值 """ if year/4==0 and year/400 !=0:
-
PHP 万年历实现代码
使用PHP实现万年历功能的要点: •得到当前要处理的月份总共有多少天$days •得到当前要处理的月份的一号是星期几$dayofweek $days的作用:知道要处理的月份共有多少天,就可以通过循环输出天数了 $dayofweek的作用:只有知道每个月的1号是星期几,才能知道在输出天数之前需要输出多少空格(空白) 最终效果图如下: "万年历类"的代码如下: 复制代码 代码如下: <?php /** * PHP万年历 * @author Fly 2012/10/16 */ clas
-
用jquery写的一个万年历(自写)
复制代码 代码如下: <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <style> .main{ width:600px; height:350px; background:gray; margin-left: aut
-
AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通
'转发时请保留此声明信息,这段声明不并会影响你的速度! '****天枫AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通******** '作者:天枫 '网站:http://www.52515.net '电子邮件:chenshaobo@gmail.com 'WEB开发群:4635188 19182747 'QQ:76994859 '版权声明:版权所有,源代码公开,各种用途均可免费使用,但是修改后必须把修改后的文件 '发送一份给作者.并且保留作者此版权信息 '*****
-
[转帖]PHP世纪万年历
<? //世纪万年历 #这是唯一的设置-请输入php文件的位置 $file="http://192.168.1.168/php/rl/s2m.php"; //#农历每月的天数 $everymonth=array( 0=>array(8,0,0,0,0,0,0,0,0,0,0,0,29,30,7,1), 1=>array(0,29,30,29,29,30,29,30,29,30,30,30,29,0,8,2), 2=>array(0,30,29,3
-
PHP制作万年历
使用PHP实现万年历功能的要点: 得到当前要处理的月份总共有多少天$days 得到当前要处理的月份的一号是星期几$dayofweek $days的作用:知道要处理的月份共有多少天,就可以通过循环输出天数了 $dayofweek的作用:只有知道每个月的1号是星期几,才能知道在输出天数之前需要输出多少空格(空白) 最终效果图如下: "万年历类"的代码如下: 复制代码 代码如下: <?php /** * PHP万年历 * @author Fly 2012/10/16 */ cla
-
js制作简易年历完整实例
本文实例讲述了js制作简易年历的方法.分享给大家供大家参考.具体如下: 今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己坚持下去,各位js大神也多多指点. innerHtml的用法 现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了. 例如top.innerHTML="";就可以在top对应的位置出现一个button了! 程序实现思
-
c#实现万年历示例分享 万年历农历查询
复制代码 代码如下: using System.Collections.Generic;using System.Text; using System; namespace yangliToyinli{ #region ChineseCalendarException /// <summary> /// 中国日历异常处理 /// </summary> public class ChineseCalendarException : System.Exce