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& ...
随机推荐
- Android fragment 使用replace并保存状态
Fragment的地位在开发中可是举足轻重的,掌握它的的生命周期以及使用特性是非常重要的,例如在开发中常使用的模板: 点击菜单,中心内容跟随菜单变化,但是在菜单间切换时,需要保存之前输入的信息或其他状 ...
- js使用经验--if...else简化
目的 在项目中,if else语句如果用得很多,特别是嵌套,代码不美观,阅读性不好.所以的话,用其他的方式简化替换if...else...就很有必要. 简化的作用就是赠人玫瑰,手留余香.对自己对项目对 ...
- DIV+CSS布局的优势和弊端
DIV+CSS的优势1.符合W3C标准.这保证您的网站不会因为将来网络应用的升级而被淘汰.2.对浏览者和浏览器更具亲和力.由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示 ...
- poj3308 最小点权覆盖
Paratroopers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8837 Accepted: 2663 Desc ...
- .Net基础之2——C#基础
1.注释符的作用 1).注销 2).解释 2.C#中的3种解释符 1).单行注释(//要注释的内容) //这行代码的作用是将hello world输出到控制台上 ...
- pyqt5_实例：修改xml文件中节点值
需求: 将类似如下xml文件的externalid节点值修改成不重复的值 实现该功能的代码Func.py: #coding=utf-8 ''' Created on 2019年10月15日 @auth ...
- U-Learning 后端开发日志(建设中...)
目录 U-Learning--基于泛在学习的教学系统 项目背景 技术栈 框架 中间件 插件 里程碑 CentOS 7搭建JAVA开发环境 接口参数校验(不使用hibernate-validator,规 ...
- 【Java】几种典型的内存溢出案例，都在这儿了！
写在前面 作为程序员,多多少少都会遇到一些内存溢出的场景,如果你还没遇到,说明你工作的年限可能比较短,或者你根本就是个假程序员!哈哈,开个玩笑.今天,我们就以Java代码的方式来列举几个典型的内存溢出 ...
- 【C#图解教程学习笔记】第13章 委托
13.1 什么是委托 委托是持有一个或多个方法的对象,可将一个方法传递到另一个方法. 委托是用户自定义的引用类型. 13.2 委托概述 类表示的是数据和方法的集合,而委托持有一个或多个方法,以及一系列 ...
- Java——线程安全的集合
线程安全的集合 java.util.concurrent包:ConcurrentHashMap,ConcurrentSkipListMap,ConcurrentSkipListSet,Concu ...