时间操作(JavaScript版)—年月日三级联动(默认显示系统时间)
版权声明:本文为博主原创文章,未经博主同意不得转载。
https://blog.csdn.net/wangshuxuncom/article/details/35263317
这个功能是大学时自己使用纯JavaScript写的,没有借助Jquery,呵呵呵,看起来有点繁琐,但是在当时依稀的记得功能实现后自己好好的高兴一把了呢
,从如今来看那时候的自己是多么的幼稚、多么的无知:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>年月日三级联动(默认显示系统时间)</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
function removeChilds(id){
var childs = document.getElementById(id).childNodes;//这一行代码和紧跟的以下的for循环用于清除原来日的下拉列表的select中的对节点
for(var i=childs.length-1;i>=0;i--) {
document.getElementById(id).removeChild(childs[i]);
}
}
function setDay(){
var yearToDate=document.getElementById("year").value;
var monthToDate=document.getElementById("month").value;
//alert(yearToDate+":"+monthToDate);
var days=new Array(28,29,30,31);
var nowDate=new Date();
if(monthToDate==1||monthToDate==3||monthToDate==5||monthToDate==7||monthToDate==8||monthToDate==10||monthToDate==12){
removeChilds("day");
for( i=1; i<=days[3]; i++ ){
if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日
var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}else{
var newOption = document.createElement("option");newOption.setAttribute("value",i);
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}
}
}
if(monthToDate==4||monthToDate==6||monthToDate==9||monthToDate==11){
removeChilds("day");
for( i=1; i<=days[2]; i++ ){
if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日
var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}else{
var newOption = document.createElement("option");newOption.setAttribute("value",i);
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}
}
}
if(monthToDate==2){
removeChilds("day");
if(yearToDate%400==0||yearToDate%100!=0&&yearToDate%4==0){//闰年
for( i=1; i<=days[1]; i++ ){
if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日
var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}else{
var newOption = document.createElement("option");newOption.setAttribute("value",i);
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}
}
}
else{
for( i=1; i<=days[0]; i++ ){
if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//假设是当前系统时间则设置默认的日
var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}else{
var newOption = document.createElement("option");newOption.setAttribute("value",i);
var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
document.getElementById("day").appendChild(newOption);
}
}
}
}
}
function getMonth(){
var m;
for(m=1;m<=12;m++) {
if((new Date().getMonth()+1)==m){
document.write("<option value="+m+" selected=\"selected\">"+m+"</option>");
}else{
document.write("<option value="+m+">"+m+"</option>");
}
}
}
function getYear(){
var y;
var date=new Date();
var fullYear=date.getFullYear();
for(y=fullYear-60;y<=fullYear;y++){
if(y==fullYear){
document.write("<option value="+y+" selected=\"selected\">"+y+"</option>");
}else{
document.write("<option value="+y+" >"+y+"</option>");
}
}
}
</script>
</head>
<body>
<select name="year" id="year" onChange="setDay();"><script type="text/javascript">getYear();</script></select>年
<select name="month" id="month" onChange="setDay()"><script type="text/javascript">getMonth();</script></select>月
<select name="day" id="day"><script type="text/javascript">setDay();<!--起到初始化日的作用。
--></script></select>日
</body>
</html>时间操作(JavaScript版)—年月日三级联动(默认显示系统时间)的更多相关文章
- JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
- 利用select实现年月日三级联动的日期选择效果
× 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...
- JS 实现的年月日三级联动
js文件 SYT="-请选择年份-"; SMT="-请选择月份-"; SDT="-请选择日期-"; BYN=50;//年份范围往前50年 A ...
- JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- LaTeX去掉默认显示日期时间
LaTeX去掉默认显示日期时间: \date{}
- Qt 实时显示系统时间
前言 我们用一个label控件来实时显示系统时间,用到 QTimer 和 QDateTime 这个两个类. 正题 头文件: #ifndef MAINWINDOW_H #define MAINWINDO ...
- js实现年月日三级联动
当我们注册一个qq的时候,会看到一个三级年月日的联动菜单,下面简单介绍. <!doctype html> <html lang="en"> <head ...
- 原生javascript制作省市区三级联动详细教程
多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例.多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单.完成一个多级联动效果,有助于增强对数据处理的能力. 本实例以 ...
- 原生javascript实现省市区三级联动
腾讯IP分享计划(http://ip.qq.com/)有个现成的三级联动功能,查看源码后发现可以直接使用其单独的JS文件(http://ip.qq.com/js/geo.js). 分析后发现自己需要写 ...
随机推荐
- Big Problems for Organizers CodeForces - 418D (贪心,直径)
大意: 给定n结点树, m个询问, 每次给出两个旅馆的位置, 求树上所有结点到最近旅馆距离的最大值 先考虑一些简单情形. 若旅馆只有一个的话, 显然到旅馆最远的点是直径端点之一 若树为链的话, 显然是 ...
- Krapno 1
All krpano software can be downloaded and tested for free - without any functional limitation.For us ...
- python-day33--进程间通信(IPC)
方式:队列(推荐使用) 一.基本情况 1.可以往队列里放任意类型的数据 2. 队列:先进先出 3. q=Queue(3) #可以设置队列中最多可以进入多少个值,也可以不设置 q.put('first' ...
- 最全面的mac下的android studio快捷键
Action Mac OSX Win/Linux 注释代码(//) Cmd + / Ctrl + / 注释代码(/**/) Cmd + Option + / Ctrl + Alt + / 格式化代码 ...
- spring PROPAGATION
PROPAGATION_REQUIRED Support a current transaction; create a new one if none exists. 支持一个当前事务;如果不存在 ...
- MyEclipse WebSphere开发教程:安装和更新WebSphere 6.1, JAX-WS, EJB 3.0(三)
MyEclipse超值折扣 限量 100 套! 立即开抢>> [MyEclipse最新版下载] MyEclipse支持Java EE技术(如JAX-WS和EJB 3.0),它们以功能包的形 ...
- MyEclipse移动开发教程:迁移HTML5移动项目到PhoneGap(二)
MyEclipse开年钜惠 在线购买低至75折!立即开抢>> [MyEclipse最新版下载] 二.将文件从HTML5项目复制到PhoneGap项目中 1. 在HTML5 app项目的ww ...
- bean的实例化
bean的实例化 构造器方式 静态方法方式 普通工厂方式 一般的,默认bean实例化使用的是构造器方式,调用的是无参的构造方法 package com.Model; public class Dog ...
- JavaScript事件漫谈
内容概要: event对象,事件在多个浏览器中的兼容,事件的传播机制,JS自定义事件,jQuery的自定义事件的绑定与触发 Event对象 Event对象属于HTML DOM对象.Event 对象代表 ...
- anu - browser
import { oneObject, recyclables, typeNumber } from "./util"; //用于后端的元素节点 export function D ...