这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别:

首先html代码:

  

<div class="container">
<div class="container_cont">
<ul id="cont_ul">
<li class="active">
<span>1</span>
<p>jan</p>
</li>
<li>
<span>2</span>
<p>fer</p>
</li>
<li>
<span>3</span>
<p>mar</p>
</li>
<li>
<span>4</span>
<p>apr</p>
</li>
<li>
<span>5</span>
<p>may</p>
</li>
<li>
<span>6</span>
<p>jun</p>
</li>
<li>
<span>7</span>
<p>jul</p>
</li>
<li>
<span>8</span>
<p>aug</p>
</li>
<li>
<span>9</span>
<p>sep</p>
</li>
<li>
<span>10</span>
<p>oct</p>
</li>
<li>
<span>11</span>
<p>nov</p>
</li>
<li>
<span>12</span>
<p>dec</p>
</li>
</ul>
<div class="cont">
<div id="cont">
<h2>1月活动</h2>
<p>快过年了,大家可以商量去烧烤了吧!</p>
</div>
</div>
</div>
</div>

css代码:

* { margin: 0; padding: 0; }
.container { width: 340px; background-color: #ccc; padding: 40px; margin: 50px auto; }
.container_cont { width: 340px; overflow: hidden; }
.container ul { font-size: 0; width: 360px; overflow: hidden; }
.container li { width: 100px; height: 100px; text-align: center; background-color: #666; color: #fff; display: inline-block; vertical-align: top; margin-right: 20px; margin-bottom: 20px }
.container li.active { background-color: #fff; border: 1px solid #666; width: 98px; height: 98px }
.container span { font-size: 18px; display: block; margin-top: 20px }
.container p { margin-top: 10px; font-size: 18px; }
.container li.active span,.container li.active p { color: #333; font-size: 18px }
.cont h2 { font-size: 18px }

重点的js代码:

window.onload = function(){
var arr = [
"111111",
"1111",
"11111",
"111111",
"1111",
"11111",
"111111",
"1111",
"111111",
"11",
"11111",
"111111"
];
var oUl = document.getElementById("cont_ul");
var aLi = oUl.getElementsByTagName("li");
var oCont = document.getElementById("cont");

for( var i = 0; i < aLi.length; i ++ ){
aLi[i].index = i;
aLi[i].onmouseover = function(){
for( var i = 0; i < aLi.length; i ++ ){
aLi[i].className = "";
}
this.className = "active";
oCont.innerHTML = "<h2>" + (this.index+1) + "月活动</h2><p>"+arr[this.index]+"</p>";
}
}
}

说明:

  1、我们只是把效果实现,所以arr里面的数组具体内容就随便写了下;

  2、这里我们学到了innerHTML 属性;这个属性指的是设置或返回表格行的开始和结束标签之间的 HTML。在这个例子中因为id为cont的div里面的内容是动态的,所以不能写死,通过这个属性

    动态的对它里面的内容进行相应的改变oCont.innerHTML = "<h2>" + (this.index+1) + "月活动</h2><p>"+arr[this.index]+"</p>"; h2标签里的内容相对简单,只需要通过添加索引值就即可

    不过需要注意的是,因为索引值是从0开始的所以this.index 后面需要加1;p标签里面的内容我们通过新建个数组arr,然后当鼠标滑过月份的时候,通过对应的索引值显示相应的数组内容;

3、字符串拼接:在这里oCont.innerHTML = "<h2>" + (this.index+1) + "月活动</h2><p>"+arr[this.index]+"</p>"; 我们看到有些内容是用引号包起来的,对没错,这就是字符串,像this.index+1和arr[this.index]

      这些都是变量;为保证程序正常运行,他们之间需要+连接起来

原生js简易日历效果实现的更多相关文章

  1. js简易日历

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

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. 原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  4. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  5. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  6. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  7. 原生js实现的效果

    原生js实现tooltip提示框的效果   在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...

  8. 原生js仿jquery--animate效果

    效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

随机推荐

  1. (转) RabbitMQ学习之spring整合发送异步消息

    http://blog.csdn.net/zhu_tianwei/article/details/40919031 实现使用Exchange类型为DirectExchange. routingkey的 ...

  2. 当使用junit4 对spring框架中controller/service/mapper各层进行测试时,需要添加的配置

    @RunWith(SpringJUnit4ClassRunner.class) @WebAppConfiguration @ContextConfiguration(locations = {&quo ...

  3. 《黑白团团队》第八次团队作业:Alpha冲刺 第一天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. [Alpha] Scrum meetin ...

  4. C#实现简单的串口通信

    前言 本着学习研究的态度,用c#语言实现简单的串口通信工具. 一.串口通信原理 串口通信 串口通信(Serial Communications)的概念非常简单,串口按位(bit)发送和接收字节.尽管比 ...

  5. “王者对战”之 MySQL 8 vs PostgreSQL 10

    既然 MySQL 8 和 PostgreSQL 10 已经发布了,现在是时候回顾一下这两大开源关系型数据库是如何彼此竞争的. 在这些版本之前,人们普遍认为,Postgres 在功能集表现更出色,也因其 ...

  6. [SQL]存储过程建表

    create PROC [dbo].CreateUserTable ( @name NVARCHAR(60) ) AS DECLARE @a NVARCHAR(max) SET @a='create ...

  7. 在MVC中使用泛型仓储模式和依赖注入实现增删查改

    标签: 原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository ...

  8. ClassNotFoundException和NoClassDefFoundError的差别

    正如它们的名字所说明的:NoClassDefFoundError是一个错误(Error),而ClassNOtFoundException是一个异常,在Java中错误和异常是有差别的,我们能够从异常中恢 ...

  9. Flex AsDoc 完整版

    Flex 生成AsDoc用的是SDK自带的asdoc.exe工具 生成AsDoc文档的方式有两种:ant或者FlashBuilder 外部配置工具 方法一:外部配置工具 新增一个外部配置工具.过程例如 ...

  10. 24岁菜鸟,能一个人撑起App开发吗

     "疲惫吾心.怎样躲藏.四处荒芜,怎话忧伤?"临近中秋,看到艾瑞斯的QQ签名,无尽的伤感.这个年仅24的青年.连续3年没有回家了,近期一个月总是失眠,没有家人的陪伴,就连女朋友 ...