用js写日历，并获取点击得时间

最新推荐文章于 2023-02-28 11:32:44 发布
最新推荐文章于 2023-02-28 11:32:44 发布
阅读量697 收藏
点赞数
文章标签： js css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ndjiafp/article/details/113590602
版权 
<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>calendar</title>
 <style>
 .clear:after{
 content:"";
 display:table;
 clear:both;
 }
 .left{
 float:left;
 }
 ul{
 padding:0px;
 margin-top:5px;
 margin-bottom:0px;
 }
 ul>li{
 float:left;
 list-style:none;
 width:30px;
 height: 21px;
 border: 1px solid #ccc;
 text-align:center;
 }
 .gray{
 color:#766565;
 }
 .top {
 height:25px;
 }
 .top .lf-tri{
 border:10px solid transparent;
 border-right-color:black;
 margin-top:4px;
 }
 .top .rf-tri{
 border:10px solid transparent;
 border-left-color:black;
 margin-top:4px;
 }
 .top .content{
 width:185px;
 height:5px;
 text-align:center;
 }
 </style>
 </head>
 <body> 
 <div class="top clear">
 <div class="left lf-tri" onclick="lastMonth()"></div>
 <div class="left content">2017年2月1日</div>
 <div class="left rf-tri" onclick=" nextMonth()"></div>
 </div>
 <div>
 <div id="week">
 <ul class="clear">
 <li>日</li>
 <li>一</li>
 <li>二</li>
 <li>三</li>
 <li>四</li>
 <li>五</li>
 <li>六</li>
 <ul>
 </div>
 <div id="date" onclick='getDateNum(event)'>
 <ul class="clear">
 <li>30</li>
 <li>31</li>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ul>
 <ul class="clear">
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
 <li>11</li>
 <li>12</li>
 </ul>
 <ul class="clear">
 <li>13</li>
 <li>14</li>
 <li>15</li>
 <li>16</li>
 <li>17</li>
 <li>18</li>
 <li>19</li>
 </ul>
 <ul class="clear">
 <li>20</li>
 <li>21</li>
 <li>22</li>
 <li>23</li>
 <li>24</li>
 <li>25</li>
 <li>26</li>
 </ul>
 <ul class="clear">
 <li>27</li>
 <li>28</li>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ul>
 <ul class="clear">
 <li>27</li>
 <li>28</li>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ul>
 </div>
 <div>
 <script>
 function $(id){//$是一个函数名.要是页面中和jq出现冲突。可以改成任意函数名$("date")调用这个函数
 return document.getElementById(id);
 }
 function change(cls){
 return document.getElementsByClassName(cls);
 }
 function getDateNum(e) {
 console.log(e && e.target.nodeName)//打印发生事件的元素，再获取元素nodeName
 if(e.target.nodeName=="LI"){//先判断nodeName是LI
 if(e.target.className!="gray"){//点击本月的日期，显示在日期栏
 change("content")[0].innerHTML = year+'年'+(month+1)+'月'+e.target.innerHTML+'日';
 }else{//点击灰色日期即（上个月或者下个月日期）切换到当月
 if(e.target.innerHTML>14){
 lastMonth();
 }else {
 nextMonth();
 }
 }
 }
 }
 //获取年、月
 var today = new Date();
 var year=today.getFullYear(), month = today.getMonth();
 var totalDay;
 var uls=$("date").children,list;
 function loadCalendar(){
 totalDay=getMonthDays(year,month+1);//计算一个月的天数
 var firstDay = (new Date(year,month,1)).getDay();//计算每个月1号在星期几
 var lastMonthDay=getMonthDays(year,month);
 var lastDayCal=lastMonthDay-firstDay+1;//计算上个月在第一行显示的天数
 //获取ul元素
 var num=1 ,nextNum=1;//日期显示
 // 类数组对象 转 数组
 //uls = Array.prototype.slice.call(uls)
 //获取li元素 填充
 for(var r=0;r<uls.length;r++){
 list=uls[r].children;//遍历ul,获得li
 for(var line=0;line<list.length;line++){
 if(r==0){//在第一行 与第一天进行判断 大于等于第一天时载入日期
 if(line>=firstDay){
 list[line].innerHTML=num++;
 list[line].setAttribute("class","");
 }else {
 list[line].innerHTML=lastDayCal++;//第一行的上个月天数显示
 list[line].setAttribute("class","gray");
 }
 }else {
 //判断是否超出天数 ,不超出则继续加，超出则显示下个月日期
 if(num<=totalDay){
 list[line].setAttribute("class","");
 list[line].innerHTML=num++;
 }else {
 list[line].innerHTML=nextNum++;//下个月日期显示
 list[line].setAttribute("class","gray");
 }
 }
 }
 }
 }
 loadCalendar();
 function getMonthDays(year,month){
 //判断2月份天数
 if(month==2){
 days= (year%4==0)&&(year%100!=0)||(year%400==0)? 29:28;
 }else {
 //1-7月 单数月为31日 
 if(month<7){
 days= month%2==1?31:30;
 }else {
 //8-12月 双月为31日
 days = month%2==0?31:30;
 }
 }
 return days; 
 }
 //右击箭头下个月
 //change("rf-tri")[0].onclick =
 function nextMonth() {
 month++;
 if(month>11){
 year+=1;
 month=0;
 }
 change("content")[0].innerHTML=year+"年"+(month+1)+"月"+"1日";
 //console.log(month+1);
 loadCalendar();
 }
 //左击箭头上个月
 //change("lf-tri")[0].onclick =
 function lastMonth() {
 month--;
 if(month<0){
 month=11;
 year-=1;
 }
 change("content")[0].innerHTML=year+"年"+(month+1)+"月"+"1日";
 //console.log(month+1);
 loadCalendar();
 }
 
 </script>
 </body>
