Home  >  Article  >  Web Front-end  >  A complete example of making a simple annual calendar with js_javascript skills

A complete example of making a simple annual calendar with js_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:17:372675browse

The example in this article describes how to make a simple annual calendar using js. Share it with everyone for your reference. The details are as follows:

Today I learned how to use js to create an annual calendar. I reviewed the usage of this by the way. It is a little different from the tab production. I used innerHTML for the new one. I hope I can stick to it and all the js masters can give me some advice.

Usage of innerHtml

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

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 div at the bottom;

2. Use of innerHTML

3. Use of arrays

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

② Use: arr[0]

4. String concatenation

① Function: Connect two strings “ ”

② Problem: Priority in connection Use () to solve

Implementation source code: ​

JavaScript:​​

Copy code The code is as follows:



CSS:





Copy code

The code is as follows:

HTML:

复制代码 代码如下:
 
 
   
     
           
  • 1

    一月

  •  
           
  • 2

    二月

  •  
           
  • 3

    三月

  •  
           
  • 4

    四月

  •  
           
  • 5

    五月

  •  
           
  • 6

    六月

  •  
           
  • 7

    七月

  •  
           
  • 8

    八月

  •  
           
  • 9

    九月

  •  
           
  • 10

    十月

  •  
           
  • 11

    十一月

  •  
           
  • 12

    十二月

  •  
       
 
   
 
   
 
         
 

效果图如下:

希望本文所述对大家的javascript程序设计有所帮助。

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