简易日历
来源：互联网 发布：数据分析师能力要求 编辑：程序博客网 时间：2024/05/16 09:07
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易日历</title>
<style>
*{margin: 0;padding: 0;}
#div1{width: 420px;height: 700px;margin:10px auto;background: #ccc;}
#div1 ul{list-style: none; margin: 0 auto;}
#div1 ul li{float: left;width: 100px; height: 100px;background: rgba(0,0,0,0.8);margin: 20px;color:#fff;}
#div1 ul li:hover{background: #fff;color: rgba(255,0,0,0.6);}
#div1 ul li h2{line-height: 60px;text-align: center;}
#div1 ul li p{text-align: center;font-size: 20px;}
#div1 #text{width:380px;height:110px;background: #fff;clear:both;margin: 10px auto;color: rgba(255,0,0,0.7);}
#div1 #text h2,#div1 #text p{text-align: center;margin-top:20px;}
</style>
<script>
window.onload=function(){
var array=["你好，一月","你好，二月","你好，三月","你好，四月","你好，五月","你好，六月","你好，七月","你好，八月","你好，九月","你好，十月","你好，十一月","你好，十二月"]
var oDiv1=document.getElementById('div1');
var oLi=oDiv1.getElementsByTagName('li');
var oDiv2=document.getElementById("text");
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onmouseover=function(){
oDiv2.innerHTML="<h2>"+(this.index+1)+"月</h2><p>"+array[this.index]+"</p>";
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li>
<h2>1</h2><p>Jan</p>
</li>
<li>
<h2>2</h2><p>Feb</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>July</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 id="text">
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易日历</title>
<style>
*{margin: 0;padding: 0;}
#div1{width: 420px;height: 700px;margin:10px auto;background: #ccc;}
#div1 ul{list-style: none; margin: 0 auto;}
#div1 ul li{float: left;width: 100px; height: 100px;background: rgba(0,0,0,0.8);margin: 20px;color:#fff;}
#div1 ul li:hover{background: #fff;color: rgba(255,0,0,0.6);}
#div1 ul li h2{line-height: 60px;text-align: center;}
#div1 ul li p{text-align: center;font-size: 20px;}
#div1 #text{width:380px;height:110px;background: #fff;clear:both;margin: 10px auto;color: rgba(255,0,0,0.7);}
#div1 #text h2,#div1 #text p{text-align: center;margin-top:20px;}
</style>
<script>
window.onload=function(){
var array=["你好，一月","你好，二月","你好，三月","你好，四月","你好，五月","你好，六月","你好，七月","你好，八月","你好，九月","你好，十月","你好，十一月","你好，十二月"]
var oDiv1=document.getElementById('div1');
var oLi=oDiv1.getElementsByTagName('li');
var oDiv2=document.getElementById("text");
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onmouseover=function(){
oDiv2.innerHTML="<h2>"+(this.index+1)+"月</h2><p>"+array[this.index]+"</p>";
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li>
<h2>1</h2><p>Jan</p>
</li>
<li>
<h2>2</h2><p>Feb</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>July</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 id="text">
</div>
</div>
</body>
</html>
0 0
- 简易日历
- 简易日历
- 简易日历
- 简易记事网页日历
- 一个简易日历代码
- java简易日历算法
- javascript简易日历
- 智能社简易日历
- 编写简易日历
- C#制作简易日历
- JS简易日历
- JS简易日历
- 简易日历 1
- 简易日历 2
- JS简易日历实现
- js简易日历
- JAVA打印简易版日历
- JS学习笔记：简易日历
- nodejs的一些问题理解
- UVa 10082 - WERTYU
- snmp编程特点小结
- 有喜有忧
- 不急不躁修硬盘
- 简易日历
- Cloudera CM5.3.1&CDH-5.3.0集群安装
- 三大顺序容器的简单使用与异同
- 安装spark
- emlog 搭建 config.php不可写
- JavaScript学习笔记-进阶篇
- 一个有趣的题目
- Android之手机震动效果实现
- 2015-1-31工作日志-王亮晶
