JavaScript to achieve calendar effect

JavaScript to achieve calendar effect

This article shares the specific code for JavaScript to achieve the calendar effect for your reference. The specific content is as follows

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Make a calendar</title>
  <style>
   body{text-align:center;}
   .box{margin:0 auto;width:880px;}
   .title{background: #ccc;}
   table{height:200px;width:200px;font-size:12px;text-align:center;float:left;margin:10px;font-family:arial;}
  </style>
  <script src="calendar.js"></script>
  <script>
   var year = parseInt(prompt('Enter year:','2019'));//Make a pop-up window document.write(calendar(year));//Call function to generate a calendar for the specified year</script>
 </head>
 <body>
 </body>
</html>

calendar.js

function calendar(y){
 //Get the day of the week on January 1 of the specified year var w = new Date(y,0).getDay();
 var html = '<div class="box">';
 
 //Concatenate the tables for each month for(m=1;m<=12;m++){
  html += '<table>';
  html += '<tr class="title"><th colspan="7">' + y + 'year' + m+' month</th></tr>';
  html += '<tr><td>Sun</td><td>Mon</td><td>Tuesday</td><td>Wed</td><td>Thurs</td><td>Fri</td><td>Saturday</td></tr>'
  
  //Get the total number of days in each month var max = new Date(y,m,0).getDate();
  
  html += '<tr>'; // start <tr> tag for (d=1;d<=max;d++){
   if(w && d== 1){//If the first day of the month is not Sunday, fill in blanks html += '<td colspan ="' + w + '"> </td>';
   }
   html += '<td>' +d+ '</td>';
   if(w == 6 && d != max){//If Saturday is not the last day of the month, wrap html += '</tr><tr>';
   }else if(d==max){//The last day of the month, close the </tr> tag html += '</tr>';
   }
   w = (w+1>6) ? 0 : w+1;
  }
  html += '</table>';
 }
 html += '</div>';
 return html;
}

Effect

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • How to create a perpetual calendar using JS
  • JS makes a calendar with tab switching
  • js to create a complete example of a simple calendar

<<:  Problems encountered when installing mysql-8.0.19-winx64: Can't create directory 'xxxx\Database\'

>>:  How to recover deleted MySQL 8.0.17 root account and password under Windows

Recommend

How to hide and remove scroll bars in HTML

1. HTML tags with attributes XML/HTML CodeCopy co...

Linux system file sharing samba configuration tutorial

Table of contents Uninstall and install samba Cre...

Detailed explanation of this reference and custom properties in JavaScript

Table of contents 1. this keyword 2. Custom attri...

Example code of CSS layout at both ends (using parent's negative margin)

Recently, during the development process, I encou...

Example of how to implement embedded table with vue+elementUI

During my internship in my senior year, I encount...

Detailed explanation of the benefits of PNG in various network image formats

BMP is an image file format that is independent o...

The final solution to Chrome's minimum font size limit of 12px

I believe that many users who make websites will ...

Detailed explanation of MySQL trigger trigger example

Table of contents What is a trigger Create a trig...

How to use the dig/nslookup command to view DNS resolution steps

dig - DNS lookup utility When a domain name acces...

Vue gets token to implement token login sample code

The idea of ​​using token for login verification ...

20 JavaScript tips to help you improve development efficiency

Table of contents 1. Declare and initialize array...

How to connect JDBC to MySQL 5.7

1. First prepare the MySQL and Eclipse environmen...

Detailed description of shallow copy and deep copy in js

Table of contents 1. js memory 2. Assignment 3. S...

MySQL startup error InnoDB: Unable to lock/ibdata1 error

An error message appears when MySQL is started in...