学习记录

01.练习数组的用法

02.理解this.index的用法

03.绑定事件深入练习理解

html代码

 <div id="date">
<ul id="uldate">
<li class="active">1月</li>
<li>2月</li>
<li>3月</li>
<li>4月</li>
<li>5月</li>
<li>6月</li>
<li>7月</li>
<li>8月</li>
<li>9月</li>
<li>10月</li>
<li>11月</li>
<li>12月</li>
</ul>
<div class="clear"></div>
<div class="content" id="text"> </div>
</div>

css样式基础美化

 @charset "utf-8";
/* CSS Document */
*{
margin:;
padding:;
}
#date{
width:500px;
margin: 0 auto;
}
ul{
padding:;
list-style: none;
} ul li{
float: left;
width:120px;
height: 120px;
background: rgba(98,96,96,1.00);
text-align: center;
line-height: 120px;
border: rgba(243,236,237,1.00) solid 1px;
color: aliceblue;
font-size: 24px;
font-weight: bold;
}
.clear{
clear: both;
}
.content{ border: #2B2B2B solid 1px;
}
.content h3{
background: #A20002;
line-height: 35px;
padding-left: 15px;
color: aliceblue;
}
.content p{
color: rgba(103,103,103,1.00);
line-height: 25px;
padding: 10px;
}
.active{
background: #FFFFFF;
border: #535353 solid 1px;
color:#CB0DF5;
}

JavaScript效果实现

 var oLi=document.getElementsByTagName('li');
var oTxt=document.getElementById('text');
var i=0;
var arr=[
'一月份相关内容',
'二月份相关内容',
'三月份相关内容',
'四月份相关内容',
'五月份相关内容',
'六月份相关内容',
'七月份相关内容',
'八月份相关内容',
'九月份相关内容',
'十月份相关内容',
'十一月份相关内容',
'十二月份相关内容'
]
for(i=0;i<oLi.length;i++){
oLi[i].index=i; //获取当前索引的值,i必须是一个循环的变量
oTxt.innerHTML="<h3>"+1+"月活动标题</h3><p>"+arr[0]+"</p>"; //鼠标未移入前显示当前月份,有待完善
oLi[i].onmouseover=function(){
for(i=0;i<oLi.length;i++){
oLi[i].className="";
}
this.className="active"; oTxt.innerHTML="<h3>"+(this.index+1)+"月活动标题</h3><p>"+arr[this.index]+"</p>"; //this.index打印当前索引的值
} }

javascript简易日历制作的更多相关文章

  1. JavaScript简易日历

    <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生Js_制作简易日历

    javascript制作简易日历,月份信息已经放在一个数组中,在<script>...</script>中编写代码实现其功能 实现步骤 a) 获取需要操作的dom对象 b) 在 ...

  3. 利用JavaScript制作简易日历

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...

  4. javascript中Date对象的应用——简易日历的实现

    × 目录 [1]效果 [2]HTML [3]CSS[4]JS 前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 ...

  5. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  6. js简易日历

    js简易日历中设计的知识点:选项卡切换   数组    innerHTML  连接符 与选项卡的区别:div的个数不同 连接符中需要注意的:(优先级) "abc"+12+3+&qu ...

  7. avalon.js实现一个简易日历

    使用MVVM框架avalon.js实现一个简易日历   最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...

  8. 使用MVVM框架avalon.js实现一个简易日历

    最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当 ...

  9. c语言的简易日历

    用c语言编写的简易日历,代码如下: #include <stdio.h> int main(int argc, const char * argv[]) { // insert code ...

随机推荐

  1. Java面向对象_数据结构之链表

    链表:是一种常见的基础数据结构,是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里村到下一个节点的指针. 在链表数据结构中,需要使用到递归算法.递归算法是一种直接或间接地调用自身算法的过 ...

  2. Linux Shell命令系列(1)

    1. ls命令ls命令是列出目录内容(List Directory Contents)的意思.运行它就是列出文件夹里的内容,可能是文件也可能是文件夹.“ls -l”命令以详情模式(long listi ...

  3. (转)linux自定义开机启动服务和chkconfig使用方法

    原文:https://www.cnblogs.com/jimeper/archive/2013/03/12/2955687.html linux自定义开机启动服务和chkconfig使用方法 1. 服 ...

  4. Spark Mllib里的如何对两组数据用斯皮尔曼计算相关系数

    不多说,直接上干货! import org.apache.spark.mllib.stat.Statistics 具体,见 Spark Mllib机器学习实战的第4章 Mllib基本数据类型和Mlli ...

  5. [LeetCode]10. Regular Expression Matching正则表达式匹配

    Given an input string (s) and a pattern (p), implement regular expression matching with support for ...

  6. 谷歌插件 JSON-Handle

    JSON-Handle http://jsonhandle.sinaapp.com/ 点击下载 插件下载后,在浏览器输入:chrome://extensions/ 将下载后的文件拖入 chrome浏览 ...

  7. The sixth day

    bound to 铁定You are bound to be fired  你会被铁定开除的 A:Dan forgot his map? Dan忘了带地图了吗? B:Yep!And he's boun ...

  8. Windows下用cmd命令安装及卸载服务[转]

    第一种方法: 1. 开始 ->运行 ->cmd2. cd到C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727(Framework版本号按IIS配置) ...

  9. 将ts文件合并为mp4命令

    cmd: copy/b D:\*.ts D:\new.ts 参考:http://blog.sina.com.cn/s/blog_66b4f1180102uzxs.html

  10. [转]iOS开发总结之代码规范

    转自:http://www.cocoachina.com/ios/20151014/13678.html 命名规范 总 的来说, iOS命名两大原则是:可读性高和防止命名冲突(通过加前缀来保证). O ...