网站首页 > 技术文章正文

手撕代码--JavaScript实现年历（手撕代码什么意思）

nanyue 2024-09-21 20:03:50 技术文章 6 ℃

效果图：

方案描述：

利用prompt()函数接收用户设置的年份。
编写calendar()函数，根据指定的年份生成年历。
设计并输出日历的显示样式。

开发工具：Hbuilder X（html + javasc）

代码（html文件）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>制作年历</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>		
		function calendar(y) {
			var html = '<div class = "box">';
			// week day of 2020-1-1?
			var w = new Date(y,0).getDay();
			console.log("w is: " + w);
			
			for (var m = 1; m <= 12; ++m) {
				html += '<table>' ;
				// 2 lines --table head
				html += '<tr class = "title"> <th colspan = "7">' + y + ' year ' + m + ' month </th> </tr>'; 
				html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';
				
				var maxDay = new Date(y,m,0).getDate();
				
				html += '<tr>'
				// print each week of current month
				for (var d = 1; d <= maxDay; d++) {
					if(w && d == 1) {
						html += '<td colspan = "' + w + '"> </td>';					
					} 
					
					html += '<td>' + d + '</td>';
					if (w == 6 && d != maxDay) {
						html += '</tr><tr>';
					} else if(d == maxDay) {
						html += '</tr>';
					}
					
					w = ((w+1) > 6 ? 0 : (w+1));
				}
				html += '</table>';
			}
			html +='</div>';
			return html;
		}
		
      var year = parseInt(prompt('输入年份：', '2020'));
      document.write(calendar(year));
    </script>
  </head>
  <body></body>
</html>

上一篇： Three.JS教程1环境搭建、场景与相机
下一篇：解读 CSS 布局之水平垂直居中（css设置水平垂直居中）

网站首页 > 技术文章 正文

手撕代码--JavaScript实现年历（手撕代码什么意思）

猜你喜欢

网站首页 > 技术文章正文