带有二十四节气的简单日历效

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了带有二十四节气的日历效果。

感兴趣的朋友可以做一下参考,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#tabs {
border: 1px solid #ccc;
margin: 100px auto;
width: 340px;
text-align: center;
}
#tabs ul li {
list-style: none;
float: left;
width: 70px;
height: 65px;
border: 4px solid #588;
background-color: #222;
color: white;
line-height: 8px;
margin: 5px;
}
#tabs .active {
color: #c66;
background-color: #ffffff;
cursor: pointer;
}
.text {
clear: both;
margin: 10px 40px;
background-color: #eee;
padding: 2px;
}
</style>
<script>
window.onload = function() {
var arry = [ //定义数组
"一月小寒接大寒",
"二月立春雨水连",
"惊蛰春分在三月",
"清明谷雨四月天",
"五月立夏和小满",
"六月芒种夏至连",
"七月大暑和小暑",
"立秋处暑八月间",
"九月白露接秋分",
"寒露霜降十月天",
"立冬小雪十一月",
"大雪冬至迎新年"
];
var oDiv = document.getElementById("tabs");
var aLi = oDiv.getElementsByTagName("li");
var text = oDiv.getElementsByTagName("div")[0];
for (var index = 0; index < aLi.length; index++) {
aLi[index].index = index;
aLi[index].onmousemove = function () {
for (var index = 0; index < aLi.length; index++) {
aLi[index].className = "";
}
this.className = "active";
text.innerHTML = "<h2>" + (this.index + 1) + "月活动</h2><h4>" + arry[this.index] + "</h4>";
}
}
}
</script>
</head>
<body>
<div id="tabs" class="calender">
<ul>
<li class="active"><h2>1</h2><p>JAM</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>JUN</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>NOR</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text">
<h2>1月活动</h2>
<h4>一月小寒接大寒</h4>
</div>
</div>
</body>
</html>

上面的代码实现了我们的要求,更多内容可以参阅相关阅读。

相关阅读:

(1).document.getElementById()可以参阅document.getElementById()一章节。

(2).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。

(3).onmousemove事件可以参阅javascript mousemove事件一章节。

(4).className可以参阅js className一章节。

(5).innerHTML可以参阅innerHTML一章节。

带有二十四节气的简单日历效,这样的场景在实际项目中还是用的比较多的,关于带有二十四节气的简单日历效就介绍到这了。

带有二十四节气的简单日历效属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容