原生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>
效果：
以上这篇原生js实现仿window10系统日历效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
纯js模仿windows系统日历
在网上看了几篇关于生成日历的js 教程于是自己也整理了一个想法思路 大家有什么建议欢迎提出 首先这个项目里面本人认为的几个难点: 1.如何定义每一个月的第一天位置 每个月的第一天都不是固定的星期几,所以第一天的输出需要动动脑筋把它放到对应的星期里面 2.每个月的最后一天有时候因为行数不够输出不了怎么办? 下面会有答案 ^_^ 思路: 1.定义好每一个月份的日期天数 2.获取当前的系统日期初始化数据 3.输出日历 2.1.先获取当前月的第一天是星期几(这一点与日历的排版至关重要!)
-
js原生日历的实例(推荐)
突然发现日期对象可以进行 加减 , 利用这个特性写了一个可以说是对只要会JavaScript 的就可以写的日历:没有各种算法,只有一些逻辑相信只要懂javascript就差不多看俩眼就会的日历. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *
-
js实现会跳动的日历效果(完整实例)
一.简介 编写一个会动的日历,日历上面有年月日,周几,时分秒,效果如下: 年月日,周几,时分秒都会随着系统时间的走动而改变 二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
-
原生JS实现日历组件的示例代码
想要实现的效果 点击日期选择框出现日历 有个日期控制栏帮助选择日期, 包括年.月.日的选择和今天 日历格子,初次点击日期选择框时显示此刻的日期,日历格子的日期应该包括这个月的所有天数,同时如果当月的1号不是周日,还应补全从周日到1号的天数.还要在这个月最后1号的后面补全到周六. 日期控制栏和日历格子的日期还有选择框里的日期的变化要是同步的. 实现思路 为了组件的可复用性,需要用面向对象的思想. 每个日历组件都是一个日历对象,主要包括日期选择框,日期控制显示栏,还有日历格子,为了保持日期控制显示栏
-
原生js实现仿window10系统日历效果的实例
舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒,年月日星期,动态生成选择年的select,月的select,然后根据你所选中的年月,显示该年月对应的这一个月的日期. 点击上一个月,下一个月按钮,在下拉列表中显示对应的年月. <!DOCTYPE html> <html lang="en"> <head>
-
JS实现仿PS的调色板效果完整实例
本文实例讲述了JS实现仿PS的调色板效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码: <html> <head> <style> #colorpad table{ border-collapse:collapse; cellpadding:0; cellspacing:0; width:255px; height:255px; border:0; } #colorpadright table{ border-collapse:collapse;
-
原生JS实现仿淘宝网左侧商品分类菜单效果代码
本文实例讲述了原生JS实现仿淘宝网左侧商品分类菜单效果代码.分享给大家供大家参考.具体如下: 这是一款原生JS实现的仿淘宝网左侧商品分类菜单效果代码,JavaScript技术实现,兼容各主流浏览器.自己再修改一下CSS菜单,它会变得更漂亮. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-taobao-pro-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <head> <titl
-
原生js实现jquery函数animate()动画效果的简单实例
通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参
-
原生JS实现-星级评分系统的简单实例
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star(); 使用默认值5个星星,默认信息 var msg = [........]; sufuStar.star(10,msg); 自定义星星个数为10.显示信息msg格式参考默认值,条数必须和星星个数一致: 自己实现一些实例,有个好处,能增加应用各知识点的熟练度,还能检验出自己的薄弱项!一经发现,立即翻API文档恶补! 不知道是不是我太笨,这个实例居然写了整整一天! 不废话了,先说下这个实例涉及的知识点
-
原生JS实现的雪花飘落动画效果
本文实例讲述了原生JS实现的雪花飘落动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>www.jb51.net JS下雪动画</title> &
-
原生js实现简单的焦点图效果实例
用到一些封装好的运动函数,主要是定时器 效果为图片和图片的描述定时自动更换. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul, li, p, h3 { padding: 0; margin: 0; list-style: none; } im
-
vue项目中仿element-ui弹框效果的实例代码
最近要写个弹框,发现element-ui弹框样式还可以,就copy下来改吧改吧.也不分步骤详细介绍了直接上代码. 在组件目录中新建文件夹message 我把message目录里的东西给大家贴出来 message文件夹 src文件夹 index.js import Message from './src/main.js'; export default Message; mian.js import Vue from 'vue'; import Main from './main.vue'; le
-
使用JS实现图片展示瀑布流效果(简单实例)
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu