js实现简单的日历显示效果函数示例

最新推荐文章于 2024-05-17 14:54:19 发布
最新推荐文章于 2024-05-17 14:54:19 发布
阅读量452 收藏
点赞数
分类专栏： web前端 文章标签： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yandaxia6666/article/details/103238105
版权
本文实例讲述了js实现简单的日历显示效果函数。分享给大家供大家参考，具体如下：用一个函数简单的实现一个月份的日历，效果如下：这个日历效果有高亮显示，我实现的思维比较简单。我把上面的日历效果用表格table生成，分成两个部分。第一个部分：就是前面的第一排，我用一行<tr></tr>显示，这一部分表示的上个月份留下来的日期和这个月份的日期的...
摘要由CSDN通过智能技术生成

本文实例讲述了js实现简单的日历显示效果函数。分享给大家供大家参考，具体如下：

用一个函数简单的实现一个月份的日历，效果如下：

这个日历效果有高亮显示，我实现的思维比较简单。

我把上面的日历效果用表格table生成，分成两个部分。

 

 

 

第一个部分：就是前面的第一排，我用一行<tr></tr>显示，这一部分表示的上个月份留下来的日期和这个月份的日期的混合日期；

第二部分：就是剩下的所有排，这里我用五行<tr></tr>显示，这一部分表示的是这个月份和下个月份的日期的混合日期。

这里为什么要用6行<tr></tr>来显示日历的效果呢？原因是有的月份跨越了6行，所以为了兼容所有的月份，只好用6行了。

下面是代码：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.cxybcw.com/>

<html xmlns="http://www.cxybcw.com/" xml:lang="zh-cn">

<head>

 <meta http-eq
