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
How to export and import .sql files under Linux command
This article describes how to export and import ....
Detailed tutorial on installing Nginx 1.16.0 under Linux
Because I have been tinkering with Linux recently...
Detailed examples of Linux disk device and LVM management commands
Preface In the Linux operating system, device fil...
Tutorial diagram of installing MySQL service through MySQL Installer under Windows
MYSQL officially provides an Installer method to ...
Two ways to create SSH server aliases in Linux
Preface If you frequently access many different r...
WeChat applet custom tabbar component
This article shares the specific code of the WeCh...
MySQL 8.0.18 installation tutorial under Windows (illustration)
Download Download address: https://dev.mysql.com/...
A brief discussion on the principle of React two-way data binding
Table of contents What is two-way data binding Im...
MySQL 5.7 JSON type usage details
JSON is a lightweight data exchange format that u...
Solution to the garbled problem of web pages when the encoding is set to utf-8
Recently, when I was writing web pages with PHP, I...
Differences in the hr separator between browsers
When making a web page, you sometimes use a dividi...
MySQL Oracle and SQL Server paging query example analysis
Recently, I have done a simple study on the data ...
Ajax solves cross-domain problem by setting CORS response header to achieve cross-domain case study
1. Set CORS response header to achieve cross-doma...
How to reset the password if the Ubuntu 18.04 server password is forgotten or tampered with
Recently, two accounts on the server were hacked ...
Several ways to run Python programs in the Linux background
1. The first method is to use the unhup command d...