纯js简单日历实现代码
更新时间：2013年10月05日 10:01:38 投稿：whsnow
日历想必大家都比较熟悉吧，实现的方法有很多种，在本文大家将学会到如何使用js简单实现日历，感兴趣的朋友可以了解下
复制代码 代码如下:
<!doctype html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,ul,li,h2,p
{
margin:0px;
padding:0xp;
}
#div1
{
width:200px;
height:200px;
background:#ccc;
}
.calendar
{
width:240px;
height:345px;
background:#ccc;
margin:auto;
}
.calendar ul
{
list-style:none;
width:232px;
height:260px;
margin:0px;
padding:0px;
}
.calendar ul li
{
width:45px;
height:65px;
background:#333;
float:left;
display:inline;
margin-left:11px;
margin-top:10px;
border:1px solid #ccc;
text-align:center;
color:#FFF;
}
.calendar ul li:hover
{
border:1px solid #000;
}
.text
{
background:#F96;
margin:10px;
padding-bottom:10px;
height:45px;
}
.text h2
{
display:inline;
}
.active
{
background:#FFF !important;
color:#C03 !important;
}
</style>
<script type="text/javascript">
/* window.onload=function()
{
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function()
{
oDiv.innerHTML=oTxt.value;
}
}*/
window.onload=function()
var i=0;
for(i=0;i<aLi.length;i++) //for循环历遍li元素
{
aLi[i].index=i;
aLi[i].onmouseover =function() //添加鼠标指向事件
{
for(i=0;i<aLi.length;i++) //for循环历遍li元素去掉li样式
{
aLi[i].className ='';
}
this.className ='active'; //给当前标签添加active 样式
Otxt.innerHTML ='<h2>'+(this.index+1)+'</h2>'+'月'+'<p>'+aDats[this.index]+'</p>';
}
}
};
</script>
</head>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUM</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text">
</div>
</div>
</body>
</html>
效果预览：
相关文章
这篇文章主要介绍了JavaScript极简入门教程（二）：对象和函数,本文讲解了对象基础知识、函数基础知识、函数调用、异常、继承等内容,需要的朋友可以参考下2014-10-10
给网页加个彩色窗口...2006-07-07
本文主要对javascript中BOM基础知识进行总结。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
localStorage主要用来替代cookie，解决cookie(可参考cookie使用要点)读写困难、容量有限的问题，对js localstorage的使用相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了使用javascript实现类似超链接的效果的特效，通过示例熟悉javascript事件，这里推荐给大家。2014-12-12
Omar AL Zabir这位MVP总是喜欢搞些稀奇古怪同时又很实用的小东西，并且还十分值得参考。最近他就做了一个叫做ensure的小工具用于动态加载JavaScript、CSS与HTML，而且IE、Firefox、Opera、Safari都支持了，那么我们就来看看ensure是如何做到动态加载JavaScript与CSS的。2008-09-09
这篇文章主要介绍了JavaScript实现经典排序算法之冒泡排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
在前端开发中,HTTP 请求是与后端交互的重要方式,为了提高代码的可维护性、复用性以及用户体验,使用 Axios 拦截器是非常常见的做法,本文将详细介绍如何使用 Axios 的请求拦截器和响应拦截器,需要的朋友可以参考下2024-11-11
下面小编就为大家带来一篇用JS写的一个Ajax库(实例代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
听说这是一道腾讯的面试题,可能网上已经有不少答案了,晚上没事看到这道题就自己做了下,下面这篇文章主要给大家介绍了关于如何用Js写一个简单的五子棋小游戏的相关资料,需要的朋友可以参考下2022-07-07
最新评论