纯js实现日历控件

最新推荐文章于 2024-05-17 14:54:19 发布
最新推荐文章于 2024-05-17 14:54:19 发布
阅读量3.2k 收藏 2
点赞数 2
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39877284/article/details/81613258
版权

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>日历</title>

        <script type="text/javascript">
            var outDiv =null ;//全局变量
            var table = null ;
            function createOutDiv(){
                var mydate = new Date();
                var year = mydate.getFullYear();//年
                var month = mydate.getMonth();//月
                var day = mydate.getDate();//日

                if(outDiv!=null){
                    document.body.removeChild(outDiv);
                    outDiv= null ;
                }

                outDiv = document.createElement("div");
                outDiv.style.width = "200px";
                outDiv.style.height = "200px";
                outDiv.style.border = "1px red solid";

                var topDiv = document.createElement("div");
                topDiv.style.width = "200px";
                topDiv.style.height = "30px";
                topDiv.style.backgroundColor = "lightgray";

                var leftDiv = document.createElement("div");
                leftDiv.style.width = "20px";
                leftDiv.style.height = "20px";
                leftDiv.style.backgroundColor = "greenyellow";
                leftDiv.innerHTML = "<" ;
                leftDiv.style.textAlign="center";
                leftDiv.style.marginTop = "5px";
                leftDiv.style.marginLeft = "5px";
                leftDiv.style.float = "left";
                leftDiv.style.lineHeight = "1em";
                leftDiv.style.cursor = "pointer";

                var rightDiv = document.createElement("div");
                rightDiv.style.width = "20px";
                rightDiv.style.height = "20px";
                rightDiv.style.backgroundColor = "greenyellow";
                rightDiv.innerHTML = ">" ;
                rightDiv.style.textAlign="center";
                rightDiv.style.marginTop = "5px";
                rightDiv.style.marginRight = "5px";
                rightDiv.style.float = "right";
                rightDiv.style.lineHeight = "1em";
                rightDiv.style.cursor = "pointer";

                var centerDiv = document.createElement("div");
                centerDiv.style.width = "130px";
                centerDiv.style.height = "20px";
                centerDiv.style.marginLeft = "10px";
                centerDiv.style.marginTop = "5px";
                centerDiv.style.float = "left";
                centerDiv.style.backgroundColor = "gold";
                centerDiv.innerHTML = year+"年"+(month+1)+"月"+day+"日";
                centerDiv.style.textAlign="center";
                centerDiv.style.lineHeight = "1em";

                leftDiv.onclick = function(){
                    mydate.setMonth(mydate.getMonth()-1);
                    centerDiv.innerHTML = mydate.getFullYear()+"年"+(mydate.getMonth()+1)+"月"+mydate.getDate()+"日";
                    if(table != null){
                        outDiv.removeChild(table);
                        table = null;
                    }
                    createTable(mydate);
                }

                rightDiv.onclick = function(){
                    mydate.setMonth(mydate.getMonth()+1);
                    centerDiv.innerHTML = mydate.getFullYear()+"年"+(mydate.getMonth()+1)+"月"+mydate.getDate()+"日";
                    if(table != null){
                        outDiv.removeChild(table);
                        table = null;
                    }
                    createTable(mydate);
                }

                topDiv.appendChild(leftDiv);
                topDiv.appendChild(centerDiv);
                topDiv.appendChild(rightDiv);
                outDiv.appendChild(topDiv);
                document.body.appendChild(outDiv);

                createTable(mydate);//调用创建表格方法
            }

            function createTable(mydate){
                table = document.createElement("table");
                table.border = "1px"
                table.style.textAlign = "center";
                table.width = "200px" ;
                table.height =  "170px";
                var week = ["日","一","二","三","四","五","六"];
                var d = new Date();//获取当前日期
                d.setFullYear(mydate.getFullYear());
                d.setMonth(mydate.getMonth());
                var month = d.getMonth();
                d.setDate(1);//将当前日期设置成此月份的1号
                var w = d.getDay() ;
                d.setDate(d.getDate()-w);

                var time = new Date();

                var color ;
                for(var i = 0 ; i < 7 ; i++){
                    var tr = document.createElement("tr");
                    for (var j = 0 ; j < 7 ; j++ ) {
                        var td = document.createElement("td");
                        tr.appendChild(td);//td追加到tr中
                        if(i == 0){ //是否是第一行
                            td.innerHTML = week[j] ;
                            td.style.fontWeight = "bold";//字体加粗
                        }else{
                            td.title = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();

                            if( j == 6 || j == 0){
                                td.style.color = "red";
                            }

                            if(d.getMonth() != month){
                                td.style.color = "gray";
                            }

                            td.style.cursor = "pointer";//设置鼠标
                            td.onmouseover = function(){
                                color = this.style.backgroundColor;
                                this.style.backgroundColor = "aqua";

                            }

                            td.onmouseout = function(){
                                this.style.backgroundColor = color ;
                            }

                            td.onclick = function(){
                                var inputObj = document.getElementById("putid");
                                inputObj.value = this.title;
                                if(outDiv!=null){
                                    document.body.removeChild(outDiv);
                                    outDiv = null ;
                                }
                            }

                            if(time.getFullYear()==d.getFullYear() && time.getMonth() == d.getMonth() && time.getDate() == d.getDate()){
                                td.style.backgroundColor = "green";
                                td.style.fontWeight = "bold";
                                td.style.textDecoration = "underline";
                            }

                            td.innerHTML = d.getDate() ;
                            d.setDate(d.getDate()+1);//每循环一次日期加1天
                        }
                    }
                    table.appendChild(tr);//tr追加到table中
                }
                outDiv.appendChild(table);//table追加到outDiv中
            }


        </script>

    </head>
    <body>
        <input type="text"  placeholder="请输入日期" onclick="createOutDiv()" id="putid">



    </body>
