查看本章节

查看作业目录

需求说明：

使用 JavaScript 中的 Date 对象，在页面上显示一个万年历。选择不同的年份和月份，在页面中显示当前月的日历

实现思路：

  1. 在页面中添加两个 <select> 标签，用来显示年份和月份；同时添加两个 <ul> 标签，一个用来显示星期，另一个用来显示日期
  2. 在 JavaScript 脚本中动态添加年份和月份，获取当前日期的年份和月份，显示到 <select> 标签上
  3. 根据 <select> 标签上显示的 value 值，获取当前选中年月的第一天是星期几，并绘制空 <li> 标签
  4. 获取当前选中的年月一共有多少天，并绘制对应的 <li> 标签
  5. 为两个 <select> 标签设置 onchange 事件

实现代码：



<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<style type="text/css">

			*{

				margin: 0;

				padding: 0;

				list-style: none;

			}

			#calender{

				width: 700px;

				background-color: lightgray;

				margin: 20px auto;

			}

			#month_year{

				width: 700px;

				height: 50px;

				line-height: 50px;

				text-align: center;

			}

			ul li{

				float: left;

				width: 100px;

				height: 50px;

				text-align: center;

				line-height: 50px;

			}

		</style>

	</head>

	<body>

		<div id="calender">

			<div id="month_year">

				<select id="year"></select>年

				<select id="month"></select>月

			</div>

			<ul id="title">

				<li>星期天</li>

				<li>星期一</li>

				<li>星期二</li>

				<li>星期三</li>

				<li>星期四</li>

				<li>星期五</li>

				<li>星期六</li>

			</ul>

			<ul id="dateul"></ul>

		</div>

		<script type="text/javascript">

			var yearSelect=document.getElementById("year");

			var monthSelect=document.getElementById("month");

			var dateul=document.getElementById("dateul");

			function init(){

				for (var year=1990;year<3000;year++) {

					createOption(year,year,yearSelect);

				}

				for (var month=1;month<13;month++) {

					createOption(month,month-1,monthSelect);

				}

				var now=new Date();

				console.log(Date)

				showSelect(now.getFullYear(),now.getMonth());

				showDates();

				yearSelect.onchange=function(){

					showDates();

				}

				monthSelect.onchange=function(){

					showDates();

				}

			}

			function createOption(text,value,parent){

				var option=document.createElement("option");

				option.innerHTML=text;

				option.value=value;

				parent.appendChild(option);

			}

			function showSelect(year,month){

				yearSelect.value=year;

				monthSelect.value=month;

			}

			function showDates(){

				dateul.innerHTML="";

				var year=yearSelect.value;

				var month=monthSelect.value;

				for (var i=0;i<getDays(year,month);i++) {

					createLi("",dateul);

				}

				for (var j=1;j<=getDatesOfMonth(year,month);j++) {

					createLi(j,dateul);

				}

			}

			function getDays(year,month){

				var d=new Date(year,month,1);

				return d.getDay();

			}

			function createLi(text,parent){

				var li=document.createElement("li");

				li.innerHTML=text;

				parent.appendChild(li);

			}

			function getDatesOfMonth(year,month){

				var d=new Date(year,month+1,0);

				return d.getDate();

			}

			init();

		</script>

	</body>

</html>

