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& ...
随机推荐
- Sharding JDBC整合SpringBoot 2.x 和 MyBatis Plus 进行分库分表
Sharding JDBC整合SpringBoot 2.x 和 MyBatis Plus 进行分库分表 交易所流水表的单表数据量已经过亿,选用Sharding-JDBC进行分库分表.MyBatis-P ...
- 内存的堆分配和栈分配 & 字符数组，字符指针，Sizeof总结
堆和栈的区别 一个由C/C++编译的程序占用的内存分为以下几个部分1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈.2.堆区(heap ...
- 5-JVM常用的命令
JVM常用的命令 jps :基础工具 查看JAVA进程PID. jps 命令用来查看所有 Java 进程,每一行就是一个 Java 进程信息. jps 仅查找当前用户的 Java 进程,而不是当前系统 ...
- 初识JAVA（学习记录）
Java 1.1Java简介 Java是一种跨平台的,面向对象的程序设计语言.无论是电脑还是手机,到处都运行着JAVA开发的应用程序:JAVA程序可以在任何计算机.操作系统以及支持JAVA的硬件设备上 ...
- 运行web容器实例
- removebg抠图小工具
由于比较简单,直接上代码(removebg接口官网),更多小工具获取 (1)官网API,需注册获取X-Api-Key:removebg_官网api.py import requests respons ...
- Lowest Common Multiple Plus（hdu2028）
思考: 乘法爆咋数据.把int换成unsigned就过了,同时%d换成%u.求最大公约数和最小公倍数. #include<stdio.h> int gcd(unsigned x, unsi ...
- JPA EntityManager 在没有实体类的情况下返回Map
JPA entityManager.createNativeQuery()执行原生的SQL,当我们查询结果没有对应的实体类时,query.getResultList()返回的是一个List<Ob ...
- Angular SPA基于Ocelot API网关与IdentityServer4的身份认证与授权（三）
在前面两篇文章中,我介绍了基于IdentityServer4的一个Identity Service的实现,并且实现了一个Weather API和基于Ocelot的API网关,然后实现了通过Ocelot ...
- .net core HttpClient 使用之消息管道解析（二）
一.前言 前面分享了 .net core HttpClient 使用之掉坑解析(一),今天来分享自定义消息处理HttpMessageHandler和PrimaryHttpMessageHandler ...