純js簡單日歷實現(xiàn)代碼
更新時間：2013年10月05日 10:01:38 投稿：whsnow
日歷想必大家都比較熟悉吧，實現(xiàn)的方法有很多種，在本文大家將學會到如何使用js簡單實現(xiàn)日歷，感興趣的朋友可以了解下
復制代碼 代碼如下:
<!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循環(huán)歷遍li元素
{
aLi[i].index=i;
aLi[i].onmouseover =function() //添加鼠標指向事件
{
for(i=0;i<aLi.length;i++) //for循環(huán)歷遍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>
效果預覽：
相關(guān)文章
JavaScript極簡入門教程（二）：對象和函數(shù)
這篇文章主要介紹了JavaScript極簡入門教程（二）：對象和函數(shù),本文講解了對象基礎(chǔ)知識、函數(shù)基礎(chǔ)知識、函數(shù)調(diào)用、異常、繼承等內(nèi)容,需要的朋友可以參考下2014-10-10
給網(wǎng)頁加個彩色窗口...2006-07-07
javascript中BOM基礎(chǔ)知識總結(jié)
本文主要對javascript中BOM基礎(chǔ)知識進行總結(jié)。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
詳解JavaScript中l(wèi)ocalStorage使用要點
localStorage主要用來替代cookie，解決cookie(可參考cookie使用要點)讀寫困難、容量有限的問題，對js localstorage的使用相關(guān)知識感興趣的朋友一起學習吧2016-01-01
這篇文章主要介紹了使用javascript實現(xiàn)類似超鏈接的效果的特效，通過示例熟悉javascript事件，這里推薦給大家。2014-12-12
多瀏覽器兼容的動態(tài)加載 JavaScript 與 CSS
Omar AL Zabir這位MVP總是喜歡搞些稀奇古怪同時又很實用的小東西，并且還十分值得參考。最近他就做了一個叫做ensure的小工具用于動態(tài)加載JavaScript、CSS與HTML，而且IE、Firefox、Opera、Safari都支持了，那么我們就來看看ensure是如何做到動態(tài)加載JavaScript與CSS的。2008-09-09
JavaScript實現(xiàn)經(jīng)典排序算法之冒泡排序
這篇文章主要介紹了JavaScript實現(xiàn)經(jīng)典排序算法之冒泡排序，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
使用Axios攔截器優(yōu)化HTTP請求與響應的實踐案例
在前端開發(fā)中,HTTP 請求是與后端交互的重要方式,為了提高代碼的可維護性、復用性以及用戶體驗,使用 Axios 攔截器是非常常見的做法,本文將詳細介紹如何使用 Axios 的請求攔截器和響應攔截器,需要的朋友可以參考下2024-11-11
下面小編就為大家?guī)硪黄肑S寫的一個Ajax庫(實例代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
聽說這是一道騰訊的面試題,可能網(wǎng)上已經(jīng)有不少答案了,晚上沒事看到這道題就自己做了下,下面這篇文章主要給大家介紹了關(guān)于如何用Js寫一個簡單的五子棋小游戲的相關(guān)資料,需要的朋友可以參考下2022-07-07