</html>
林小康
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 的日历控件
xinpenyou的专栏
06-27 1067
日历控件是我们经常使用的，本文把常用的几款日历总结如下。 1.下拉日历梅花雨版第1款点评：最经典的几乎完美了。代码：...@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>html  >head runat="server">    titl
js 生成日历控件
NET情歌专栏
05-22 727
/*************************************************/         //创建时间         var createTime = new Array();         //事务标题         var caption = new Array();         //事务类型         var type = new A
日历插件超简单好用功能强大的插件(附有源码文件和使用说明)
09-20
日历插件超简单好用功能强大的插件，本插件引入方便，界面美观，在开发过程中是一个很好的日历插件(附有源码文件和使用说明)
js实现日历组件
weixin_45493439的博客
09-08 4182
下载好之后需要在文件里的最后一行加入默认导出 calendar,(不加也行)calendar 是一个根据阳历转阴历的封装方法;
使用js实现一个日历
最新发布
eren_yeger的博客
05-17 197
首先在html里面写一个div。下面是js部分的代码。
v-calendar 日历组件使用&自定义提示内容
jinse29的博客
11-09 5357
最近项目中用到了日历插件，需要统计每天的任务数量，类似elementui的badge组件，待办任务数量大概最后的效果如下图所示，右上角把代办任务数量展示出来vue的日历相关组件挺多的，选了v-calendar，后期翻API有点难受，中文版不太好找，简单记录下。
vue实现农历日历插件——vue-jlunar-datepicker插件的使用——技能提升
yehaocheng520的博客
03-17 5364
vue实现农历日历插件——vue-jlunar-datepicker插件的使用——技能提升
uniapp日历插件
qingdi1的博客
04-24 2740
【代码】uniapp日历插件。
纯javascript版日历控件
10-21
【纯JavaScript日历控件详解】 在Web开发中，日历控件是一种常见的交互元素，用于用户选择日期。本文将详细介绍如何使用纯JavaScript创建一个简单的日历控件，无需依赖任何外部库，如jQuery或其他框架。 首先，...
纯javascript制作日历控件
10-23
本文给大家分享的是使用纯javascript实现的日历控件的代码，笔者也是第一次写控件，摸索着前行，
javascript实现日历控件(年月日关闭按钮)
10-27
接下来，我们来看JavaScript代码实现这个日历控件： ```javascript sx.activex.calender = { bind: function(target) { // 创建HTML元素 // ... // 绑定事件，填充年份和月份下拉框 // ... // 设置样式 ...
多样式js日历控件选择器代码
06-24
JavaScript日历控件通常是用JavaScript代码动态生成的，可以自定义样式、行为以及与用户交互的方式。 "多样式"一词表明这个日历控件支持多种视觉样式，这意味着开发者可以根据网页的整体设计自由调整控件的外观，以...
日历插件fullcalendar【前端】
小心星的博客
03-31 2002
日历插件fullcalendar【笔记】
js日历组件
weixin_45195355的博客
12-29 626
【代码】js日历组件。
了解Vue中日历插件Fullcalendar
强者惜字如金，弱者废话连篇！
01-18 3309
了解Vue中日历插件Fullcalendar
日历组件封装 —— (Vue 和 JS两种方式实现)
dabaooooq的博客
02-14 1429
分三个模块，日期面板、年份面板、月份面板。所有事件，利用事件代理方式，只绑定根元素点击事件，最后触发子节点通过冒泡触发事件。公共store，用于响应数据的变化，及时去创建或更新面板。
好用的日历插件（三款常用的日历插件）
热门推荐
heerey525
11-05 1万+
1、laydate  https://www.layui.com/laydate/ 全面重写的 layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。内置强劲的自定义日期格式解析和合法校正机制，含中文版和国际版，主题简约却又不失灵活多样。由于内部采用的是零依赖的原生 JavaScr...
精心挑选12款优秀的 JavaScript 日历和时间选择插件
Tizian的专栏
10-16 1781
今天这篇文章向大家分享12款精心挑选的优秀 JavaScript 日历和时间选择插件，都带有详细的使用教程和效果演示。这些插件能够帮助 Web 开发人员更快速的实现各种精美的日历和时间选择效果。同时推荐阅读的博文中还有更多实现各种网站功能的 jQuery 优秀插件，欢迎大家可以去淘金。 1. The Coolest Calendar 界面非常漂亮的一款日期选择插件，有详细的使用文档，最
vue实现简单的数据筛选
huihuihaha222222的博客
06-26 2703
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv...
DHTML日历控件：PHP与JavaScript实现
本文将深入探讨这个PHP+JavaScript日历控件的实现细节，以便于开发者理解并可能应用到自己的项目中。 首先，日历控件的核心是JavaScript部分，它负责在用户界面上动态生成和交互。在提供的代码中，我们看到一个名为...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值