首页 web前端 js教程 日期函数和对于函数封装的灵活运用

日期函数和对于函数封装的灵活运用

Jun 26, 2017 am 11:48 AM
demo javascript 制作 日历




   
   Title
   


   
   



   
       
           
           
           
           
           
           
           
       
   
   

<script><br>    /*<br>    * 获取指定年月份的日期总天数<br>    * 显示的月份的第一天是星期几?<br>    * */</p> <p>var yearSelectElement = document.querySelector('#yearSelect');<br>    var monthSelectElement = document.querySelector('#monthSelect');<br>    var tbody = document.querySelector('tbody');<br>    var strongElement = document.querySelector('strong');</p> <p>var nowDate = new Date();</p> <p>/*<br>    * 动态生成option<br>    * */<br>    var html = '';<br>    for (var i=1970; i<2100; i++) {<br/> if (i == nowDate.getFullYear()) {<br/> html = &#39;<option selected>'+ i +'</option>' + html;<br>        } else {<br>            html = '<option>'+ i +'</option>' + html;<br>        }</p> <p>}<br>    yearSelectElement.innerHTML = html;</p> <p>var html = '';<br>    for (var i=0; i<12; i++) {<br/> if (i == nowDate.getMonth()) {<br/> html += &#39;<option value="&#39;+i+&#39;" selected>'+ (i+1) +'</option>';<br>        } else {<br>            html += '<option value="&#39;+i+&#39;">'+ (i+1) +'</option>';<br>        }</p> <p>}<br>    monthSelectElement.innerHTML = html;</p> <p>/*<br>    * 默认显示当前年和月的日历<br>    * */<br>    calendar(nowDate.getFullYear(), nowDate.getMonth());</p> <p>/*<br>    * 根据选择的年和月重新生成日历<br>    * */<br>    yearSelectElement.onchange = monthSelectElement.onchange = function() {<br>        calendar(yearSelectElement.value, monthSelectElement.value);<br>    };</p> <p>function calendar(year, month) {<br>        year = Number(year);<br>        month = Number(month);<br>        strongElement.innerHTML = year + '年' + (month+1) + '月';</p> <p>var html = '<tr>';<br>        for (var i=1; i<=42; i++) {</p> <p>if (i%7 == 1 && i != 1) {<br>                html += '</tr><tr>';<br>            }</p> <p>var v = i- getFirstDay(year, month);</p> <p>if (v < 1 || v > getDays(year, month)) {<br>                html += '<td> </td>';<br>            } else {<br>                if (i % 7 == 1 || i % 7 == 0) {<br>                    html += '<td style="color: red">'+ v +'</td>';<br>                } else if (<br>                    year == nowDate.getFullYear()<br>                    &&<br>                    month == nowDate.getMonth()<br>                    &&<br>                    v == nowDate.getDate()<br>                ) {<br>                    html += '<td style="background: red; color:white;">'+ v +'</td>';<br>                } else {<br>                    html += '<td>'+ v +'</td>';<br>                }<br>            }</p> <p><br>        }<br>        html += '</tr>';<br>        tbody.innerHTML = html;<br>    }</p> <p>/*<br>    * 获取指定显示年月份的日期总天数<br>    * */<br>    function getDays(y, m) {<br>        return new Date(y, m+1, 1, -1, 0, 0).getDate();</p> <p>/*<br>        * 得到下一月的1日,-1时0分0秒的日期<br>        * -1 : 其实就是前一天,表示就是上个月的最后一天的23时<br>        * */<br>        var date = new Date(y, m+1, 1, -1, 0, 0);<br>        /*<br>        * 上个月最后一天的日期其实就是上个月总的天数<br>        * */<br>        return date.getDate();<br>    }</p> <p>/*<br>    * 获取指定显示的年月份的第一天是星期几<br>    * */<br>    function getFirstDay(y, m) {<br>        return new Date(y, m, 1).getDay();<br>    }<br></script>

以上是日期函数和对于函数封装的灵活运用的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1671
14
CakePHP 教程
1428
52
Laravel 教程
1331
25
PHP教程
1276
29
C# 教程
1256
24
win11双屏幕日历在第二台显示器上不存在怎么办? win11双屏幕日历在第二台显示器上不存在怎么办? Jun 12, 2024 pm 05:47 PM

在Windows11中组织日常工作和例行公事的一项重要工具是在任务栏中显示时间和日期。此功能通常位于屏幕的右下角,可让您即时访问时间和日期。通过单击此区域,您可以调出日历,从而更轻松地检查即将到来的约会和日期,而无需打开单独的应用程序。但是,如果您使用多个显示器,则此功能可能会遇到问题。具体来说,虽然时钟和日期显示在所有连接的显示器上的任务栏上,但单击第二个显示器上的日期和时间来显示日历的功能不可用。截至目前,此功能仅在主显示屏上起作用-它与Windows10不同,在Windows10中,单击任

win10日历显示周数 win10日历显示周数 Jan 04, 2024 am 08:41 AM

很多用户们想要通过win10日历这个工具来查看当前天数,但是日历不会自动显示这一功能,其实我们只需要通过简单的设置,就能够看到今年的累计周数了哦~win10日历显示周数设置教程:1、在桌面左下角的搜索中输入日历并且打开应用。2、在打开的日历应用中,点击左下角的“齿轮”图标后,会在右侧弹出设置,我们点击“日历设置”3、继续在打开的日历设置中,找到“周数”然后将周数选项调整到“一年中的第一天”即可。4、在完成以上设置后,点击“周”即可看到今年的周数统计了。

Outlook日历不同步; Outlook日历不同步; Mar 26, 2024 am 09:36 AM

如果您的Outlook日历无法与Google日历、Teams、iPhone、Android、Zoom、Office帐户等同步,请执行以下步骤来解决问题。日历应用程序可以连接到其他日历服务,如谷歌日历、iPhone、安卓、微软Office365等,这是非常有用的,因为它可以自动同步。但如果OutlookCalendar无法与第三方日历同步怎么办?可能的原因可能是选择错误的日历进行同步,日历不可见,后台应用程序干扰,过时的Outlook应用程序或日历应用程序,等等。修复Outlook日历不同步的初步

demo是什么意思 demo是什么意思 Feb 12, 2024 pm 09:12 PM

demo这个词对于喜欢唱歌的小伙伴已经不在陌生了,但是有很多没有接触到的用户好奇了demo是什么意思呢?现在就来看一下小编带来的demo的含义介绍吧。demo是什么意思答案:录音样带。1、demo读音英['deməʊ]、美['demoʊ]2、demo是"demonstration"的缩写,一般指歌曲正式录制前试听的初步效果;3、demo用作名词是录音样带和试样唱片的意思,用动词是试用(尤指软件)、演示和示范;

无法打开win10右下角的日历 无法打开win10右下角的日历 Dec 26, 2023 pm 05:07 PM

有使用win0系统的小伙伴有遇见win10日历打不开的情况,这个是正常的电脑的小故障而已,在win10系统的隐私设置里可以解决,今天小编带来了详细的解决方法,下面大家一起来看看吧。win10右下角的日历打不开解决方法1、在win10系统中点击开始→点击上方的程序列表按钮→往下找到拼音(中文)R→日历2、初次使用,可能新事件会点不开(鼠标靠上去,不会有选中的深蓝色),可以在隐私中设置一下。点击桌面左上方的三道杠图标→底部就会有设置菜单;3、在弹出的界面中点击隐私;4、如果之前使用过设置,可以点击左

如何阻止Outlook自动将事件添加到我的日历 如何阻止Outlook自动将事件添加到我的日历 Feb 26, 2024 am 09:49 AM

作为一款电子邮件管理器应用程序,MicrosoftOutlook允许我们安排活动和约会。它通过提供在Outlook应用程序中创建、管理和跟踪这些活动(也称为事件)的工具,使我们能够保持有序。然而,有时会将不需要的事件添加到Outlook中的日历中,这会给用户造成混乱,并向日历发送垃圾邮件。在本文中,我们将探讨可帮助我们防止Outlook自动将事件添加到我的日历中的各种方案和步骤。Outlook活动-简要概述Outlook事件具有多种用途,并具有许多有用的功能,具体如下:日历集成:在Outlook

win10日历事件没有弹窗提醒怎么办? win10日历事件提醒没了的恢复方法 win10日历事件没有弹窗提醒怎么办? win10日历事件提醒没了的恢复方法 Jun 09, 2024 pm 02:52 PM

日历可以帮助用户们记录下你的行程,甚至还可以设置提醒,但是也有不少的用户们在询问win10日历事件提醒不弹出怎么办?用户们可以先检查一下windows更新情况或者是清除windows应用商店缓存来进行操作就可以了。下面就让本站来为用户们来仔细的介绍一下win10日历事件提醒不弹出问题解析吧。添加日历事件在系统菜单中点击“日历”程序。鼠标左键点击日历中的日期。在编辑窗口输入事件名称和提醒时间,点击“保存”按钮即可添加事件了。win10日历事件提醒不弹出问题解决

win11时间老是不准确怎么解决?Win11时间调整教程快速解决时间不准确问题 win11时间老是不准确怎么解决?Win11时间调整教程快速解决时间不准确问题 Apr 19, 2024 am 09:31 AM

如果您的Windows11计算机显示时间错误,可能会导致很多问题,甚至阻止您连接到互联网。事实上,当系统显示不正确的日期和时间时,某些应用程序会拒绝打开或运行。那么应该如何解决这个问题呢?下面一起来看看吧!方法一:1、我们首先右键点击下方任务栏空白处,选择任务栏设置2、在任务栏设置中找到右侧的taskbarcorneroverflow3、然后在它上方找到clock或时钟选择开启即可。方法二:1、按下键盘快捷键win+r调出运行,输入regedit回车确定。2、打开注册表编辑器,在其中找到HKEY

See all articles