javascript制作万年历

万年历的制作
js代码块
注意’引号里面的html标签不能有多余的空格，否则程序会报错’

var year = prompt("请输入年份：");
var content = document.getElementById("content");
var html = '';
for (let i = 0; i < 12; i++) {html += '<table class="table">';html += '<tr class="title"> <th colspan = "7" >' + year + '年' + (i + 1) + ' 月份 </th> </tr> ';html += '  <tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'var days = new Date(year, i + 1, 0).getDate();var count = new Date(year, i).getDay();console.log((i + 1) + "月份天数：" + days);console.log("1日是星期：" + count);var line;if ((count + days) % 7 == 0) {line = parseInt((count + days) / 7);} else {line = parseInt((count + days) / 7) + 1;}var day = 1;for (let j = 0; j < line; j++) {html += '<tr>';for (let k = 0; k < 7; k++) {if (j == 0 && k < count) {html += '<td></td>';} else {if (day > days) {break;}html += '<td>' + day++ + '</td>';}}html += '</tr>'}html += '</table>'
}
content.innerHTML = html;

html代码部分，引入上面的js部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>w万年历的制作</title><style>body {text-align: center;}.box {margin: 0 auto;width: 880px;}.title {background-color: #ccc;}.table {float: left;margin: 10px;width: 200px;height: 200px;text-align: center;font-size: 14px;}</style>
</head><body><div id="content" class="box"></div>
</body>
<script src="万年历制作.js"></script></html>

运行结果图

javascript制作万年历相关推荐

用JavaScript 制作多彩的弹出式说明窗口
用JavaScript 制作多彩的弹出式说明窗口在设计网站的时候,在网站有重大的变动,或者需要作什么声明的时候,我们就要用到弹出窗口,这时只要我们一进入这个页面,就会弹出一个窗口,其实要制作这样的弹 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
js操作设置css动画,使用 CSS3 和 JavaScript 制作链接反转 3D 动画 - 文章教程
使用 CSS3 和 JavaScript 制作链接反转 3D 动画,CSS 和 JavaScript 技巧用来创建顶层的悬浮效果,使用 transfomr-origin 和 transform-sty ...
php制作万年历的步骤_PHP制作万年历
本文主要介绍了使用PHP制作万年历的方法以及实现此功能的几个要点并提供了全部源代码,这里推荐给小伙伴们使用PHP实现万年历功能的要点: 得到当前要处理的月份总共有多少天$days 得到当前要处理的月 ...
python制作万年历
最近进行python基础培训,课下作业制作万年历,之前没做过,感觉里面还是有很多需要学的.所谓万年历,就是咱们电脑或者手机的日期会记录每个月每天对应星期几.用python来制作万年历,就是从键盘输入年 ...
JavaScript制作动画
JavaScript制作动画 <!DOCTYPE html> <html> <style> #container {width: 400px;height: 400 ...
怎么使用javascript制作图片切换
** 怎么使用javascript制作图片切换 ** 轮播图在网页中是一个不可少的存在,其实只做起来还是相对而言还是比较简单的,来看看是怎么制作的. 这里是css的代码: #imgInfo,.clic ...
JavaScript制作的时钟
JavaScript制作的时钟分享一个自己制作的时钟.算是低级版的吧,秒钟分钟时钟都是可以获取到时间,根据时间来动的.是动态的. 效果图如下: 制作之前肯定要先把钟的各个部件画出来,然后加上样式,最 ...
javascript制作钟表
JAVAscript制作钟表本文用js制作一款简单的钟表练习代码如下欢迎大家交流,欢迎各位大佬指正. HTML部分 //创建钟表 <body> <div class=" ...

javascript制作万年历

javascript制作万年历相关推荐

最新文章

热门文章