在页面中添加两个 ＜select＞ 标签，用来显示年份和月份；同时添加两个 ＜ul＞ 标签，一个用来显示星期，另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份，获取当前日期的年份的更多相关文章

  1. javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1.先用document.createElement方法创建一个input元素! 代码如 ...

  2. 用JavaScript往DIV动态添加内容

    参考:http://zhidao.baidu.com/link?url=6jSchyqPiEYCBoKdOmv52YHz9r7MTBms2pK1N6ptOX1kaR2eg320mlW1Sr6n36hp ...

  3. JDK8在Java转让Javascript脚本引擎动态地定义和运行代码

    import java.lang.*; import java.util.Arrays; import java.util.List; import javax.script.Invocable; i ...

  4. javascript脚本中使用json2.js解析json

    官方地址:https://github.com/douglascrockford/JSON-js   点击页面右下角“Download ZIP”下载   网页中引用json2.js,下面是一个简单的例 ...

  5. 对动态加载javascript脚本的研究

    有时我们需要在javascript脚本中创建js文件,那么在javascript脚本中创建的js文件又是如何执行的呢?和我们直接在HTML页面种写一个script标签的效果是一样的吗?(关于页面scr ...

  6. JavaScript脚本语言基础（三）

    导读: 数学对象(Math) 数组对象(Array) 字符串对象(String) 日期对象(Date) js对象是属性和方法的集合.JavaScript中的所有事物都是对象,如:字符串.数值.数组.函 ...

  7. winform导入导出excel，后台动态添加控件

    思路: 导入: 1,初始化一个OpenFileDialog类 (OpenFileDialog fileDialog = new OpenFileDialog();) 2, 获取用户选择文件的后缀名(s ...

  8. 使用JavaScript脚本控制媒体播放（顺序播放和随机播放）

    在JavaScript脚本中获取<audio.../>元素对应的对象为HTMLAudioElement对象,<video.../>元素对应的对象为HTMLVideoElemen ...

  9. 关于jQuery获取不到动态添加的元素节点的问题

    遇到问题: 当我获取 $("#art-list")页面元素后去在后面追加标签的时候(append),在下面用 $(selector) 获取刚刚添加的标签,发现怎么都获取不到. 问题 ...

随机推荐

  1. stlink 无法再keil中识别 按下复位键可以识别

    最近遇到一个很是头痛的问题 本来板子是好好的,就是从公司带回的家里 然后再次用stlink烧写程序的时候就出现了问题: 但是查看电脑端,上面是有stlink的 也就是电脑是好的, 我立刻又试了一下家中 ...

  2. Objective-C运行时定义了几种重要的类型

    Objective-C运行时定义了几种重要的类型. Class:定义Objective-C类 Ivar:定义对象的实例变量,包括类型和名字. Protocol:定义正式协议. objc_propert ...

  3. Mysql的行级锁

    我们首先需要知道的一个大前提是:mysql的锁是由具体的存储引擎实现的.所以像Mysql的默认引擎MyISAM和第三方插件引擎 InnoDB的锁实现机制是有区别的. Mysql有三种级别的锁定:表级锁 ...

  4. SpringBoot(3)：SpringData 数据访问

    一. 简介 Spring Data是一个用于简化数据库访问,并支持云服务的开源框架:其主要目标是 使得对数据的访问变得方便快捷.对于数据访问层,无论是 SQL(关系型数据库) 还是 NOSQL(非关系 ...

  5. 【Linux】【Services】【Docker】应用

    1. Docker应用: 镜像:包含了启动Docker容器所需要的文件系统层级及其内容:基于UnionFS采用分层结构实现: bootfs,rootfs registry:保存docker镜像及镜像层 ...

  6. eclipse.ini顺序

    -vmargs需放在-Dfile.encoding=UTF-8之前,否则会出现乱码 举例: -startup plugins/org.eclipse.equinox.launcher_1.3.0.v2 ...

  7. binlog浅析

    binlog浅析 一.基础知识 什么是binlog? (图一) 全称:Binary Log (二进制日志),包含描述数据库更改的" 事件 ",例如表创建操作或对表数据的更改.二进制 ...

  8. 连接opcserver时报错 connecting to OPC Server "****" CoCreateInstance 服务器运行失败

    在普通windows系统连接OPCServer可能会报这样的错,排查很长时间,OPCServer跟Client都运行正常,点号录入也正常. 最后发现,其实是OPCServer 与OPCClient 权 ...

  9. Mysql实例 表设计

    目录 一.介绍 二.设计表格 三.查询 查都有哪些公司 查A公司都放了哪些广告 查A公司10月份该交多少广告费 四.分析 表结构设置 sql语句 其它功能 一.介绍 有一个公司叫月亮集团,他们旗下有很 ...

  10. 安装Java1.8教程图解

    在服务器上配置Java环境 第一步: 因为我们系统是centOS7 64位的,所以我下载的是最新版本的jdk X64位的 因为阿里云服务器事先就安装好了ssh,我们可以用xsell连上去,我把下载好的 ...