JS学习笔记：简易日历

来源：互联网发布：见见软件编辑：程序博客网时间：2024/05/17 09:28

本节课学习了：

1、数组arr[1,2,3]；

2、innerHTML；

3、字符串；

<!DOCTYPE Html><html lang="zh-cn"><meta charset="utf8" /><head><style type="text/css">body{font-size: 14px;font-family: Microsoft Yahei;}ul,li{list-style: none;float:left;}h2,p{padding:0;margin:0;}h2{display:inline-block;}#tab{width:400px;height:420px;border:1px solid #ddd;padding:10px;}#tab ul li{background:#545454;color:#fff;width:60px;height:60px;margin:10px;text-align:center;padding-top:5px;}#tab ul li p{color:#fff;}#tab ul li.active{background:orange;}#tab .text{background:#f6f6f6;padding:5px;border:1px solid #ddd;}</style><script type="text/javascript">window.onload=function(){var arr = ['小寒，大寒','立春，雨水','惊蛰，春分',        '清明，谷雨',        '立夏，小满',        '芒种，夏至',        '小暑，大暑',        '立秋，处暑',        '白露，秋分',        '寒露，霜降',        '立冬，小雪',        '大雪，冬至'];var oDiv = document.getElementById('tab');var aLi = oDiv.getElementsByTagName('li');var oTxt = oDiv.getElementsByTagName('div')[0];for (var i = 0; i<aLi.length; i++) {   //选择所有LIaLi[i].index=i;aLi[i].onmouseover=function(){for(var i=0;i<aLi.length;i++){                  aLi[i].className='';                 }                 this.className='active';     //当前LI                 oTxt.innerHTML='<h2>'+(this.index+1)+'</h2>月节气<p>'+arr[this.index]+'</p>';};}};</script></head><body><div id="tab"><ul><li class="active"><h2>1</h2><p>FEB</p></li><li><h2>2</h2><p>MAR</p></li><li><h2>3</h2><p>APR</p></li><li><h2>4</h2><p>MAY</p></li><li><h2>5</h2><p>JUN</p></li><li><h2>6</h2><p>JUL</p></li><li><h2>7</h2><p>AUG</p></li><li><h2>8</h2><p>SET</p></li><li><h2>9</h2><p>OCG</p></li><li><h2>10</h2><p>NOV</p></li><li><h2>11</h2><p>DEC</p></li><li><h2>12</h2><p>JAN</p></li></ul><div class="text"><h2>1月</h2><p>TEST</p></div></div></body></html>

0 0