이 기사는 주로 js의 innerHtml에서 간단한 달력을 구현하는 방법을 공유합니다. 아이디어는 탭의 아이디어와 비슷합니다.
1. 하단 텍스트를 변경하려면 배열을 사용하고 해당 내용을 배열에 넣은 다음 문자열 연결을 사용하여 달성할 수 있습니다.
2. innerHtml을 사용하여 라벨에 텍스트를 설정하고 값을 지정합니다. 입력에 텍스트 값을 설정하는 데 사용됩니다.
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에 간단한 달력 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!