生活随笔
收集整理的這篇文章主要介紹了
HTML JS 动态日历表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用HTML和JS 創建一個動態日歷表
先看效果圖
Html + JS 代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/Canlendar.css"/><title>動態顯示日歷
</title></head><body><table><td style="width:9%" onclick="ShowCalendar(\''20210401'\')"><table style="background-color: #408080;color:#FFFFFF;"><tr><td id="showCalendar" onclick="clickCanlendar()">點擊顯示
</td> </tr></table></td></table><script type="text/javascript" src="js/jquery-3.4.1.min.js"></script><script>function clickCanlendar(){var date = new Date();var month = date.getMonth();var day = date.getDate();if(month >= 1 && month <= 9){month = '0' + month}if(day >= 1 && day <= 9){day = '0' + day;};var currentDate = date.getFullYear() + month + day;alert(date);ShowCalendar(currentDate);}function ShowCalendar(SY_OPERATION){if($("#exit").length > 0){console.log(1);$("#exit").detach();return;}else{console.log(2);var Calendar = '<div id= "exit" class="main clearfix" style="position: absolute;background:white;">' +'<div class="menu clearfix tomove"> '+' <a class="select-prev fl" href="javascript:;"><</a>' + ' <div class="select month fl pr">' + '<div class="select-text"><span class="year-text" value="2016">2016年</span><span class="month-text" value="">1月</span></div>' + ' </div>' + '<a class="select-next fl" href="javascript:;">></a>' + '<a class="select-today fl" href="javascript:;">返回今天</a>' + '<div class="time fl">10:40:05</div>' + '</div>' + '<ul class="title">' + ' <li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>' + '</ul>' + '<ul class="table">' + ' <li><span>1</span></li><li><span>2</span>' + ' </ul>' + '</div>';$(Calendar).insertBefore("#showCalendar");console.log(3);$(function(){var init = {};var fun = {init: function(){this.timeBox();this.dateBox();},timeBox: function(){ (function(){var date = new Date();var h = date.getHours(),m = date.getMinutes(),s = date.getSeconds();var time = h + ':' + m + ':' + s;var time = fun.timeBu(time);$('.time').html(time);setTimeout(arguments.callee, 1000);})();},timeBu: function(val){var arr = val.split(':');for(var i = 0; i < arr.length; i++){if(arr[i] < 10){arr[i] = '0' + arr[i];}};return arr.join(':');},showDate: function(year, month){ $('.year-text').text(year + '年').attr('value', year);$('.month-text').text(month + '月').attr('value', month);$('.select-list li').removeClass('selected');$('.select-list li').addClass(function(i){var value = $(this).attr('value');if(value == year || value == month){return 'selected';}});var setDate = new Date();setDate.setFullYear(year); setDate.setMonth(month-1); setDate.setDate(1); var num = setDate.getDay(); setDate.setMonth(month); var lastDate = new Date(setDate.getTime() - 1000*60*60*24); var lastDay = lastDate.getDate(); var html = '';for(var i = 1; i <= lastDay; i++){html += '<li><span>'+i+'</span></li>';};$('.table').html(html);var first = $('.table li:first'),w = first.outerWidth();first.css('marginLeft', w * num + 'px'); var nowDate = new Date(), nowYear = nowDate.getFullYear(),nowMonth = nowDate.getMonth() + 1,today = nowDate.getDate(); if(nowYear == year && nowMonth == month){ $('.table li').eq(today-1).find('span').addClass('today'); }},dateBox: function(){var date = new Date(),year = date.getFullYear(), month = date.getMonth() + 1; fun.showDate(year, month);}}fun.init(); $(document).on('click', function(){$('.select-list').hide();$('.select-text').removeClass('current');});$('.select-list li').on('click', function(){if($(this).hasClass('selected')){ return;};var self = $(this),text = self.text(),value = self.attr('value');self.addClass('selected').siblings().removeClass('selected');self.parent().next().find('span').text(text).attr('value', value);var year = $('.year-text').attr('value'),month = $('.month-text').attr('value');fun.showDate(year, month);});$('.select-today').on('click', function(){fun.dateBox();});$('body').on({'mouseenter': function(){$(this).addClass('on');},'mouseleave': function(){$(this).removeClass('on');}}, '.table span');$('body').on('click', '.table span', function(){var year = $('.year-text').attr('value'),month = $('.month-text').attr('value'),day = $(this).text();if(month < 10){month = "0" + month;}if(day < 10){day = "0" + day;}var YYY = "000" + (year-1911).toString();YYY = YYY.substr(3, 3);var datetime = YYY + month + day; });$('.select-prev').on('click', function(){var year = parseInt($('.year-text').attr('value')),month = parseInt($('.month-text').attr('value'));if(month - 1 > 0){month = month - 1;}else{month = 12;year = year - 1;if(year < init.startYear){return;}};fun.showDate(year, month);});$('.select-next').on('click', function(){var year = parseInt($('.year-text').attr('value')),month = parseInt($('.month-text').attr('value'));if(month + 1 <= 12){month = month + 1;}else{month = 1;year = year + 1;if(year > init.endYear){return;}};fun.showDate(year, month);})console.log(4);})}}</script></body>
</html>
CSS代碼
*{margin:0
;padding: 0
;font-family: '微軟雅黑';}
body{background: #fff
;}
ul{list-style: none
;}
a{text-decoration: none
;color:#333
;}
img{border:none
;}
.fl{float:left
;_display:inline
;}
.fr{float:right
;_display:inline
;}
.pr{position: relative
;}
.pa{position: absolute
;}
.none{display: none
;}
.clearfix:before,.clearfix:after{content:"";display:table
;}
.clearfix:after{clear:both
;}
.clearfix{*
zoom:1
;}.main{width:350px
;margin:27px auto
;padding:5px
;border:2px #d8d8d8 solid
;color:#333
;}
.menu{font-size: 14px
;}
.select{width:80px
;height:25px
;line-height:25px
;border:0px
;cursor: default
;}
.select-text{text-align: center
;}
.select div.current{box-shadow: 1px 1px 0 0 #d8d8d8 inset
;}
.month{border-left:none
;border-right:none
;}
.select-list{left:-1px
;top:25px
;width: 80px
;max-height:360px
;background: #fff
;border:1px #d8d8d8 solid
;overflow: auto
;}
.select-list li{height: 30px
;line-height: 30px
;text-indent: 10px
;cursor: pointer
;}
.select-list li.selected{background: #d8d8d8
;}
.select-list li.on{background: #d8d8d8
;}
.select-prev,.select-next{width:20px
;height: 20px
;margin-left:20px
;line-height: 25px
;text-align: center
;cursor: pointer
;}
.select-next{margin:0
;}
.select-today{width:80px
;height: 25px
;margin-left:40px
;line-height: 25px
;text-align: center
;border:1px #d8d8d8 solid
;cursor: pointer
;}
.select-prev:hover,.select-next:hover,.select-today:hover{border:1px #D8D8D8 solid
;}
.select-prev:active,.select-next:active,.select-today:active{background: #f0f0f0
;box-shadow: 1px 1px 1px #c7c7c7 inset
;}
.time{height: 25px
;margin-left:10px
;line-height: 25px
;}
.title{height:35px
;font-size: 14px
;margin-top:10px
;border-top:1px #57abff solid
;}
.title li{float:left
;width:50px
;height:35px
;line-height: 35px
;text-align: center
;}
.table li{float:left
;width:50px
;height:40px
;font-size: 14px
;cursor: pointer
;}
.table li span{display: block
;width:43px
;height:35px
;line-height: 35px
;text-align: center
;border:2px #fff solid
;}
.table li span.on{border:2px #fb0 solid
;}
.table li span.today{background: #fb0
;border:2px #fb0 solid
;border-radius:50%
;color:#fff
;}
好啦！到這里已經成功啦，快去試試吧！???
???????????????????????????????????
更多博客內容請查看 ? 可可西里的博客
如果喜歡的話可以點個贊和關注嗷~ ???
總結
以上是生活随笔為你收集整理的HTML JS 动态日历表的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
