Home > Article > Web Front-end > Detailed explanation of how to create a simple almanac using JS

Detailed explanation of how to create a simple almanac using JS

怪我咯Original: 2017-06-29 10:41:442173browse

This article mainly introduces the method of making a simple almanac with js, including the implementation ideas and the implementation skills of each part of js, css and html. Friends in need can refer to it

This article describes the js production with examples Simple almanac method. Share it with everyone for your reference. The details are as follows:

Today I learned how to use js to make an almanac. I reviewed the usage of this by the way. It is a little different from the tab production. I used innerHTML newly. I hope I can stick to it. Dear js masters Also give me lots of advice.

Usage of innerHtml

Now use top.innerHTML="........."; method to write to the location of this id Enter the HTML code.

For example, top.innerHTML=""; a button will appear at the corresponding position of top!

Program implementation ideas:

1. Similar to a tab, except there is a p at the bottom;

2. Use of innerHTML

3. Use of arrays

① Definition: arr[0,1,2,3]

② Use: arr[0]

4. characters String connection

① Function: Connect two strings “+”

② Problem: The priority in the connection is solved with ()

implementation Source code:

JavaScript:

The code is as follows:

<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:

The code is as follows:

<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：

The code is as follows:

<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>

The rendering is as follows:

The above is the detailed content of Detailed explanation of how to create a simple almanac using JS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jQuery.unload() functionNext article：Detailed explanation of jQuery.unload() function

See more

Detailed explanation of how to create a simple almanac using JS

Related articles