js之innerHtml简易日历的实现

来源：优察财经网

本文主要和大家分享js之innerHtml简易日历的实现，思路同选项卡差不多，希望能帮助到大家。

1、对于最下面文字的更改，可以使用数组，把他们的内容都放到一个数组中，然后使用字符串的拼接来实现
2、innerHtml是用来设置标签内的文字，而value是用来设置input中的文字值
3、对于字符串连接，为了不使数字和字母连在一起，可以使用括号括起来。即同数学中的加法的优先级一样

<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title>简易日历</title>
 </head>
 <style>
 #table ul{width: 200px;height:220px ;}
 #table li{float: left;width:50px;height:50px ;border: 1px solid blue;margin-right: 5px; list-style-type: none;text-align: center;margin-top: 5px;}
 #table .active{background-color: #0000FF;cursor: pointer;}
 #p1{width: 200px;height:150px;border:1px solid forestgreen ;text-align: center;margin-left: 20px;}
 </style>
 <script>
 window.onload=function(){
 var oText = [ '天气很好呀，要开心', '没有下雨，要开心', '每天要开心', '天气很好呀，要开心', '没有下雨，要开心', '每天要开心', '天气很好呀，要开心', '没有下雨，要开心', '每天要开心', '天气很好呀，要开心', '没有下雨，要开心', '每天要开心',
 ] var oTable = document.getElementById('table'); var oLi = oTable.getElementsByTagName('li'); var op1 = document.getElementById('p1'); for(var i=0;i<oLi.length;i++){
 oLi[i].index = i;
 oLi[i].onmousemove=function(){
 for(var i=0;i<oLi.length;i++){
 oLi[i].className='';
 } this.className='active';
 op1.innerHTML='<h2>'+(this.index+1)+'月</h2><p>'+oText[this.index] +'</p>';
 }
 }
 } </script>
 <body>
 <p id='table'>
 <ul>
 <li class="active"><h2>1</h2></li>
 <li><h2>2</h2></li>
 <li><h2>3</h2></li>
 <li><h2>4</h2></li>
 <li><h2>5</h2></li>
 <li><h2>6</h2></li>
 <li><h2>7</h2></li>
 <li><h2>8</h2></li>
 <li><h2>9</h2></li>
 <li><h2>10</h2></li>
 <li><h2>11</h2></li>
 <li><h2>12</h2></li>
 </ul>
 </p>
 <p id='p1'>
 <h2>一月</h2>
 <p>稻花香提醒您，七月值得关注的日子</p>
 </p>
 </body></html>