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& ...
随机推荐
- Mysql常用sql语句（19）- in / exists 子查询
测试必备的Mysql常用sql语句系列 https://www.cnblogs.com/poloyy/category/1683347.html 前言 子查询在我们查询方法中是比较常用的,通过子查询可 ...
- swagger集成遇到的坑一个
SpringBoot项目集成swagger项目遇到一个问题: 访问swagger-ui.html 没有加载到数据,也没有加载到页面的html和css资源 除了 1.添加swagger的pom依赖 2. ...
- 这么简单的ES索引生命周期管理，不了解一下吗～
对于日志或指标(metric)类时序性强的ES索引,因为数据量大,并且写入和查询大多都是近期时间内的数据.我们可以采用hot-warm-cold架构将索引数据切分成hot/warm/cold的索引.h ...
- Spark_Streaming整合Kafka
Spark Streaming 整合 Kafka 一.版本说明二.项目依赖三.整合Kafka 3.1 ConsumerRecord 3.2 生产者属性 3 ...
- vue-cli 2.x 搭建项目
一.vue-cli优势 1.成熟的vue项目架构设计 2.本地测试服务器 3.集成打包上线方案 二.系统要求 1.node.js 2. Git 3.node命令行终端 三.安装 1.安装vue-cli ...
- scrapy请求发送详解
scrapy自动发送请求 对start_urls列表中存储的起始url进行过请求的发送并没有通过手动实现,但是在parse函数中还是获取到了响应数据,这是因为爬虫文件中的爬虫类继承到了Spider父类 ...
- kubernetes flannel pod CrashLoopBackoff解决
背景 某环境客户部署了一个kubernetes集群,发现flannel的pod一直重启,始终处于CrashLoopBackOff状态. 排查 对于始终CrashLoopBackOff的pod,一般是应 ...
- [Asp.Net Core] Blazor Server Side 扩展用途 - 配合CEF来制作带浏览器核心的客户端软件 (二) 可运行版本
前言 大概3个星期之前立项, 要做一个 CEF+Blazor+WinForms 三合一到同一个进程的客户端模板. 这个东西在五一的时候做出了原型, 然后慢慢修正, 在5天之前就上传到github了. ...
- Spring @Autowired 注释
@Autowired 注释可以在 setter 方法中被用于自动连接 bean. 你可以在 XML 文件中的 setter 方法中使用 @Autowired 注释来除去 元素. 当 Spring遇到一 ...
- 处理TableVIew SectionHeader悬停问题
1,plain类型的tableview 才会悬停 grouped类型不会悬停 2,通过改变contentInset达到部分悬停遮罩的处理,对所有的Sectionheader都有效,不可以单独处理某 ...