原生js实现仿window10系统日历效果
舞动的灵魂版js日历，完全采用js实现，故而实现了与语言无关，jsp、asp.net php asp均可使用.无论你是开发软件，还是网站，均是不可或缺的实用代码。 该日历主要实现了获取当前时间时分秒，年月日星期，动态生成选择年的select，月的select，然后根据你所选中的年月，显示该年月对应的这一个月的日期。
点击上一个月，下一个月按钮，在下拉列表中显示对应的年月
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#calendar {
position: absolute;
padding: 5px;
border: 1px solid #000000;
background: #8f3349;
display: none;
} #todayTime {
padding: 5px 0;
font-size: 40px;
color: white;
}
#todayDate {
padding: 5px 0;
font-size: 24px;
color: #ffcf88;
}
#tools {
padding: 5px 0;
height: 30px;
color: white;
}
#tools .l {
float: left;
}
#tools .r {
float: right;
}
table {
width: 100%;
color: white;
}
table th {
color: #a2cbf3;
}
table td {
text-align: center;
cursor: default;
}
table td.today {
background: #cc2951;
color: white;
}
</style>
<script>
window.onload = function() { var text1 = document.getElementById('text1'); text1.onfocus = function() {
calendar();
} // calendar(); function calendar() { var calendarElement = document.getElementById('calendar');
var todayTimeElement = document.getElementById('todayTime');
var todayDateElement = document.getElementById('todayDate');
var selectYearElement = document.getElementById('selectYear');
var selectMonthElement = document.getElementById('selectMonth');
var showTableElement = document.getElementById('showTable');
var prevMonthElement = document.getElementById('prevMonth');
var nextMonthElement = document.getElementById('nextMonth'); calendarElement.style.display = 'block'; /*
* 获取今天的时间
* */
var today = new Date(); //设置日历显示的年月
var showYear = today.getFullYear();
var showMonth = today.getMonth(); //持续更新当前时间
updateTime(); //显示当前的年月日星期
todayDateElement.innerHTML = getDate(today); //动态生成选择年的select
for (var i=1970; i<2020; i++) {
var option = document.createElement('option');
option.value = i;
option.innerHTML = i;
if ( i == showYear ) {
option.selected = true;
}
selectYearElement.appendChild(option);
}
//动态生成选择月的select
for (var i=1; i<13; i++) {
var option = document.createElement('option');
option.value = i - 1;
option.innerHTML = i;
if ( i == showMonth + 1 ) {
option.selected = true;
}
selectMonthElement.appendChild(option);
} //初始化显示table
showTable(); //选择年
selectYearElement.onchange = function() {
showYear = this.value;
showTable();
showOption();
} //选择月
selectMonthElement.onchange = function() {
showMonth = Number(this.value);
showTable();
showOption();
} //上一个月
prevMonthElement.onclick = function() {
showMonth--;
showTable();
showOption();
} //下一个月
nextMonthElement.onclick = function() {
showMonth++;
showTable();
showOption();
} /*
* 实时更新当前时间
* */
function updateTime() {
var timer = null;
//每个500毫秒获取当前的时间，并把当前的时间格式化显示到指定位置
var today = new Date();
todayTimeElement.innerHTML = getTime(today);
timer = setInterval(function() {
var today = new Date();
todayTimeElement.innerHTML = getTime(today);
}, 500);
} function showTable() {
showTableElement.tBodies[0].innerHTML = '';
//根据当前需要显示的年和月来创建日历
//创建一个要显示的年月的下一个的日期对象
var date1 = new Date(showYear, showMonth+1, 1, 0, 0, 0);
//对下一个月的1号0时0分0秒的时间 - 1得到要显示的年月的最后一天的时间
var date2 = new Date(date1.getTime() - 1);
//得到要显示的年月的总天数
var showMonthDays = date2.getDate();
//获取要显示的年月的1日的星期,从0开始的星期
date2.setDate(1);
//showMonthWeek表示这个月的1日的星期，也可以作为表格中前面空白的单元格的个数
var showMonthWeek = date2.getDay(); var cells = 7;
var rows = Math.ceil( (showMonthDays + showMonthWeek) / cells ); //通过上面计算出来的行和列生成表格
//没生成一行就生成7列
//行的循环
for ( var i=0; i<rows; i++ ) { var tr = document.createElement('tr'); //列的循环
for ( var j=0; j<cells; j++ ) { var td = document.createElement('td'); var v = i*cells + j - ( showMonthWeek - 1 ); //根据这个月的日期控制显示的数字
//td.innerHTML = v;
if ( v > 0 && v <= showMonthDays ) { //高亮显示今天的日期
if ( today.getFullYear() == showYear && today.getMonth() == showMonth && today.getDate() == v ) {
td.className = 'today';
} td.innerHTML = v;
} else {
td.innerHTML = '';
} td.ondblclick = function() {
calendarElement.style.display = 'none'; text1.value = showYear + '年' + (showMonth+1) + '月' + this.innerHTML + '日';
} tr.appendChild(td); } showTableElement.tBodies[0].appendChild(tr); }
} function showOption() { var date = new Date(showYear, showMonth);
var sy = date.getFullYear();
var sm = date.getMonth();
console.log(showYear, showMonth) var options = selectYearElement.getElementsByTagName('option');
for (var i=0; i<options.length; i++) {
if ( options[i].value == sy ) {
options[i].selected = true;
}
} var options = selectMonthElement.getElementsByTagName('option');
for (var i=0; i<options.length; i++) {
if ( options[i].value == sm ) {
options[i].selected = true;
}
}
}
} /*
* 获取指定时间的时分秒
* */
function getTime(d) {
return [
addZero(d.getHours()),
addZero(d.getMinutes()),
addZero(d.getSeconds())
].join(':');
} /*
* 获取指定时间的年月日和星期
* */
function getDate(d) {
return d.getFullYear() + '年'+ addZero(d.getMonth() + 1) +'月'+ addZero(d.getDate()) +'日 星期' + getWeek(d.getDay());
} /*
* 给数字加前导0
* */
function addZero(v) {
if ( v < 10 ) {
return '0' + v;
} else {
return '' + v;
}
} /*
* 把数字星期转换成汉字星期
* */
function getWeek(n) {
return '日一二三四五六'.split('')[n];
} }
</script>
</head>
<body> <input type="text" id="text1"> <div id="calendar"> <div id="todayTime"></div>
<div id="todayDate"></div> <div id="tools">
<div class="l">
<select id="selectYear"></select> 年
<select id="selectMonth"></select> 月
</div>
<div class="r">
<span id="prevMonth">∧</span>
<span id="nextMonth">∨</span>
</div>
</div> <table id="showTable">
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody></tbody>
</table> </div> </body>
</html>
效果：
ps:有什么好的想法和思路可以共同交流成长。群号前端开发学习交流群 486867012
原生js实现仿window10系统日历效果的更多相关文章
- 原生JS、CSS实现的转盘效果（目前仅支持webkit）
这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...
- jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 利用原生JS实现网页1920banner图滚动效果
内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...
- 原生JS实现拖动滑块验证登录效果
♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装 代码如下: <!DOCTYPE html> <htm ...
- 原生JS通过勾股定理计算苹果菜单效果
JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...
- 原生JS学习之秒表、日历
Tips:涉及知识点:Date setInterval DOM 秒表 效果图: 简单构造出草图 Html代码 1 <!DOCTYPE html> 2 <html> ...
- 纯CSS仿windows系统loading效果
今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线(cubic-bezier)的过渡效果,如下所示 sp ...
- js实现仿购物车加减效果
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
随机推荐
- JNA参数传递问题，Java数组
版权声明:本文为博主原创文章,未经博主允许不得转载. 本文主要讲述使用JNA模拟结构体并将结构体数组作为参数传递给对应的方法. C语言结构体定义如下: typedef struct Rect { in ...
- U3D 飞机大战（MVC模式）解析--面向对象编程思想
在自己研究U3D游戏的时候,看过一些人的简单的游戏开发视频,写的不错,只是个人是java web 开发的人,所以结合着MVC思想,对游戏开发进行了一番考虑. 如果能把游戏更加的思想化,分工化,开发便明 ...
- JSCharts
JsCharts是一款轻量级的,基于js的图形报表工具,提供了线形图,柱状图,饼图,使用简单,相对其他的图表如FusionCharts来讲功能可能不是特别强大,但是对于一些要求不高的应用来讲已经够用了 ...
- C#垃圾回收机制
C#属于托管的面相对象的语言,内存回收机制就是一个代表, C#有一套类似"全自动"的垃圾回收机制,也就是虚拟机会自动来判断执行内存的回收, 我们一般常用的Dispose(),Usi ...
- 【转】自己动手写SC语言编译器
自序 编译原理与技术的一整套理论在整个计算机科学领域占有相当重要的地位,学习它对程序设计人员有很大的帮助.我们考究历史会发现那些人人称颂的程序设 计大师都是编译领域的高手,像写出BASIC语言的BIL ...
- 无需操作系统和虚拟机，直接运行Python代码
Josh Triplett以一个“笑点”开始了他在PyCon 2015上的演讲:移植Python使其无需操作系统运行:他和他的英特尔同事让解释器能够在GRUB引导程序.BIOS或EFI系统上运行.连演 ...
- linux中mail函数不能发送邮件
没有安装或启动 sendmail 组件 解决办法 我是新手,命令不熟,所以写的很详细,老鸟勿喷哦 1.重新安装 sendmail 组件,我用的是 CentOS ,使用下面的命令安装 代码如下 复制代码 ...
- QtPropertyBrowser+vs2010的安装与配置(转)
这一篇文章有些问题,后又写了一篇,地址是http://www.cnblogs.com/aminxu/p/4552410.html 转自http://blog.csdn.net/jingwenlai_s ...
- 第一个Cocos2d-JS游戏
我们的编写的第一个Cocos2d-JS程序,命名为HelloJS,从该工程开始学习其它的内容.创建工程我们创建Cocos2d-JS工程可以通过Cocos2d-x提供的命令工具cocos实现,但这种方式 ...
- Swift中的单例的实现方式
单例在iOS日常开发中是一个很常用的模式.对于希望在 app 的生命周期中只应该存在一个的对象,保证对象的唯一性的时候,一般都会使用单例来实现功能.在OC单例的写法如下: @implementatio ...