Maison > Article > interface Web > Code d'implémentation de calendrier simple Pure js

Code d'implémentation de calendrier simple Pure js

高洛峰original: 2017-02-06 10:49:421411parcourir

<!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(&#39;btn1&#39;); 
var oTxt=document.getElementById(&#39;txt1&#39;); 
var oDiv=document.getElementById(&#39;div1&#39;); 
oBtn.onclick=function() 
{ 
oDiv.innerHTML=oTxt.value; 
} 

}*/ 
window.onload=function() 
{ 
var aLi= document.getElementsByTagName(&#39;li&#39;); 
var Otxt =document.getElementById(&#39;tab&#39;).getElementsByTagName(&#39;div&#39;)[0]; 
var aDats =[&#39;元旦1月1日&#39;,&#39;2月14日情人节&#39;,&#39;3月3日全国爱耳日&#39;, 
&#39;4月1日愚人节&#39;,&#39;5月1日国际劳动节&#39;,&#39;6月1日 国际儿童节&#39;, 
&#39;7月1日中国共产党诞生日&#39;,&#39;8月1日中国人民解放军建军节&#39;,&#39;9月10日中国教师节&#39;, 
&#39;10月1日中华人民共和国国庆节&#39;,&#39;11月9日消防宣传日&#39;,&#39;12月3日世界残疾人日&#39; 
]; 

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 =&#39;&#39;; 
} 
this.className =&#39;active&#39;; //给当前标签添加active 样式 

Otxt.innerHTML =&#39;<h2>&#39;+(this.index+1)+&#39;</h2>&#39;+&#39;月&#39;+&#39;<p>&#39;+aDats[this.index]+&#39;</p>&#39;; 
} 

} 

}; 

</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>

Aperçu de l'effet :

Code dimplémentation de calendrier simple Pure js

Pour plus d'articles sur le code de mise en œuvre du calendrier simple js pur, veuillez faire attention au site Web PHP chinois !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js implémente le calendrier pour obtenir la date, le numéro de semaine et le jour spécifiés. Exemple de partage.Article suivant：js implémente le calendrier pour obtenir la date, le numéro de semaine et le jour spécifiés. Exemple de partage.

Articles Liés

Voir plus