微擎小程序开发_原生js完成仿window10体系日历效果

日期:2021-01-11 类型:行业动态 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

原生js实现仿window10系统日历效果的实例       下面小编就为大家带来一篇原生js实现仿window10系统日历效果的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关, 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 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();

//每个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 select id="selectYear" /select 年 select id="selectMonth" /select 月 /div div span id="prevMonth" ∧ /span span id="nextMonth" ∨ /span /div /div table id="showTable" thead th 日 /th th 一 /th th 二 /th th 三 /th th 四 /th th 五 /th th 六 /th /tr /thead tbody /tbody /table /div /body /html

效果:

以上这篇原生js实现仿window10系统日历效果的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。