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
CentOS 7 method to modify the gateway and configure the IP example
When installing the centos7 version, choose to co...
Detailed description of shallow copy and deep copy in js
Table of contents 1. js memory 2. Assignment 3. S...
How to expand the capacity of VirtualBox's virtual disk vdi file (graphic tutorial)
Find the installation directory of VirtualBox. Th...
Perfect solution to Google Chrome autofill problem
In Google Chrome, after successful login, Google ...
MySQL 5.5.56 installation-free version configuration method
The configuration method of MySQL 5.5.56 free ins...
Drawing fireworks effect of 2021 based on JS with source code download
This work uses the knowledge of front-end develop...
Windows Server 2016 Standard Key activation key serial number
I would like to share the Windows Server 2016 act...
Nginx configuration to achieve multiple server load balancing
Nginx load balancing server: IP: 192.168.0.4 (Ngi...
How to elegantly back up MySQL account information
Preface: I recently encountered the problem of in...
Tutorial diagram of installing zabbix2.4 under centos6.5
The fixed IP address of the centos-DVD1 version s...
Detailed explanation of the order of JS object traversal
Some of you may have heard that the order of trav...
Implementation of Nginx load balancing cluster
(1) Experimental environment youxi1 192.168.5.101...
Native JS to implement the aircraft war game
This article example shares the specific code of ...
Detailed tutorial on building a JMeter+Grafana+Influxdb monitoring platform with Docker
We all know that Jmeter provides native result vi...
Query process and optimization method of (JOIN/ORDER BY) statement in MySQL
The EXPLAIN statement is introduced in MySQL quer...