JavaScript日历

最新推荐文章于 2024-04-06 09:56:33 发布
最新推荐文章于 2024-04-06 09:56:33 发布
阅读量403 收藏 1
点赞数 1
分类专栏： JS程序 文章标签： js日历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FreMePst/article/details/83000246
版权

Data

var my_date = new Date();

方法 描述
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)
getTime() 返回 1970 年 1 月 1 日至今的毫秒数

JavaScript Date 对象

语法：var myDate = new Date()
getDate(); 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay(); 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth(); 从 Date 对象返回月份 (0 ~ 11)。
getFullYear(); 从 Date 对象以四位数字返回年份。

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>my_calender</title>

<meta name="description" c1ontent="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    	<div class = "calendar">
    		<div class = "title green ">
    			<h1 id="calendar-title">Month</h1>
    			<h2 id = "calendar-year">Year</h2>
    			<a href="" id = "pre"></a>
    			<a href="" id = "next"></a>
    		</div>
    		<div class = "body">
    			<div class ="body-list purpleblue ">
    				<ul>
    					<li>MON</li>
    					<li>TUE</li>
    					<li>WED</li>
    					<li>THU</li>
    					<li>FRI</li>
    					<li>SAT</li>
    					<li>SUN</li>
    				</ul>
    			</div>
    			<div class="body-list">
    				<ul id = "days">
    				</ul>
    			</div>
    	</div>
    	<script type="text/javascript" src="calendar.js"></script>
</body>
</html>

css

*{/*通配符设置全局box位置，权重为0，随时更改*/
	margin: 0;
	padding: 0;
}
body{
	background: #f2f2f2;

}
 .calendar{
 	margin: 45px auto;/*居中显示*/
	width: 450px;
 	height: 350px;
 	background: #fff;
 	box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);
 }
 .title{
 	height: 70px;
 	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 	text-align:center;/*文本对齐方式 left right center*/
	position: relative;
 }
 .body-list ul{
	width: 100%;
	font-size: 14px;
	font-weight: bold;
 }
 .body-list ul li{
 	width: 14.28%;
 	height: 36px;
 	line-height: 36px;
 	float:left;	/*设置横向显示*/
 	list-style-type:none;/* 去除ul的点*/
 }
.purpleblue{
	color: #3399FF;
}
.green{
	color:#6ac13c;
}

JavaScript

!function(){
	console.log("code start");
	var ex_month = [31,29,31,30,31,30,31,31,30,31,30,31];
	var no_month	= [31,28,31,30,31,30,31,31,30,31,30,31]
	var month_name = ["January","Febrary","March","April","May","June","July","Auguest","September",
	"October","November","December"];
	var str = "";
	var cmonth = document.getElementById("calendar-title");
	var cyear = document.getElementById("calendar-year");
	var day = document.getElementById('days');
	var pre = document.getElementById('pre');
	var next = document.getElementById('next');

	var my_date = new Date();
	var my_year = my_date.getFullYear();
	var my_month = my_date.getMonth();

	function display(){
		var str = "";
		var startDay = dayStart(my_year,my_month);
		var total = judge(my_year);
		for(var i = 1;i<startDay;i++){
			str += "<li class = 'gray'>" +"</li>"
				
		}
		for(var i=1 ;i<=total;i++){
			str += "<li>" +i+"</li>"
				
		}
		day.innerHTML = str;
		cmonth.innerHTML = month_name[my_month];
	    cyear.innerHTML = my_year; 
	}
	pre.onclick = function(e){
		e.preventDefault();
		my_month--;
		if (my_month<0) {
			my_year--;
			my_month = 11;
		}

		display();
		
	}
	next.onclick =function(e){
		e.preventDefault();
		my_month++
		if(my_month>11){
			my_year++;
			my_month = 0;
		}

		display();
	}
	function dayStart(year,month){
		var tempdate = new Date(year,month,1)
		return (tempdate.getDay());
	}
	function judge(year){
	var temp = year%4;
	return(temp == 0 ? ex_month[my_month] :no_month[my_month]);
	}
	display();
}()

2018.10.11
2018.10.14

参考
https://zhuanlan.zhihu.com/p/26401052
https://codepen.io/B8bop/pen/GhCAb

