JS를 사용하여 간단한 책력을 만드는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

JS를 사용하여 간단한 책력을 만드는 방법에 대한 자세한 설명

怪我咯

풀어 주다： 2017-06-29 10:41:44

원래의

2122명이 탐색했습니다.

이 글은 js로 간단한 연감을 만드는 방법을 주로 소개하는데, js, css, html 각 부분의 구현 아이디어와 구현 스킬이 필요하신 분들은 참고하시면 됩니다

이 글의 예시를 통해 방법을 알려드립니다. js로 간단한 연감을 만드는 것입니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

오늘은 js를 사용하여 연감을 만드는 방법을 배웠습니다. 또한 탭 제작과 조금 다른 내용을 검토했습니다. 모든 js 마스터가 나에게 조언을 해줄 수 있기를 바랍니다.

innerHtml 사용

이제 top.innerHTML="..." 메소드를 사용하여 이 ID의 위치에 HTML 코드를 작성합니다.

예를 들어 top.innerHTML=""를 사용하면 상단의 해당 위치에 버튼이 표시됩니다!

프로그램 구현 아이디어:

1. 하단에 p가 있다는 점을 제외하면 탭과 유사합니다.

2. innerHTML 사용

1 정의: arr[0,1, 2,3 ]

② 사용: arr[0]

문자열 연결

① 기능: 두 개의 문자열 “+” 연결

② 문제: 연결의 우선순위는 ()

로 해결됩니다. 구현 소스 코드:

JavaScript:

코드는 다음과 같습니다.

<script type="text/javascript">  
    window.onload=function()  
    {  
        var arr=[  
                 &#39;快过年了，大家一起去放鞭炮咯！&#39;,  
                  &#39;马上上学了，不开心！&#39;,  
                   &#39;妇女节快乐！&#39;,  
                   &#39;很平淡的四月&#39;,  
                   &#39;劳动光荣！&#39;,  
                   &#39;儿童节快乐！&#39;,  
                   &#39;好热的七月!&#39;,  
                   &#39;八一建军节!&#39;,  
                   &#39;又开学了哎！&#39;  
        ];  
        var op=document.getElementById(&#39;tab&#39;);  
        var oLi=op.
getElementsByTagName
(&#39;li&#39;);  
        var oTxt=op.getElementsByTagName(&#39;p&#39;)[0];  
        var i=0;  
        for(var i=0;i<oLi.length;i++)  
        {  
            oLi[i].index=i;  
            oLi[i].onmouseover=function ()  
            {  
                 for(var i=0;i<oLi.length;i++)  
                 {  
                   
                    oLi[i].className=&#39;&#39;;  
                   
                 }  
              
                this.className=&#39;active&#39;;  
                oTxt.innerHTML=&#39;<h2>&#39;+(this.index+1)+&#39;月活动</h2><p>&#39;+arr[this.index]+&#39;</p>&#39;;  
            };  
          
        }  
      
    };  
</script>

로그인 후 복사

CSS:

코드는 다음과 같습니다.

<style type="text/css">  
* { padding: 0;margin: 0; }  
  
li { list-style: none; }  
  
body { background: #f6f9fc; 
font-family
: arial; }  
  
.calendar { width: 210px;  
            margin: 50px auto 0;   
            padding: 10px 10px 20px 20px;   
            background: #eae9e9; }  
              
.calendar ul { width: 210px;   
               overflow: hidden;   
               
padding-bottom
: 10px; }  
                 
.calendar li { float: left;  
               width: 58px;   
               height: 54px;   
               margin: 10px 10px 0 0;   
               border: 1px solid #fff;   
               background: #424242;  
               color: #fff;   
               text-align: center;   
               cursor: pointer; }  
                 
.calendar li h2 { font-size: 20px; padding-top: 5px; }  
  
.calendar li p { font-size: 14px; }  
  
.calendar .active { border: 1px solid #424242;  
                    background: #fff;  
                    color: #e84a7e; }  
                      
.calendar .active h2 { }  
  
.calendar .active p { font-weight: bold; }  
  
.calendar .text { width: 178px;   
                  padding: 0 10px 10px;  
                  border: 1px solid #fff;   
                  padding-top: 10px;   
                  background: #f1f1f1;   
                  color: #555; }  
                    
.calendar .text h2 {font-size: 14px; 
margin-bottom
: 10px; }  
  
.calendar .text p { font-size: 12px; 
line-height
: 18px; }  
</style>

로그인 후 복사

HTML:

코드는 다음과 같습니다.

<body>  
<p id="tab" class="calendar">  
    <ul>  
        <li class="active"><h2>1</h2><p>一月</p></li>  
        <li><h2>2</h2><p>二月</p></li>  
        <li><h2>3</h2><p>三月</p></li>  
        <li><h2>4</h2><p>四月</p></li>  
        <li><h2>5</h2><p>五月</p></li>  
        <li><h2>6</h2><p>六月</p></li>  
        <li><h2>7</h2><p>七月</p></li>  
        <li><h2>8</h2><p>八月</p></li>  
        <li><h2>9</h2><p>九月</p></li>  
        <li><h2>10</h2><p>十月</p></li>  
        <li><h2>11</h2><p>十一月</p></li>  
        <li><h2>12</h2><p>十二月</p></li>  
    </ul>  
    <p class="text">  
    </p>  
          
</p>  
</body>

로그인 후 복사

효과 사진은 다음과 같습니다.

위 내용은 JS를 사용하여 간단한 책력을 만드는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!