最低0.47元/天 解锁文章
yandaxia6666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js双日历控件，同时显示两个日期选择器
09-15
Js双日历控件，在一个网页上同时显示两个日期选择器，写成了封装类，方便使用者调用。同时美化的相当不错。 　　包括了以下函数： 　　1、2012——2020年节假日信息（包括节假日前1~3天/后1~3天） 　　2、格式化数字，不足两位前面补0 　　3、将日期对象/日期字会串格式化为指定日期字符串 　　4、将日期字符串格式化为数字 　　5、获取目标元素针对于文档的位置 　　6、元素选择器 　　7、查找元素位置 　　8、判断目标元素是否包含指定的className 　　 　　关于一些日历调用的参数说明：Calendar({ 　　 id: "#J_date_1", //触发显示日历元素ID 　　 isPopup: !0, //弹出式日历 　　 isPrevBtn: !0, //显示上月按钮 　　 isNextBtn: !0, //显示下月按钮 　　 isCloseBtn: !0, //显示关闭按钮 　　 isHoliday: !0, //节假日特殊显示 　　 isHolidayTips: !0, //显示节假日1~3天/后1~3天信息 　　 isDateInfo: !0, //显示日期信息 　　 isMessage: !0, //有日历提示信息 　　 isCalStart: !0, //标记为开始时间 　　 dateInfoClass: "date-info-start", //开始时间icon样式 　　 range: {mindate: "2011-09-01", maxdate: "2020-12-31"},//限制范围（当天——2020-12-31） 　　 count: 2, //日历个数 　　 monthStep: 1, //切换上下月日历步长 　　 onSelectDate: fnSelectDate, //选择日期回调方法 　　 onClose: fnClose //关闭日历回调方法
JS实现日历
热门推荐
仄言的博客
12-13 1万+
JS 实现日历 最近在学JS，分享一些使用js实现的网页，后续还会更一些关于js的例子，话不多说，直接附上源码，源码上有注释。 js 实现日历主要 运用Date函数,这里就不在多讲Date的用法，因为并不是很难，所以想要了解的朋友可以去网上自行搜索，有很多的讲解！ &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&a
使用js实现一个日历
最新发布
eren_yeger的博客
05-17 199
首先在html里面写一个div。下面是js部分的代码。
原生Js日历控件-多种状态可选
weixin_33721427的博客
06-01 165
早就想自己写个日历控件练练手了，可惜一直没时间。 项目里一直都在用Jquery的日期控件，慢慢的需求增多了，不想改别人的，但是网站上放2个以上同功能的控件又不和谐，所以决定自己写一个。 照着淘宝的样式做了一个，目前实现了几种形态： 1.单月/双月的显示 2.年月是否可选 3.今日以前的日期是否可选 支持多个input 兼容ie/ff/chrome 在线预览地址：http://js...
js显示两个日期之间的所有日期显示
李特成的博客
01-03 483
function Todo(startDate, endDate) { //日期范围之内 var ab = startDate.split("-"); var ae = endDate.split("-"); var db = new Date(); db.setFullYear(ab[0], ab[1] - 1, ab[2]); var de = new Date(); de.set
js实现日历
Phoenix_19880101的博客
04-20 181
有这样一个普通的日历需求 第一反应就是找插件，结果找到了，但是改起来非常麻烦，然后查下实现的原理，发现原来很简单，于是自己实现了一个。 首先分析一下这个组件，每页显示的是 当前月的所有日期及所占据的行剩下的格子所属的上一个月的最后几天或下一个月的前几天。 然后，神奇的Date类型原来可以这样获取日期实例： new Date(2018,4,0) // 2018年5月第一天的Date...
JS简单实现移动端日历功能示例
11-27
在本文中，我们将探讨如何使用JavaScript（JS）在移动端实现一个简单日历功能。这个示例展示了一个基础的日历界面，具有显示上个月和下个月日期的选项。首先，我们来解析HTML结构和CSS样式，然后深入理解JavaScript...
js编写当天简单日历效果【实现代码】
10-22
完整的JavaScript日历代码示例如下： ```html <!DOCTYPE html> <title>JavaScript 日历 /* 添加必要的样式 */ <div id="calendar"></div> function createCalendar() { // ... 以上提到的所有逻辑 ...
JavaScript实现简单的日历效果
11-26
总结来说，这个简单的JavaScript日历模板提供了一个基础框架，你可以在此基础上扩展，例如添加日期选择功能、添加节假日标记、支持多语言等。通过理解并实践这些核心函数，你可以更好地掌握JavaScript处理日期和时间...
js写简单日历
Myd
11-22 4136
写日历主要的是要搞清楚2点：1，每个月的第一天是周几？ 2，每个月有多少天？清楚这2个之后就可以完成一个最简单的日历了。而这2个问题可以轻易的调用js的api获取到。
JS双月份显示联动效果，点击日期浮出消息提示
weixin_33739627的博客
04-03 85
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &l
html制作日历备忘录,原生JS代码制作带记事备忘功能的双月份显示效果的日历
weixin_36308543的博客
06-20 768
原生JS写的日历月历 - demo by js.alixixi.comwindow.onload = function(){function $(id){return typeof id === "string" ? document.getElementById(id) : id;}function lightBoxShow(title,str){var oWin = $("win");var ...
vue实现简单的数据筛选
huihuihaha222222的博客
06-26 2705
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv...
用原生js dom table写的日历小demo，展示一年的日历并标记自定义日期
qq_44927883的博客
08-12 687
一、主要函数 /* * 生成十二个月的日历 * year：年份 * dataObj：传入的时间数据,年月日 * data：需要标注的日期，日期需要正序排列 * separator：时间的分隔符 * div：父组件div组件 */ function generateCalendar(obj){ let year = obj.year; let dataObj = obj.dataObj; let data = dataObj.data; let
JS实现以日历形式显示当前时间
diaoguosui6417的博客
07-24 337
效果图： 1 <script language="Javascript"> 2 var datelocalweek=new Array("星期日", "星期一", "星期二","星期三","星期四", "星期五","星期六"); 3 var datelocalnow=new Date(); 4 var datelocalyear=dateloc...
JS 日历
u013791665的博客
06-08 386
因为业务需求需要一个日历面板，然后就摸索了，接下来我来分享一下简单日历的制作原理。 　　 　　首先，我们要知道的是一年里面的每个月的天数，很显然这个问题我记得小学的时候我们老师就讲过，提起左手握拳，然后数食指到小拇指之间的间隙，一月大、二月小、三月大、四月小、五月大、六月小、七月大、八月大、九月小、十月大、十一月小、12月大。 　　 　　通过这样的数数，我们可以得到一年中每个月的天数，当然二
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值