집 > 기사 > 웹 프론트엔드 > js의 innerHtml에 간단한 달력 구현

js의 innerHtml에 간단한 달력 구현

小云云원래의: 2018-03-12 16:42:361445검색

이 기사는 주로 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 = [            &#39;天气很好呀，要开心&#39;,            &#39;没有下雨，要开心&#39;,            &#39;每天要开心&#39;,            &#39;天气很好呀，要开心&#39;,            &#39;没有下雨，要开心&#39;,            &#39;每天要开心&#39;,            &#39;天气很好呀，要开心&#39;,            &#39;没有下雨，要开心&#39;,            &#39;每天要开心&#39;,            &#39;天气很好呀，要开心&#39;,            &#39;没有下雨，要开心&#39;,            &#39;每天要开心&#39;,
            ]            var oTable = document.getElementById(&#39;table&#39;);            var oLi = oTable.getElementsByTagName(&#39;li&#39;);            var op1 = document.getElementById(&#39;p1&#39;);            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=&#39;&#39;;
                    }                    this.className=&#39;active&#39;;
                    op1.innerHTML=&#39;<h2>&#39;+(this.index+1)+&#39;月</h2><p>&#39;+oText[this.index] +&#39;</p>&#39;;
                }
            }
        }    </script>
    <body>
        <p id=&#39;table&#39;>
            <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=&#39;p1&#39;>
            <h2>一月</h2>
            <p>稻花香提醒您，七月值得关注的日子</p>
        </p>
    </body></html>

js의 innerHtml에 간단한 달력 구현

관련 기사