利用JS制作万年历的方法
时间:2019-03-31
本文章向大家介绍利用JS制作万年历的方法,主要包括利用JS制作万年历的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网页中展示一个与众不同万年历呢
1.HTML布局:
<div id="calendar"> <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="datesUl"></ul> </div>
1.首先在布局上,可以先用一个id为calender(日历)的div将你的万年历包住,以便我们对万年历的位置进行设置;
2.在这个大的div中有三部分: 1. month_year 用以设置年月; 2.title 用以显示星期; 3.detesUl 用以显示具体的日期;
CSS样式:
*{ padding: 0; margin: 0; list-style: none; } #calendar{ width: 700px; background-color: lightgray; margin: 20px auto; } #calendar::after{ content: ""; display: block; clear: both; } #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; } #datesUl > li:empty{ opacity: 0; } #datesUl > li:hover{ background-color: lightblue; }
JS代码分析:
- 做一些初始化的处理,给俩个显示年月的选项卡中添加内容便于用户查找
- 构造一些我们要用到的函数: 如输入年月计算出这个月有几天,创建添加option及li的函数
<script> var yearSelect = document.getElementById('year'); var monthSelect = document.getElementById('month'); var datesUl = document.getElementById('datesUl'); //初始化 function init(){ for(var year=1990;year<3000;year++){ //初始化俩个选项卡 createOption(year,year,yearSelect); } for(var month=1;month<13;month++){ createOption(month,month,monthSelect); } var now = new Date(); //获取当前的日期 showSelect(now.getFullYear(),now.getMonth()+1); //引用显示选项卡的函数 showDates(); //调用显示日期的函数 yearSelect.onchange=function(){ //当选项卡改变时 showDates(); }; monthSelect.onchange=function(){ showDates(); } } init(); //调用初始化函数 //创建option的函数 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 getDays(year,month){ var d = new Date(year,month,1); return d.getDay(); } //根当前的select中的年和月来显示日期 function showDates(){ datesUl.innerHTML= ""; var year = yearSelect.value; var month = monthSelect.value; //创建空的li for(var i=0;i<getDays(year,month);i++){ createLi("",datesUl); } //创建有日期的li for(var j=1;j<=getDatesOfMonth(year,month);j++){ createLi(j,datesUl); } } //创建li并添加至对应的容器 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,0); return d.getDate(); } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Yii2框架视图(View)操作及Layout的使用方法分析
- php实现单笔转账到支付宝功能
- PHP使用Redis实现Session共享的实现示例
- windows10在visual studio2019下配置使用openCV4.3.0
- PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
- Python爬虫爬取新闻资讯案例详解
- Python代码需要缩进吗
- 解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
- Python计算信息熵实例
- 详解python logging日志传输
- 将tf.batch_matmul替换成tf.matmul的实现
- Python正则表达式高级使用方法汇总
- CentOS7.0下安装PHP5.6.30服务的教程详解
- Laravel Validator自定义错误返回提示消息并在前端展示
- 完美解决keras 读取多个hdf5文件进行训练的问题