</html>
牧安
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS简单点击事件＋获取时间
weixin_44495539的博客
10-31 4215
纪念第一个 简单写一个程序（获取系统时间） <button>点我</button> <div>看我</div> <script type="text/javascript"> var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.onclick = function(){ div.innerH
兼容FireFox 的 js 日历 支持时间的获取
10-30
2. JavaScript日历组件：文档描述了如何在JavaScript中实现一个日历组件，并提供了时间获取的功能。开发者通过编写JavaScript代码，构建了一个可以显示并选择日期、时间的日历界面。这个组件通常会用到JavaScript中...
JS日历制作获取时间
weixin_30497527的博客
10-29 150
1.直接获取 var myDate = new Date(); myDate.getYear();　　　　　　　　　　　　　　　　获取当前年份(2位) myDate.getFullYear(); 　　　　　　　　　　　　　　获取完整的年份(4位,1970-????) myDate.getMonth(); 　　　　　　　　　　　　　　　获取当前月份(0-11,0代表1月) myD...
JavaScript 获取点击事件（两个小例子）
weixin_30553065的博客
04-22 485
点击每个li节点，都弹出其文本值 1 <title>Insert title here</title> 2 3 <script type="text/javascript"> 4 5 //点击每个li节点，都弹出其文本值 6 7 ...
定制版日历可以点击日期获取日期
liwenhui的博客
06-30 344
A small calendar using jQuery. It can show the month you gave, show the active dates you set, get the month users selected, get the date users selected. var huicalendar = function(element, options){ this.element = element; this.enabledDay = option
js 日历控件
最新发布
weixin_48495574的博客
02-28 1102
仿日历的js代码
JS.rar_javascript 日历_js_日历 java
09-21
在本示例中，"JS.rar_javascript 日历_js_日历 java" 提供了一个关于JavaScript日历功能的实现，这通常用于网页中的日期选择器，让用户能够方便地选取日期。 日历组件是Web开发中常见的交互元素，特别是在表单中...
通过点击日历控件来动态获取查询统计信息
10-23
在这个场景下，`WdatePicker.js`是一个关键的角色，它是一个JavaScript库，提供了日期选择器的功能，使得用户能够方便地通过日历界面选择日期，从而动态地更新查询结果。 `WdatePicker.js`通常集成在网页中，配合...
日历以及时间轴
02-15
在实际编程中，日历和时间轴组件通常使用JavaScript库如FullCalendar、moment.js或React的react-big-calendar等实现。这些库提供了丰富的API，方便开发者构建交互式的日历和时间轴功能。同时，后端服务可能需要配合...
带有事件的简单 Javascript 日历
allway2的博客
05-29 1062
欢迎来到关于如何创建简单的纯 Javascript 日历的教程。您是否希望在不使用任何服务器端脚本的情况下开发日历 Web 应用程序？无论是商业项目、学校项目还是只是出于好奇——您来对地方了。本指南将引导您了解如何创建纯 Javascript 日历，所有这些都可以通过本地存储实现。继续阅读！ ⓘ 我在本教程开始时包含了一个包含所有源代码的 zip 文件，因此您不必复制粘贴所有内容……或者如果您只是想直接进入。 速记 如果您想将日历设置为从星期一开始一周，请cal.sMon = true在cale.
点击文本框弹出日历控件（可以选择日期）
04-28
实例，只要把JS代码调用就可以了，方法在文档里有写，非常详细，可以直接插入使用。
js-event-calendar:基于js的每日活动日历
05-16
js-event-calendar 基于js的每日事件日历创建一个函数，该函数接受一组对象，每个对象代表一个事件。 数组中的每个对象都有以分钟表示的开始和结束时间。 开始时间和结束时间表示为上午9点后的分钟。 例如{start：30，end：60}代表一个事件，该事件开始于9:30 am，结束于10am。 该函数获取对象，并将其绘制为垂直时间轴上的事件。 具有交叉的事件会将容器分成两半，而没有交叉的事件将占用整个容器的宽度。
漂亮的jQuery事件日历插件calendar.js
09-13
漂亮的jQuery事件日历插件calendar.js，在html可以只需要简单的引用，....................................................
很漂亮的js日历，时间从1970年到2040年，可以自己修改，在需要添加时间的标签上添加一个点击事件
10-09
很漂亮的js日历，时间从1970年到2040年，可以自己修改，在需要添加时间的标签上添加一个点击事件 onclick="new Calendar().show(this);"
js-calendar:需要日期或星期几的日期选择器和应用程序JavaScript日历天生成器
05-12
js日历 客户端或服务器端JavaScript程序包，用于为日期选择器和应用程序生成带有日期，星期几和星期几的日历。 提供星期几，星期几，月份信息，可以在星期一或星期几开始一周，还有其他一些很酷的东西。 安装 npm install js-calendar 演示版 您可以在找到浏览器的演示。 如果您想使用它，请检查 。 组件 - Generator - the main "Core" feature, a function to generate calendar days for the requested month - addLabels - the default iterator that adds basic CSS classes to each day object and labels for column head jsCalendar.generator 用法 //
JavaScript-日历生成器
weixin_30569001的博客
08-17 237
<!DOCTYPE html> 日历生成器 table{ width: 800px; table-layout:fixed; border-collapse:collapse; } table td{ padding:10px; border:1px solid #333; } table tr:first-of-type{ background-color:pink; } ...
基于jquery的带事件显示功能的日历板插件calendar.js
weixin_30344795的博客
04-27 1323
项目中需要用到一个日历板控件，要求能显示事件，于是想到了一年前在app项目上写的一个粗略版日历板，然后又想着这个可能以后还会用 于是我就封装了一下，能满足基本要求，如果有需要更多功能的也可以自行修改源码，源码未压缩未代码混淆且有注释。 封装的是基础版，仅能展示一般日历板功能和正常显示事件数据。 再往后就涉及到项目的业务了，就不便展示了。 以下为地址： https://gitee.com/...
2019年最佳JavaScript日历和事件日历脚本
代码教主
06-22 1004
您可能要在网站上使用日历脚本的原因有很多。 其中最常见的是列出和安排事件。 另一个用途是提供一个链接，以列出在特定日期发布的所有博客文章或新闻事件。 在某些情况下，您可能只是在寻找日期和时间范围选择器。 在这篇文章中，我将分享一些2019年最佳JavaScript日历脚本和插件的精选。 简单活动日历 我们列表中的第一个脚本是评级很高的“ 简单事件日历” 。 它基于jQuery，并支持...
js框架 dwz jui 的日历组件 添加自定义事件
wxljmy的专栏
10-09 4665
1.dwz.datepicker.js中     $.fn.datepicker = function(opts){         //alert('kk');         var onseldate=null;         onseldate=opts.onseldate;                             if (!dp.hasTime
FireFox兼容js日历插件，支持时间选择
"这篇资源是关于一个兼容Firefox浏览器的JavaScript日历组件的代码实现，它支持获取日期和时间。作者在代码中定义了各种变量和函数，如`cal`、`isFocus`、`pickMode`等，以及用于选择日期的`SelectDateById`和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值