suchen

Heim >Web-Frontend >js-Tutorial >Reiner js einfacher Kalenderimplementierungscode

Reiner js einfacher Kalenderimplementierungscode

高洛峰
高洛峰Original
2017-02-06 10:49:421438Durchsuche

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

Effektvorschau:

Reiner js einfacher Kalenderimplementierungscode

Weitere Artikel zum reinen js-Einfachkalender-Implementierungscode finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js implementiert den Kalender, um das angegebene Datum, die Wochennummer und den Wochentag zu erhalten. BeispielfreigabeNächster Artikel：js implementiert den Kalender, um das angegebene Datum, die Wochennummer und den Wochentag zu erhalten. Beispielfreigabe

In Verbindung stehende Artikel

Mehr sehen