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 recover deleted MySQL 8.0.17 root account and password under Windows
Read-only and disabled attributes in forms 1. Rea...
Official Website https://cli.vuejs.org/en/guide/ ...
Table of contents 1. What is Docker Compose and h...
Preface Every good habit is a treasure. This arti...
Table of contents 1. Environment Introduction 2. ...
What problems does MySQL ROLE solve? If you are a...
This article uses examples to describe how to cre...
I learned a new trick today. I didn’t know it befo...
Shtml and asp are similar. In files named shtml, s...
Table of contents 1. DOM & BOM related 1. Che...
The main part of the page: <body> <ul id...
In Docker's design, a container runs only one...
Table of contents 1. Download 2. Install nginx an...
Table of contents Installation Prerequisites Step...
Use JavaScript to implement a web page clock. The...