Javascript实现万年历（日历表）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.main {
width: 800px;
margin: 0 auto;
}
.top {
width: 800px;
margin: 0 auto;
}
#nian {
width: 100px;
height: 30px;
display: block;
}
#yue {
width: 100px;
height: 30px;
display: block;
}
.float {
display: block;
width: 50px;
}
.center {
margin: 0 auto;
width: 800px;
}
#tab tr {
height: 150px;
}
#tab tr td,
th {
width: 150px;
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<select id="nian" class="float" onchange="huan()">
</select>
<span class="float">年</span>
<select id="yue" class="float" onchange="huan()">
</select>
<span class="float">月</span>
</div>
</div>
<div class="center">
<table id="tab" border="" cellspacing="" cellpadding="">
<tr>
<th>周日</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
</tr>
</table>
</div>
<script type="text/javascript">
var tab = document.getElementById("tab");
window.onload = function() {
var nian = document.getElementById("nian");
var yue = document.getElementById("yue");
for (var i = 2019; i >= 1970; i--) {
var sel = document.createElement("option");
sel.value = i;
sel.innerText = i;
nian.appendChild(sel);
}
for (var i = 1; i <= 12; i++) {
var sel = document.createElement("option");
sel.value = i;
sel.innerText = i;
yue.appendChild(sel);
}
huan();
}
function huan() {
var week = 0;//周几
var day = 1;//从第一天开始
var days = 30;//这个月一共有几天
// try{
// var ziji=document.getElementsByTagName("td")[0];
// ziji.parentElement.parentElement.removeChild(ziji.parentElement);
// }catch(e){
// //TODO handle the exception
// }
try{
//添加一个add1的类，方便删除
var dataa=document.getElementsByClassName("add1");
for(var i=0;i<dataa.length;){
dataa[0].remove();
}
}catch(e){
//TODO handle the exception
}
var nian = document.getElementById("nian").value;
var yue = document.getElementById("yue").value;
var date = new Date(nian + "-" + yue + "-1");
//计算这个月有多少天
var data = new Date(nian,yue,0);
days=data.getDate();
// alert(days)
var newtr = document.createElement("tr");
newtr.classList.add("add1");
for (var i = 0; i < date.getDay(); i++) {
if (week == 7) {
week = 0;
}
var newtd = document.createElement("td");
newtr.appendChild(newtd);
week++;
}
if (week <= 6) {
for (; week <= 6; week++, day++) {
var newtd = document.createElement("td");
newtd.innerText = day;
newtd.value = day;
newtr.appendChild(newtd);
}
}
tab.appendChild(newtr);
week = 0;
newtr = document.createElement("tr");
newtr.classList.add("add1");
for (; day <= days; day++, week++) {
if (week == 7) {
week = 0;
tab.appendChild(newtr);
newtr = document.createElement("tr");
newtr.classList.add("add1");
}
var newtd = document.createElement("td");
newtd.innerText = day;
newtd.value = day;
newtr.appendChild(newtd);
}
tab.appendChild(newtr);
}
</script>
</body>
</html>
Javascript实现万年历（日历表）的更多相关文章
- Java万年历，输入年月获取该年月日历表
//输入年份和月份,打印出这个月的日历表 /* 1.1900年1月1日是星期一 2.计算输入的年份距离1900年有多少天再计算当年1月1日距这个月有多少天 1) 3.总天数%7得出从星期几开始 注:计 ...
- php万年历
最近学习php循环.日期显示.GET方式请求,进而实现了一个小程序. 直接上代码: <?php header("Content-type:text/html; charset=UTF- ...
- Javascript学习笔记1 javascript的特点
..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正 ...
- （转载）javascript经典例子
(转载)http://www.blogjava.net/hadeslee/archive/2007/11/24/161778.html 一.验证类1.数字验证内1.1 整数1.2 大于0的整数 (用于 ...
- js万年历，麻雀虽小五脏俱全，由原生js编写
对于前端来说,我们可能见到最多的就是各种各样的框架,各种各样的插件了,有各种各样的功能,比如轮播啊,日历啊,给我们提供了很大的方便,但是呢?我们在用别人这些写好的插件,框架的时候,有没有试着问一问自己 ...
- 万年历(hao123)代码
网上有很多类似的代码,比如网站:hao123,IP138.日梭万年历网络版 等等,不过日梭万年历相对比较详细,也可以看看另外一篇文章的介绍: 日梭万年历网络版:http://www.cnblogs.c ...
- javascript时钟代码 DEMO-002
转载自:http://www.cnblogs.com/Mygirl/archive/2012/03/30/2425832.html 正常时间显示 复制代码 <SCRIPT language=ja ...
- javascript实用例子
js学习笔记,别错过!很有用的. /////////////////////////////////////////////////////////////////////////////////// ...
- js中的经典案例--简易万年历
js中的经典案例--简易万年历 html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
随机推荐
- [linux] VNC the connection was refused by the computer
在用VNC 连接host的时候发现“”“the connection was refused by the computer ” 方法:发现登录这个host,敲打:verser 的时候出现了这个: 它 ...
- 求二叉树的高度 递归&非递归实现
/** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * Tre ...
- 从`ArrayList`中了解Java的迭代器
目录 什么是迭代器 迭代器的设计意义 ArrayList对迭代器的实现 增强for循环和迭代器 参考链接 什么是迭代器 Java中的迭代器--Iterator是一个位于java.util包下的接口,这 ...
- C：习题1
C 语言具有哪些主要特点? 1.兼高级语言和汇编语言优点的语言 2.一种结构化程序设计语言 3.语言数据类型丰富 4.具有种类丰富的运算符 5.有预处理功能 C 语言的主要用途是什么? 1.作为一种系 ...
- wepy+vant-weapp踩坑记
最近用了几个月的wepy框架,碰到了挺多问题,这里总结一下 1.clone的代码无法再本地运行,wepy报错 解决方案: 执行命令 : `npm install wepy-cli@1.6.1-alph ...
- 2.6 Golang命令
在命令行执行go命令查看相关的Go语言命令: Go is a tool for managing Go source code. Usage: go command [arguments] The c ...
- linux常用命令---文件软硬链接
文件链接
- jsp 循环数字
<c:forEach var ="i" begin="1" end="${homeexamque.optionNum}" step=& ...
- nodejs+express搭建小程序后台服务器
本文使用node.js和express来为小程序搭建服务器.node.js简单说是运行在服务端的javascript:而express是node.js的一个Web应用框架,使用express可以非常简 ...
- Linux 下三种提高工作效率的文件处理技巧
Linux 下三种提高工作效率的文件处理技巧 在 Linux 下工作,打交道最多的就是文件了,毕竟 Linux 下工作一切皆文件嘛.Linux 也为大家提供了多种用于处理文件的命令,合理使用这些命令可 ...