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& ...
随机推荐
- hive经典练习题
一.建表和加载数据 1.student表 create table if not exists student(s_id int,s_name string,s_birth string,s_sex ...
- 错误 在应用程序级别之外使用注册为 allowDefinition='MachineToApplic
错误 在应用程序级别之外使用注册为 allowDefinition='MachineToApplication' 的节是错误的.如果在 IIS 中没有将虚拟目录配置为应用程序,则可能导致此错误. 如果 ...
- sql查重去除id最小值
select order_id FROM yzj_store_order t WHERE (t.user_id,t.order_status) IN ( SELECT user_id,order_st ...
- Xshell 与 Xftp 的安装与使用
我们在日常工作中,不管是系统管理员.程序员.还是技术工程师,如果想登陆到 Linux 服务器,不可能总是跑到机房去工作,通常我们需要一个工具帮我们去做远程连接,这样我们只需要用笔记本电脑就可以连接到服 ...
- 00001- layui 表格的默认工具栏添加自定义按钮
首先定义table: var tableIns = table.render({ elem:'#businessUserListTable' ,url: ctx+'/business/business ...
- windows假死原因调查
0. 现象 windows假死了,键盘功能正常,就是画面卡住不动了. 1. 看log linux下面很容易通过命令dmesg和/var/log/message来看日志. 但是windows就懵逼了,不 ...
- Tensorflow从0到1（一）之如何安装Tensorflow（Windows和Linux两种版本）
现在越来越多的人工智能和机器学习以及深度学习,强化学习出现了,然后自己也对这个产生了点兴趣,特别的进行了一点点学习,就通过这篇文章来简单介绍一下,关于如何搭建Tensorflow以及如何进行使用.建议 ...
- node的url模块
.parse(url,query2obj[boolean],ignorePrototype[boolean]) .format({}) 和.parse相反,将带有url参数属性的对象组装成url .r ...
- 简述 zookeeper 基于 Zab 协议实现选主及事务提交
Zab 协议:zookeeper 基于 Paxos 协议的改进协议 zookeeper atomic broadcast 原子广播协议. zookeeper 基于 Zab 协议实现选主及事务提交. 一 ...
- 1、JavaScript中的Cookie 用于存储 web 页面的用户信息。
总结:每个浏览器都有一定数量限制的cookie.每个浏览器中,每一个cookie都有一个path路径,指向请求访问的网页. -------------------------------------- ...