原生js简易日历效果实现

这里我们将用原生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]

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

时间: 2024-10-06 15:59:57

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

js简易日历

js简易日历中设计的知识点:选项卡切换   数组    innerHTML  连接符 与选项卡的区别:div的个数不同 连接符中需要注意的:(优先级) "abc"+12+3+"def"               结果:abc123def "abc"+(12+3)+"def"            结果:abc15def html代码: <body> <div class="contain"

图片切换特效(1):原生JS图片切换效果

转自:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

原生JS实现分页效果1.0

不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ margin:20px 0; } #

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

一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

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

虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ m

原生js实现的效果

原生js实现tooltip提示框的效果 在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的特效,就有一种想要征服它的愿望. 比如这个tooltip的效果展示: 这个便是tooltip提示框的效果. 在Hbulider上的代码展示: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta

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

前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用.即在MyF

原生js显示分页效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js分页</title> <style type="text/css"> #pageNav { display: inline-block; } #pageNav a { display: inline-block; wi

原生js实现放大镜效果

放大镜效果主要涉及3个鼠标事件: 1.onmouseover,鼠标移入浮动小方块和显示放大的区域显示: 2.onmousemove,鼠标移动,小方块和放大区域一起移动: 3.onmouseout,鼠标移除小方块和放大区域消失. 其实放大镜效果最主要的是小方块与放大区域的比例及位置: <div id="small_box"> <div class="small_Pic"> <div id="float_box">