<style>
#date {
text-align: center;
} .td {
cursor: pointer;
}
</style>
<script>
function GetDate() {
var date = new Date();
var year = date.getYear();
var month = date.getMonth();
var str = '';
str += '<table id="date">';
str += '<tr>';
str += '<td><a href="javascript:void(0)" onclick="DelYear()">< <</a></td>';
str += '<td colspan="2"><span id="year">' + year + '</span>年</td>';
str += '<td><a href="javascript:void(0)" onclick="AddYear()">> ></a></td>';
str += '</tr>';
for (i = 0; i < 3; i++) {
str += '<tr>';
str += '<td onclick="ChangeMonth(this)" class="td">' + Number(1 + i * 4) + '月</td>';
str += '<td onclick="ChangeMonth(this)" class="td">' + Number(2 + i * 4) + '月</td>';
str += '<td onclick="ChangeMonth(this)" class="td">' + Number(3 + i * 4) + '月</td>';
str += '<td onclick="ChangeMonth(this)" class="td">' + Number(4 + i * 4) + '月</td>';
str += '</tr>';
}
str += '</table>';
str = str.replace('<td onclick="ChangeMonth(this)" class="td">', '<td onclick="ChangeMonth(this)" class="td" style="color:red">');
document.write(str);
}
function AddYear() {
var year = document.getElementById("year").innerHTML;
year = Number(year) + 1;
document.getElementById("year").innerHTML = year;
}
function DelYear() {
var year = document.getElementById("year").innerHTML;
year = Number(year) - 1;
document.getElementById("year").innerHTML = year;
}
function ChangeMonth(obj) {
var trs = document.getElementById("date").getElementsByTagName("tr");
for (i = 1; i < trs.length; i++) {
var tds = trs[i].getElementsByTagName("td");
for (j = 0; j < tds.length; j++) {
tds[j].style.color = "";
}
}
obj.style.color = "red";
}
</script> <div style="width: 100%; text-align: center;">
<script>GetDate()</script>
</div>

摘自: http://zhidao.baidu.com/question/274527563.html?fr=iks&word=js+%C8%D5%C6%DA%BF%D8%BC%FE%D6%BB%CF%D4%CA%BE%C4%EA%D4%C2&ie=gbk

只显示年月的js时间控件 纯手写的更多相关文章

  1. [转]一种简单的js时间控件

    使用方法: 粘贴代码到文本文档中,文档名称为datetime.js,然后在html文件中引用如下代码即可 <input name="shijian1" id="sh ...

  2. 一款比较好用的JS时间控件-laydate

      官方讲解:http://laydate.layui.com/ 具体的内容请看官方讲解,此处仅说名应用: 1.在jsp或html或其他中引入laydate.js <script src=&qu ...

  3. flutter showDatePicker显示中文日期_Flutter时间控件显示中文

    flutter showDatePicker showTimePicker显示中文日期 1.配置flutter_localizations依赖 找到pubspec.yaml配置flutter_loca ...

  4. 自带日期时间 showDatePicker显示中文日期_Flutter时间控件显示中文

    flutter showDatePicker showTimePicker显示中文日期 1.配置flutter_localizations依赖 找到pubspec.yaml配置flutter_loca ...

  5. JS时间控件 moment.js用法

    参考http://momentjs.cn/ 下载 moment.js moment.min.js 12.4k moment+多语言支持.js moment+多语言支持.min.js 45.4k 安装 ...

  6. easyui datebox时间控件如何只显示年月

    easyui datebox控件,只显示年月,不显示年月日 需要的效果图如下: 具体的js代码: <script> $(function(){ intiMonthBox('costTime ...

  7. zui框架配置日期控件只显示年月

    zui框架配置日期控件datetimepicker只显示年月 <!DOCTYPE html> <head> <script src="~/Scripts/jqu ...

  8. 转 EasyUi日期控件datebox设置,只显示年月,也只能选择年月

    1.引入Jquery和easyui,注低版本的Jquery和easy不能使用,这里使用的Jquery是1.8.2easyui是1.6.1.1.easyui下载地址:http://www.jeasyui ...

  9. JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日

    标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...

随机推荐

  1. JVM内存结构、垃圾回收那点事(转)

    翻看电脑的文件夹,无意看到了9月份在公司做的一次分享,浏览了一下"婆婆特",发现自己在ppt上的写的引导性问题自己也不能确切的回答出来,哎,知识这东西,平时不常用的没些日子就生疏了 ...

  2. x264 - open gop and closed gop

    GOP - Group of picture(影像集团),它指的是两个I帧之间的距离. Reference(基准期).  它指的是两个P帧之间的距离. 简而言之, 跨参考gop的,变open gop: ...

  3. 每天的学习经验:SharePoint 2013 定义自己添加的产品清单。Callout菜单项、文档关注、SharePoint服务机端对象模型查询

    前言: 前一段时间一直都比較忙.没有什么时间进行总结,刚好节前项目上线.同一时候趁着放假能够好好的对之前遇到的一些问题进行总结. 主要内容有使用SharePoint服务端对象模型进行查询.为Share ...

  4. 第四章——SQLServer2008-2012资源及性能监控(2) .

    原文:第四章--SQLServer2008-2012资源及性能监控(2) . 本文接着上文继续,讲述如何监控CPU的使用情况 前言: CPU是服务器中最重要的资源.在数据库服务器中,CPU的使用情况应 ...

  5. React-Native基础教程

    React-Native牛刀小试仿京东砍啊砍砍到你手软 React-Native基础教程 *React-Native基础篇作者git *React-Native官方文档 *Demo 几个月前faceb ...

  6. 缓存之EHCache(转)

    一.简介非常简单,而且易用. ehcache 是一个非常轻量级的缓存实现,而且从1.2 之后就支持了集群,而且是hibernate 默认的缓存provider.ehcache 是一个纯Java的进程内 ...

  7. wxWidgets+wxSmith版电子词典

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [项目3-OOP版电子词典](本程序须要的相关 ...

  8. 如何使用Google APIs和Google应用系统集成(7)----在里面JSON兑换XML数据处理,JSON数据包括违规XML数据规范:XML节点名称不支持号码Java解

    笔者电话Google Calendar APIs的GetColors方法,其中(有关详细信息Google Calendar API已经Google API看到我的博文介绍的其余部分,目前,我们只取Go ...

  9. Android Studio中导入Android项目StepbyStep

    想把在eclipse的项目导入Android studio,有两种方法,但是我喜欢的是不改变项目文件结构的方法,因为这样可以兼容eclipse. 第一步: 导入的项目不能运行,需要配置运行环境.And ...

  10. 设计模式入门之装饰器模式Decorator

    //装饰模式定义:动态地给一个对象加入一些额外的职责. //就添加功能来说.装饰模式比生成子类更为灵活 //这也提现了面向对象设计中的一条基本原则,即:尽量使用对象组合,而不是对象继承 //Compo ...