纯js实现日期选取功能
平年:
2月-->28天
4,6,9,11月-->30天
1,3,5,7,8,10,12月-->31天
闰年:
2月-->29天
4,6,9,11月-->30天
1,3,5,7,8,10,12月-->31天
闰年的计算方式:
1、年份/100
2、如果 年份/100有余数 , 年份/4 没有余数 是闰年
如果 年份/100没余数 , 年份/400 没有余数 是闰年
function year(years){
return years%100 == 0 ? (years%400 == 0 ? 1 : 0) : (years%4 == 0 ? 1 : 0);//判断闰年;如果是闰年返回1,平年返回0
}
function day(mouths, fn){//fn --> year()函数
if(fn == 1 && mouths == 2){
return 29;
}else{
if(mouths == 2){
return 28;
}else if(mouths == 4 || 6 || 7 || 9 || 11){//4 6 7 9 11 -> 30
return 30;
}else{
return 31;
}
}
}
下面是全部代码:
html:
<div id="datebox"></div><!--选完日期后填入的地方-->
<div style="display: flex;">
<div class="years"> </div>
<div class="mouth" style="display: none"> </div>
<div class="day" style="display: none"> </div>
</div>
css:
<style>
.years,.mouth,.day{
width: 90px;
height: 200px;
overflow-y: scroll;
}
</style>
javascript:
var startYear = 1918;
var years = document.getElementsByClassName('years')[0];
var mouth = document.getElementsByClassName('mouth')[0];
var days = document.getElementsByClassName('day')[0];
for(var k = startYear; k <= 2017; k++){
var node = createNode(k);
years.appendChild(node);
}
for(var m = 1; m <= 12; m++){
var node = createNode(m);
mouth.appendChild(node);
}
function createDay(option){
for(var i = 1; i <= option; i++){
var node = createNode(i);
days.appendChild(node);
}
}
function createNode (num){
var node = document.createElement('a');
node.innerHTML = num;
node.style.display = 'block';
return node;
}
function year(years){
return years%100 == 0 ? (years%400 == 0 ? 1 : 0) : (years%4 == 0 ? 1 : 0);
}
function day(mouths, fn){
if(fn == 1 && mouths == 2){
return 29;
}else{
if(mouths == 2){
return 28;
}else if(mouths == 4 || 6 || 7 || 9 || 11){//4 6 7 9 11 -> 30
return 30;
}else{
return 31;
}
}
}
years.addEventListener('click', function(e){
var temps = [];
temps.push(e.target.innerHTML);
mouth.style.display = 'block';
mouth.addEventListener('click', function(e){
temps.push(e.target.innerHTML);
days.style.display = 'block';
createDay(day(temps[1], year(temps[2])));
days.addEventListener('click', function(e){
temps.push(e.target.innerHTML);
var dates = temps[0] + '年' + temps[1] + '月' + temps[2] + '日';
datebox.innerHTML = dates;
this.style.display = 'none';
mouth.style.display = 'none';
years.style.display = 'none';
})
})
})
纯js实现日期选取功能的更多相关文章
- 纯JS实现图片验证码功能并兼容IE6-8
最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也 ...
- 纯js实现复制到剪贴板功能
在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...
- jQuery+AJAX实现纯js分页功能
使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用 ...
- AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;
js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...
- F2工作流引擎之-纯JS Web在线可拖拽的流程设计器(八)
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...
- js 实现进度条功能。
/** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...
- [分享黑科技]纯js突破localstorage存储上线,远程抓取图片,并转码base64保存本地,最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制,单页应用最新黑科技
好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- 25个有用的jQuery日历和日期选取插件
jQuery被认为是最好的JavaScript库,因为它简单易用.灵活,并有大量的插件.本文介绍25个非常不错的jQuery日历和日期选取插件,希望对各位有用. 1. Simple JQuery Da ...
随机推荐
- eclipse Luna 安装SVN插件
Help--->Install New Soft ----> 输入 “Luna - http://download.eclipse.org/releases/luna” 这里显示都是 lu ...
- VMWare的三种网络连接方式
VMWare和主机的三种网络连接方式 桥接 这种模式下,虚拟机通过主机的网卡与主机通信,如果主机能够上网,则虚拟机也能联网. 在虚拟机中,需要将虚拟机的IP配置为与主机处于同一网段. 虚拟机也可以与同 ...
- mysql字符串类型(char,varchar)
原文链接:https://blog.csdn.net/puqutogether/article/details/45648879 MySQL中的字符串有两个常用的类型:char和varchar,二者各 ...
- Python中的计时函数
我们已经知道使用cell magic或者line magic里面的%%time或者%time能够对Python程序中某一模块的运行时间进行计算,下面是一种更为灵活的计时方法,利用了计时函数time.t ...
- Android学习笔记触摸事件
案例代码: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <Relativ ...
- Linux系统使用Nmon监控及分析系统性能
一.下载nmon(1)查看sever的内核版本: 命令:lsb_release -a执行结果:LSB Version: :base-4.0-amd64:base-4.0-noarch:c ...
- 学习 SQL Server (5) :视图,索引,事务和锁+T_SQL
--=============== 视图的创建 =================. --create view 视图名 as 查询语句--注意:视图查询中的字段不能重名-- 视图中的数据是‘假数据’ ...
- 4.WebPack-Loader
一.什么是Loader WebPack默认只"认识"以*.js结尾的文件,如果想处理其他类型的文件,就必须添加Loader,有各种各样的Loader,每个Loader可处理不同类型 ...
- QT槽函数获取信号发送对象
Qt 在槽函数中获取信号发送对象 Qt中提供了一个函数 qobject_cast(QObject *object),可以通过这个函数判断信号发出对象 Qt 帮助文档的解释: Returns the g ...
- 第七模块 :微服务监控告警Prometheus架构和实践
119.监控模式分类~1.mp4 logging:日志监控,Logging 的特点是,它描述一些离散的(不连续的)事件. 例如:应用通过一个滚动的文件输出 Debug 或 Error 信息,并通过日志 ...