这里我们将用原生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. Jquery中拿到相同的对应的所有的标签

    在Jquery中相同的ID号不能用$()获得,即使是$().each()也不能获得所有的ID相同的元素,只能获得第一个匹配的元素. 比如: 以上4个div,如果用$("#jevoly&quo ...

  2. 【udacity】机器学习-决策树

    Evernote Export 1.监督学习 我们向系统中输出样本,并且告诉系统样本标签(target),系统用我们给出的不同样本的成功与失败的信息,构建它对成功或失败的因素的理解. 2.分类与回归之 ...

  3. 在虚拟机安装Oracle,在本地电脑上运行sql develer出现ora-12514

    问题是解决了,先描述一下,本人用的虚拟机系统是server 2003 1.打开虚拟机,然后不管了 2.打开本地的sql developer,登录,出现了一个小白框:ora-12514:listener ...

  4. mysql新建用户,修改权限

    (1)登录:mysql -u root -p (2)查看现有用户(mysql8.0.1) mysql> select host,user,authentication_string from m ...

  5. ubuntu系统自动配置开机启动脚本

    以前一直搞的centos配置开机启动脚本,但是相同方法用在ubuntu系统上就不管用了,非常伤脑筋. 非常感谢  https://www.linuxidc.com/Linux/2017-09/1471 ...

  6. Context - React跨组件访问数据的利器

    Context提供了一种跨组件访问数据的方法.它无需在组件树间逐层传递属性,也可以方便的访问其他组件的数据 在经典的React应用中,数据是父组件通过props向子组件传递的.但是在某些特定场合,有些 ...

  7. ubuntu的安装

    前言 对计算机的学习来说,使用Linux系统是有好处的,Windows是商业的,无法学习操作系统的内在东西,所以选择折腾Linux. 我选择了ubuntu作为学习系统,Linux发行版没有什么最好之说 ...

  8. 最快理解 - IO多路复用:select / poll / epoll 的区别.

    目录 第一个解决方案(多线程) 第二个解决方案(select) 第三个解决方案(poll) 最终解决方案(epoll) 客栈遇到的问题 从开始学习编程后,我就想开一个 Hello World 餐厅,由 ...

  9. 利用Tensorflow实现手写字符识别

    模式识别领域应用机器学习的场景非常多,手写识别就是其中一种,最简单的数字识别是一个多类分类问题,我们借这个多类分类问题来介绍一下google最新开源的tensorflow框架,后面深度学习的内容都会基 ...

  10. echarts在vue里面使用,以及基础配置。

    基础的图表和基础的配置. 效果图如下: 1.安装图表依赖包:npm install echarts 2.在main.js里面 引入echarts import echarts from 'echart ...