js简易日历innerHtml
2018-03-11 08:48
274 查看
注意事项：
思路同选项卡差不多，
1、对于最下面文字的更改，可以使用数组，把他们的内容都放到一个数组中，然后使用字符串的拼接来实现
2、innerHtml是用来设置标签内的文字，而value是用来设置input中的文字值
3、对于字符串连接，为了不使数字和字母连在一起，可以使用括号括起来。即同数学中的加法的优先级一样
思路同选项卡差不多，
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;}
#div1{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 oDiv1 = document.getElementById('div1');
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';
oDiv1.innerHTML='<h2>'+(this.index+1)+'月</h2><p>'+oText[this.index] +'</p>';
}
}
}
</script>
<body>
<div 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>
</div>
<div id='div1'>
<h2>一月</h2>
<p>稻花香提醒您，七月值得关注的日子</p>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