ShanCW
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Date.getTime() 方法
J2EE
11-18 5万+
getTime 方法返回一个整数值，这个整数代表了从 1970 年 1 月 1 日开始计算到 Date 对象中的时间之间的毫秒数。举例如下：student.setCreateTime(randomDate("2008-01-01","2008-03-01"));private static Date randomDate(String beginDate,String endDate)
ComposeUI——日历控件（CalendarComponent）
lifeidroid的专栏
11-15 1281
可选择日期范围的日历控件
date.gettime()返回的是什么？
热门推荐
heming621的专栏
12-20 11万+
（一） java.util.Date  -----------  date.getTime()返回的是什么？  问题：  -------------  Date date = new Date();  System.out.println(date.getTime());  输出结果是1210745780625  编译时间当时时间大概是2008年5.14好14.1
推荐开源项目：Calendar.js - 简洁而强大的JavaScript日历库
最新发布
gitblog_00085的博客
04-06 938
推荐开源项目：Calendar.js - 简洁而强大的JavaScript日历库 项目地址:https://gitcode.com/hippo-yuan/Calendar.js Calendar.js 是一个由 Hippo Yuan 开发的轻量级、高度可定制的 JavaScript 日历组件。这款库旨在简化网页中的日期选择功能，提供灵活的API和丰富的自定义选项，使得开发者可以快速集成并按照自己的...
Date的getTime方法和时区
huawencai的博客
08-10 8464
工作中遇到了一个非常奇怪的问题， 我的电脑上运行获取时间戳是对的， 而服务器上运行的时间戳是错误， 找了半天， 原来是由于服务器时区不对， 但是也发现了getTime()和时区有关系 String centralTime = getCentralTime(); SimpleDateFormat simpleDateFormat = new SimpleDateF...
date.gettime()返回的是什么,以及格式化日期模板
sinat_30474567的博客
06-02 5124
Date date = new Date(); System.out.println(date.getTime()); 输出结果是1210745780625 你想得到时间格式为2008-05-14这种吧? date.getTime()所返回的是一个long型的毫秒数 获取特定格式的时间需要格式化的。 例子： SimpleDateFormat sdf = new SimpleDat
javascript日历
05-26
NULL 博文链接：https://overbin.iteye.com/blog/513723
JavaScript日历实现代码
10-28
写过很多日历，大多都是显示用的，最近项目中要用到可精确到秒的时间选择器，于是就动手写了个。
JavaScript最简单的方式写万年历
qq_57218752的博客
12-17 4555
万年历 话不多说，直接进入主题，刚开始想写万年历的时候也想过要不要写一个复杂一点的出来，后来哦脑子容量有限就不自作自受了，毕竟bug太容易写出来了调试也确实烦的一批。 下面先看看预想的效果图吧· 我想的是先弄出一个弹框，输入指定的年份，然后在实现万年历的日历，没有具体的功能，主要懒得写，就简简单单的出一个日历就好了。 下面就是代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
JavaScript的Date对象制作万年历
yinghanhanhan的博客
12-10 847
在页面上添加两个标签，用来显示年份和月份；同时添加两个标签，一个用来显示星期，另一个用来显示日期。在JavaScript脚本中动态添加年份和月份，获取当前日期的年份和月份，显示到标签上。根据标签上显示的value值，获取当前选中年月的第一天是星期几，并绘制空标签。获取当前选中的年月一共有多少天，并绘制对应的标签。为两个标签设置onchange时间。选择不同的年份和月份，在页面中显示当前月的日历。
JavaScript实现简单日历效果
10-14
主要为大家详细介绍了JavaScript实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
梅花日历控件V3.0
03-01
博文链接：https://yxgyh.iteye.com/blog/237930
日历实例，绝对实用
05-08
内含多个日历源码，需要可下载。我也是收集大家的例子，大家资源共享一下。
JavaScript 日历
allway2的博客
05-29 215
HTML <!DOCTYPE html> <html> <head> <title>Vanilla JS Calendar</title> <meta charset="UTF-8"> <meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta content="widt...
JavaScript实现日历功能
The_RedMaple的博客
10-14 924
运行效果 实现代码 <html> <head> <script> window.onload = function(){ //寻找某个月有多少天 var findDays = function(month){ if(month == 0 || month == 2 || month == 4 || month..
Javascript实现万年历（日历表）
南 墙
12-09 1万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main { width: 800px; margin: 0 auto; } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值