>  기사  >  웹 프론트엔드  >  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 가장 간단한 기본 캘린더

캘린더 구현 방법 공유

JS는 간단한 캘린더를 구현합니다

위 내용은 js의 innerHtml에 간단한 달력 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.