Ferris教程学习笔记:js示例2.13 简易JS年历

//解题思路:
   将每一个月的节日保存在一个数组中，下标0开始--11
   在程序中为每一个li添加一个点击事件
   1:修改css属性
   2:依据元素下标赋值

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gbk">
 4 <title>简易JS年历</title>
 5 <style type="text/css">
 6  body,ul,li,h2,p{margin:0;padding:0;}
 7  body{font:12px/1.5 Tahoma;}
 8  #calendar{width:248px;overflow:hidden;zoom:1;background:#eaeaea;margin:10px auto;padding:0 0 10px 10px;}
 9  #calendar ul{overflow:hidden;zoom:1;}
10  #calendar li{color:#fff;float:left;width:40px;height:40px;cursor:pointer;font-size:14px;
11  text-align:center;background:#424242;line-height:1.3;list-style-type:none;border:1px solid #424242;
12  margin:10px 10px 0 0;padding:5px;}
13  #calendar li.current{color:#f69;background:#fff;}
14  #calendar li strong{display:block;font-size:18px;}
15
16  #msg{color:#666;background:#f1f1f1;border:1px solid #fff;margin:10px 10px 0 0;padding:5px;}
17  #msg h2{font-size:14px;}
18 </style>
19 </head>
20 <body>
21  <div id="calendar">
22   <ul>
23    <li class=""><strong>1</strong>JAN</li>
24    <li class=""><strong>2</strong>FER</li>
25    <li class=""><strong>3</strong>MAR</li>
26    <li class=""><strong>4</strong>APR</li>
27    <li class=""><strong>5</strong>MAY</li>
28    <li class=""><strong>6</strong>JUN</li>
29    <li class=""><strong>7</strong>JUL</li>
30    <li class=""><strong>8</strong>AUG</li>
31    <li class="current"><strong>9</strong>SEP</li>
32    <li class=""><strong>10</strong>OCT</li>
33    <li class=""><strong>11</strong>NOV</li>
34    <li class=""><strong>12</strong>DEC</li>
35   </ul>
36   <div id="msg">
37    <h2>
38      <strong>9</strong>月节日
39      <p>中秋节：9月10日至12日放假3天。</p>
40    </h2>
41   </div>
42  </div>
43 <script type="text/javascript">
44
45
46
47  window.onload = function(){
48    var oArray = [
49         "元旦：1月1日至3日放假三天。",
50         "春节：2月2日至8日放假7天。",
51         "妇女节：3月8日妇女节，与我无关。",
52         "清明节：4月3日至5日放假3天",
53         "劳动节：4月30日至5月2日放假3天。",
54         "端午节：6月4日至6日放假3天。",
55         "小暑：7月7日小暑。不放假。",
56         "七夕节：8月6日七夕节。不放假。",
57         "中秋节：9月10日至12日放假3天。",
58         "国庆节：10月1日至7日放假7天。",
59         "立冬：11月8日立冬。不放假。",
60         "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"
61    ];
62
63    //解题思路:
64    //将每一个月的节日保存在一个数组中，下标0开始--11
65    //在程序中为每一个li添加一个点击事件
66    //1:修改css属性
67    //2:依据元素下标赋值
68     var lis = document.getElementById("calendar").getElementsByTagName("li");
69     var p1  = document.getElementById("msg").getElementsByTagName("p")[0];
70     var strong = document.getElementById("msg").getElementsByTagName("strong")[0];
71     var size = lis.length;
72     for(var i=0;i<size;i++){
73      lis[i].index = i;
74      lis[i].onclick = function(){
75
76         //清除样式
77         for(p in lis)lis[p].className = "";
78         this.className = "current";
79         //赋值,节日
80         p1.innerHTML = oArray[this.index];
81         //赋值,月份
82         strong.innerHTML = this.index+1;
83      }
84     }
85  };
86 </script>
87 </body>
88 </html>

转载于:https://www.cnblogs.com/kaka100/p/3471030.html

Ferris教程学习笔记:js示例2.13 简易JS年历相关推荐

黑马程序员最新版JavaWeb基础教程-学习笔记
da@黑马程序员最新版JavaWeb基础教程-学习笔记 day06-HTML&CSS HTML HTML(HyperTest Markup Language):超文本标记语言是一门语言,所有 ...
Python基础教程-菜鸟教程学习笔记1
Python基础教程-菜鸟教程学习笔记1 文章目录 Python基础教程-菜鸟教程学习笔记1 前言 Python 简介 1. 第一个Python程序 2. Python 中文编码 3. 基本语法 1) ...
Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
【从零开始的大数据学习】Flink官方教程学习笔记（一）
Flink官方教程学习笔记学习资源基础Scala语法 Scala数据结构专题声明变量代码块函数(function) 方法(methods) Traits (接口) class(类) tupl ...
SQL数据库教程-学习笔记2
SQL数据库教程-学习笔记2 文章目录 SQL数据库教程-学习笔记2 三.DML语言的学习 1.插入语句:insert into 2.修改语句:update 3.删除语句:delete 4.练习题四 ...
Linux教程学习笔记
Linux教程学习笔记目录 Linux教程学习笔记写在前面虚拟机 Linux目录结构远程登录Linux系统 vi和vim编辑器关机.重启和用户登录注销用户管理实用指令组管理和权限管理 ...
黑马程序员Java教程学习笔记（五）
学习视频:https://www.bilibili.com/video/BV1Cv411372m 如侵权,请私信联系本人删除文章目录黑马程序员Java教程学习笔记(五) 日期时间:Date.Sim ...
大数据Hadoop教程-学习笔记01【大数据导论与Linux基础】
视频教程:哔哩哔哩网站:黑马大数据Hadoop入门视频教程,总时长:14:22:04 教程资源:https://pan.baidu.com/s/1WYgyI3KgbzKzFD639lA-_g,提取码: ...
paddleX使用教程学习笔记
paddleX为百度飞浆一类产品,在数据标注.图像处理.模型训练方面简单实用,以下为用法学习笔记 paddleX使用教程学习笔记 PaddleX的安装示例下载使用步骤导入数据集新建项目参数配 ...

Ferris教程学习笔记:js示例2.13 简易JS年历

Ferris教程学习笔记:js示例2.13 简易JS年历相关推荐

最新文章

热门文章