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 recover deleted MySQL 8.0.17 root account and password under Windows
Recommend
In-depth understanding of Mysql transaction isolation level and locking mechanism issues
Overview Databases generally execute multiple tra...
Win10 configuration tomcat environment variables tutorial diagram
Before configuration, we need to do the following...
HTML table_Powernode Java Academy
To draw a table in HTML, use the table tag tr me...
Vue el-date-picker dynamic limit time range case detailed explanation
There are two situations 1. Start time and end ti...
How to quickly deploy Gitlab using Docker
1. Download the gitlab image docker pull gitlab/g...
React Fiber structure creation steps
Table of contents React Fiber Creation 1. Before ...
Detailed explanation of Nginx's rewrite module
The rewrite module is the ngx_http_rewrite_module...
MySQL database Load Data multiple uses
Table of contents Multiple uses of MySQL Load Dat...
Example code for drawing double arrows in CSS common styles
1. Multiple calls to single arrow Once a single a...
Specific use of Linux dirname command
01. Command Overview dirname - strip non-director...
Linux concurrent execution is simple, just do it this way
Concurrency Functions time for i in `grep server ...
JavaScript to achieve click image flip effect
I was recently working on a project about face co...
CSS3 analysis of the steps for making Douyin LOGO
"Tik Tok" is also very popular and is s...
A brief discussion on the principle of js QR code scanning login
Table of contents The essence of QR code login Un...
MySQL DML statement summary
DML operations refer to operations on table recor...