平年:

  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实现日期选取功能的更多相关文章

  1. 纯JS实现图片验证码功能并兼容IE6-8

    最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也 ...

  2. 纯js实现复制到剪贴板功能

    在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...

  3. jQuery+AJAX实现纯js分页功能

    使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用 ...

  4. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  5. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器(八)

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  6. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

  7. [分享黑科技]纯js突破localstorage存储上线,远程抓取图片,并转码base64保存本地,最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制,单页应用最新黑科技

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...

  8. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  9. 25个有用的jQuery日历和日期选取插件

    jQuery被认为是最好的JavaScript库,因为它简单易用.灵活,并有大量的插件.本文介绍25个非常不错的jQuery日历和日期选取插件,希望对各位有用. 1. Simple JQuery Da ...

随机推荐

  1. Python的数据的基本类型

    基本数据类型 int整数 str 字符串   一般不存放大量的数据 bool  布尔值,用来判断. True,False    list  列表.存放大量数据,[]表示,里面可以放各种数据类型     ...

  2. [AGC043-D]Merge Triplets

    题目   点这里看题目. 分析   我们不妨来考虑一下生成的序列有什么性质.   为了方便表示,我们将序列\(S\)的第\(i\)项写为\(S[i]\).   首先考虑如果所有的\(A\)序列都是递增 ...

  3. 曹工说Redis源码(8)--面试时,redis 内存淘汰总被问,但是总答不好

    文章导航 Redis源码系列的初衷,是帮助我们更好地理解Redis,更懂Redis,而怎么才能懂,光看是不够的,建议跟着下面的这一篇,把环境搭建起来,后续可以自己阅读源码,或者跟着我这边一起阅读.由于 ...

  4. FFT快速傅里叶变换的python实现

    FFT是DFT的高效算法,能够将时域信号转化到频域上,下面记录下一段用python实现的FFT代码. # encoding=utf-8 import numpy as np import pylab ...

  5. 西门子S7-300 PLC视频教程(百度网盘)收集于网络-供参考学习

    百度网盘地址: 西门子300 PLC视频教程 群文件里面可以找到. 下载: https://blog.csdn.net/txwtech/article/details/93016190

  6. 【初学Java学习笔记】AOP与OOP

    AOP(Aspect Oriented Programming) 面向切面编程,是属于Spring框架中的内容.AOP相当于OOP的补充,当我们需要对多个对象引入一个公共行为,比如日志,操作记录等,就 ...

  7. 慕课网--docker走进第一个javaweb应用

    zh docker镜像就是一系列文件的集合 docker 容器就是一个进程.将docker镜像运行起来就是一个docker容器 docker仓库就是存储docker镜像的 1.docker的安装 do ...

  8. android activity状态的保存

    今天接到一个电面,途中面试官问到一个问题,如果一个activity在后台的时候,因为内存不足可能被杀死,在这之前如果想保存其中的状态数据,比如说客户填的一些信息之类的,该在哪个方法中进行. onSav ...

  9. disruptor架构四 多生产者多消费者执行

    1.首先介绍下那个时候使用RingBuffer,那个时候使用disruptor ringBuffer比较适合场景比较简单的业务,disruptor比较适合场景较为复杂的业务,很多复杂的结果必须使用di ...

  10. 微信小程序navigator带参数跳转及接收参数内容

    // index.wxml <navigator class='looks-view' wx:for="{{imgUrlNew}}" wx:key="index&q ...