js之innerHtml简易日历的实现
程序员文章站
2022-04-24 14:13:35
...
本文主要和大家分享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>
相关推荐：
以上就是js之innerHtml简易日历的实现的详细内容，更多请关注其它相关文章！