(转)js日历特效

最新推荐文章于 2022-03-04 17:30:03 发布
最新推荐文章于 2022-03-04 17:30:03 发布
阅读量879 收藏
点赞数
分类专栏： html/div+css/js 文章标签： js 日历

在做项目的时候，需要一个日历的功能，于是乎，在网上找到了这个，放置于此，以供学习！

代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>日历组件示例</title>
    <style>
        .calendar{font-family:Tahoma; background:#fff; float:left; border-style:solid; border-width:1px; border-color:#85BEE5 #3485C0 #3485C0 #85BEE5; position:relative; padding:10px; }
        .calendar dl,.calendar dd{margin:0; padding:0; width:183px; font-size:12px; line-height:22px;}
        .calendar dt.title-date{ display:block; border-bottom:1px solid #E4E4E4; font-weight:700; position:relative; margin-bottom:5px; padding-bottom:3px;}
        .calendar dt{ float:left; width:25px; margin-left:1px; text-align:center;}
        .calendar dt.title-date{ width:100%;}
        .calendar dd{clear: both;width: 183px;height: 139px;font-weight: 700;background:url(http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_bg.png) no-repeat; margin:0;}
        .prevyear,.nextyear, .prevmonth,.nextmonth{cursor:pointer;height:9px; background:url(http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_nextprv.png) no-repeat; overflow:hidden;position:absolute; top:8px; text-indent:-999px;}
        .prevyear{  left:4px;  width:9px;}
        .prevmonth{ width:5px; background-position:-9px 0; left:20px;}
        .nextyear{  width:9px; background-position:-19px 0; right:5px;}
        .nextmonth{ width:5px; background-position:-14px 0; right:20px;}
        .calendar dd a{float: left;width: 25px;height: 22px; color:blue; overflow: hidden; text-decoration: none;
            margin: 1px 0 0 1px; text-align:center;}
        .calendar dd a.disabled{color:#999;}
        .calendar dd a.tody{ color:red; }
        .calendar dd a.on{background:blue; color:#fff;}
        .calendar dd a.live{cursor:pointer}
        .input{ border:1px solid #ccc; padding:4px; background:url(http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_nextprv.png) no-repeat right -18px;}
    </style>
</head>
<body>
<br/>
<br/>
<h3>支持选择年月          支持SELECT选择年月</h3>
<div><input type="text" id="j_Date1" class="input">          <input type="text" id="j_Date2" class="input"></div>
<br/>
<select name="IE6" >
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6" >
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select>
<select name="IE6">
    <option>测试IE6</option>
    <option>2</option>
    <option>3</option>
</select>
<div></div>
<!--日历控件JS源码-->
<script>
/**
 * @namespace _CalF
 * 日历控件所用便捷函数
 * */
_CalF = {
    // 选择元素
    $:function(arg,context){
        var tagAll,n,eles=[],i,sub = arg.substring(1);
        context = context||document;
        if(typeof arg =='string'){
            switch(arg.charAt(0)){
                case '#':
                    return document.getElementById(sub);
                    break;
                case '.':
                    if(context.getElementsByClassName) return context.getElementsByClassName(sub);
                    tagAll = _CalF.$('*',context);
                    n = tagAll.length;
                    for(i = 0;i<n;i++){
                        if(tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                    }
                    return eles;
                    break;
                default:
                    return context.getElementsByTagName(arg);
                    break;
            }
        }
    },
    // 绑定事件
    bind:function(node,type,handler){
        node.addEventListener?node.addEventListener(type, handler, false):node.attachEvent('on'+ type, handler);
    },
    // 获取元素位置
    getPos:function (node) {
        var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
                scrollt = document.documentElement.scrollTop || document.body.scrollTop;
        pos = node.getBoundingClientRect();
        return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
    },
    // 添加样式名
    addClass:function(c,node){
        node.className = node.className + ' ' + c;
    },
    // 移除样式名
    removeClass:function(c,node){
        var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)","g");
        node.className = node.className.replace(reg, '');
    },
    // 阻止冒泡
    stopPropagation:function(event){
        event = event || window.event;
        event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
    }
};
/**
 * @name Calender
 * @constructor
 * @created by VVG
 * @http://www.cnblogs.com/NNUF/
 * @mysheller@163.com
 * */
function Calender() {
    this.initialize.apply(this, arguments);
}
Calender.prototype = {
    constructor:Calender,
    // 模板数组
    _template :[
        '<dl>',
        '<dt class="title-date">',
        '<span class="prevyear">prevyear</span><span class="prevmonth">prevmonth</span>',
        '<span class="nextyear">nextyear</span><span class="nextmonth">nextmonth</span>',
        '</dt>',
        '<dt><strong>日</strong></dt>',
        '<dt>一</dt>',
        '<dt>二</dt>',
        '<dt>三</dt>',
        '<dt>四</dt>',
        '<dt>五</dt>',
        '<dt><strong>六</strong></dt>',
        '<dd></dd>',
        '</dl>'],
    // 初始化对象
    initialize :function (options) {
        this.id = options.id; // input的ID
        this.input = _CalF.$('#'+ this.id); // 获取INPUT元素
        this.isSelect = options.isSelect;   // 是否支持下拉SELECT选择年月，默认不显示
        this.inputEvent(); // input的事件绑定，获取焦点事件
    },
    // 创建日期最外层盒子，并设置盒子的绝对定位
    createContainer:function(){
        // 如果存在，则移除整个日期层Container
        var odiv = _CalF.$('#'+ this.id + '-date');
        if(!!odiv) odiv.parentNode.removeChild(odiv);
        var container = this.container = document.createElement('div');
        container.id = this.id + '-date';
        container.style.position = "absolute";
        container.zIndex = 999;
        // 获取input表单位置inputPos
        var input = _CalF.$('#' + this.id),
                inputPos = _CalF.getPos(input);
        // 根据input的位置设置container高度
        container.style.left = inputPos.left + 'px';
        container.style.top = inputPos.bottom - 1 + 'px';
        // 设置日期层上的单击事件，仅供阻止冒泡，用途在日期层外单击关闭日期层
        _CalF.bind(container, 'click', _CalF.stopPropagation);
        document.body.appendChild(container);
    },
    // 渲染日期
    drawDate:function (odate) { // 参数 odate 为日期对象格式
        var dateWarp, titleDate, dd, year, month, date, days, weekStart,i,l,ddHtml=[],textNode;
        var nowDate = new Date(),nowyear = nowDate.getFullYear(),nowmonth = nowDate.getMonth(),
                nowdate = nowDate.getDate();
        this.dateWarp = dateWarp = document.createElement('div');
        dateWarp.className = 'calendar';
        dateWarp.innerHTML = this._template.join('');
        this.year = year = odate.getFullYear();
        this.month = month = odate.getMonth()+1;
        this.date = date = odate.getDate();
        this.titleDate = titleDate = _CalF.$('.title-date', dateWarp)[0];
        // 是否显示SELECT
        if(this.isSelect){
            var selectHtmls =[];
            selectHtmls.push('<select>');
            for(i = 2020;i>1970;i--){
                if(i != this.year){
                    selectHtmls.push('<option value ="'+ i +'">'+ i +'</option>');
                }else{
                    selectHtmls.push('<option value ="'+ i +'" selected>'+ i +'</option>');
                }
            }
            selectHtmls.push('</select>');
            selectHtmls.push('年');
            selectHtmls.push('<select>');
            for(i = 1;i<13;i++){
                if(i != this.month){
                    selectHtmls.push('<option value ="'+ i +'">'+ i +'</option>');
                }else{
                    selectHtmls.push('<option value ="'+ i +'" selected>'+ i +'</option>');
                }
            }
            selectHtmls.push('</select>');
            selectHtmls.push('月');
            titleDate.innerHTML = selectHtmls.join('');
            // 绑定change事件
            this.selectChange();
        }else{
            textNode = document.createTextNode(year + '年' + month + '月');
            titleDate.appendChild(textNode);
            this.btnEvent();
        }
        // 获取模板中唯一的DD元素
        this.dd = dd = _CalF.$('dd',dateWarp)[0];
        // 获取本月天数
        days = new Date(year, month, 0).getDate();
        // 获取本月第一天是星期几
        weekStart = new Date(year, month-1,1).getDay();
        // 开头显示空白段
        for (i = 0; i < weekStart; i++) {
            ddHtml.push('<a> </a>');
        }
        // 循环显示日期
        for (i = 1; i <= days; i++) {
            if (year < nowyear) {
                ddHtml.push('<a class="live disabled">' + i + '</a>');
            } else if (year == nowyear) {
                if (month < nowmonth + 1) {
                    ddHtml.push('<a class="live disabled">' + i + '</a>');
                } else if (month == nowmonth + 1) {
                    if (i < nowdate) ddHtml.push('<a class="live disabled">' + i + '</a>');
                    if (i == nowdate) ddHtml.push('<a class="live tody">' + i + '</a>');
                    if (i > nowdate) ddHtml.push('<a class="live">' + i + '</a>');
                } else if (month > nowmonth + 1) {
                    ddHtml.push('<a class="live">' + i + '</a>');
                }
            } else if (year > nowyear) {
                ddHtml.push('<a class="live">' + i + '</a>');
            }
        }
        dd.innerHTML = ddHtml.join('');

        // 如果存在，则先移除
        this.removeDate();
        // 添加
        this.container.appendChild(dateWarp);

        //IE6 select遮罩
        var ie6  = !!window.ActiveXObject && !window.XMLHttpRequest;
        if(ie6) dateWarp.appendChild(this.createIframe());

        // A link事件绑定
        this.linkOn();
        // 区域外事件绑定
        this.outClick();
    },

    createIframe:function(){
        var myIframe =  document.createElement('iframe');
        myIframe.src = 'about:blank';
        myIframe.style.position = 'absolute';
        myIframe.style.zIndex = '-1';
        myIframe.style.left = '-1px';
        myIframe.style.top = 0;
        myIframe.style.border = 0;
        myIframe.style.filter = 'alpha(opacity= 0 )';
        myIframe.style.width = this.container.offsetWidth + 'px';
        myIframe.style.height = this.container.offsetHeight + 'px';
        return myIframe;

    },

    // SELECT CHANGE 事件
    selectChange:function(){
        var selects,yearSelect,monthSelect,that = this;
        selects = _CalF.$('select',this.titleDate);
        yearSelect = selects[0];
        monthSelect = selects[1];
        _CalF.bind(yearSelect, 'change',function(){
            var year = yearSelect.value;
            var month = monthSelect.value;
            that.drawDate(new Date(year, month-1, that.date));
        });
        _CalF.bind(monthSelect, 'change',function(){
            var year = yearSelect.value;
            var month = monthSelect.value;
            that.drawDate(new Date(year, month-1, that.date));
        })
    },
    // 移除日期DIV.calendar
    removeDate:function(){
        var odiv = _CalF.$('.calendar',this.container)[0];
        if(!!odiv) this.container.removeChild(odiv);
    },
    // 上一月，下一月按钮事件
    btnEvent:function(){
        var prevyear = _CalF.$('.prevyear',this.dateWarp)[0],
                prevmonth = _CalF.$('.prevmonth',this.dateWarp)[0],
                nextyear = _CalF.$('.nextyear',this.dateWarp)[0],
                nextmonth = _CalF.$('.nextmonth',this.dateWarp)[0],
                that = this;
        prevyear.onclick = function(){
            var idate = new Date(that.year-1, that.month-1, that.date);
            that.drawDate(idate);
        };
        prevmonth.onclick = function(){
            var idate = new Date(that.year, that.month-2,that.date);
            that.drawDate(idate);
        };
        nextyear.onclick = function(){
            var idate = new Date(that.year + 1,that.month - 1, that.date);
            that.drawDate(idate);
        };
        nextmonth.onclick = function(){
            var idate = new Date(that.year , that.month, that.date);
            that.drawDate(idate);
        }
    },
    // A 的事件
    linkOn:function(){
        var links = _CalF.$('.live',this.dd),i,l=links.length,that=this;
        for(i = 0;i<l;i++){
            links[i].index = i;
            links[i].onmouseover = function(){
                _CalF.addClass("on",links[this.index]);
            };
            links[i].onmouseout = function(){
                _CalF.removeClass("on",links[this.index]);
            };
            links[i].onclick = function(){
                that.date = this.innerHTML;
                that.input.value = that.year + '-' + that.month + '-' + that.date;
                that.removeDate();
            }
        }
    },
    // 表单的事件
    inputEvent:function(){
        var that = this;
        _CalF.bind(this.input, 'focus',function(){
            that.createContainer();
            that.drawDate(new Date());
        });
    },
    // 鼠标在对象区域外点击，移除日期层
    outClick:function(){
        var that = this;
        _CalF.bind(document, 'click',function(event){
            event = event || window.event;
            var target = event.target || event.srcElement;
            if(target == that.input)return;
            that.removeDate();
        })
    }
};
var myDate1 = new Calender({id:'j_Date1'});
var myDate2 = new Calender({id:'j_Date2',isSelect:!0});
</script>
</body>
</html>


都是一家人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一款日历组件，非常适合web开发
08-06
一款日历组件，非常适合web开发，完全开源适合二次开发。
JS实现简单日历特效
10-15
在本文中，我们将深入探讨如何使用JavaScript来实现一个简单的日历特效。这个特效不仅展示了当前的日期和时间，还以一种美观的方式呈现出来。我们将会分析以下关键知识点： 1. **JavaScript内置对象Date**： ...
JS+CSS实现漂亮的日历特效（仿win10系统日历）
热门推荐
我爱吃豆芽呀
12-12 1万+
初衷：无意见发现win10的系统日鼠标悬浮的特效非常好看，想尝试一下用CSS和JS实现一下。 先上一下目前实现的效果图： 难点是这种间隔效果和鼠标移动效果的实现，如下图 间隔效果的实现我采用了 background-clip: content-box; padding: 2px; background-color: gray; border: 1px solid gray; 样...
asp前端日历_asp显示日历效果
weixin_39713805的博客
12-22 503
asp显示日历效果td { font-family: "宋体"; font-size:9pt}'先判断是否指定了一个年份和月份，没有则根据当前的年和月份显示If Request("ReqDate")="" thenCurrentDate=DateelseCurrentDate=Trim(Request("ReqDate"))end ifpyear=year(CurrentDate)pmonth=m...
日历组件，分为日期选择组件、时间选择组件，即选项有年月日（日历形）、时分（滚轮）
greyson的博客
09-18 2265
一个可以选择年月日、时分的dialog，选择的项有年月日（日历形）、时分（滚轮） 参考网上的demo改造而成 1.1.0： 优化日历视图的滚动动画：当滑动距离不足以切换上（下）一个月视图时闪动的问题。 日期对话框增加可选模式，如“只显示日历、不显示时间”等，同时可以减少不必要的视图绘制。 改为Dialog初始化和显示时不会默认选中任何一天，完全交由调用者决定选中哪一天，也是为了减少无用操...
element-ui日历组建-待办事项
yinyujia123的博客
02-09 1878
<template> <el-card shadow="never" class="aui-card--fill"> <el-calendar v-model="calendarValue"> <template slot="dateCell" slot-scope="{date, data}"> <div :class="data.isSelected ? 'is-selected' : ''"> .
js简易日历特效原生代码
11-10
"js简易日历特效原生代码"的标题暗示了我们将探讨如何利用纯JavaScript实现一个基本的日历功能，无需依赖任何外部库，如jQuery或其他日期管理库。 首先，让我们了解JavaScript中的日期处理。JavaScript内置了一个`...
原生js实现卡片式日历撕掉翻转特效.zip
01-21
本示例中的"原生js实现卡片式日历撕掉翻转特效.zip"是一个利用JavaScript（特别是原生JavaScript，非依赖任何库如jQuery）创建的创新日历功能，它通过模拟日历卡片的撕掉和翻转效果，为用户提供了独特的视觉体验。...
手机日历插件JS特效
11-08
JS（JavaScript）是Web开发中的主要脚本语言，用于实现网页的动态交互功能，因此，手机日历插件JS特效涉及到的是如何使用JavaScript来创建一个适用于手机屏幕的交互式日历组件。以下将详细讨论这个话题。 首先，...
JS日历控件特效代码layDate
01-01
JS日历控件特效代码layDate，非常不错的日历控件，调用也非常简单有两种方式，首先要导入laydate.js，一种是直接使用nclick="laydate()"函数，另一种是通过ID来调用，还是很不错的日历日期控件。
Axure日历元件库
03-29
Axure时间选择器，包含多种，单选，时间段，2个日历等等
一个很漂亮并且很实用的日历特效代码
03-20
日历 ，日历待办事项
12-16
生成待办日历，动态日历，一行日历移动端
原生js实现卡片式挂历日历翻转特效动画.zip
07-11
原生js实现卡片式挂历日历翻转特效动画。备注：点击日历往前翻阅日历。
日历组件日历组件日历组件
04-25
一款不错的日程管理小程序一款不错的日程管理小程序一款不错的日程管理小程序一款不错的日程管理小程序一款不错的日程管理小程序一款不错的日程管理小程序一款不错的日程管理小程序
【Axure原型分享】工作计划日历
mushe93的博客
06-24 961
今天和大家分享一个高保真原型——工作计划日历 【原型预览】 https://axhub.im/ax9/db61b84f953bb938/#g=1 【原型下载】 方式1：加入原型分享群后，可免费分享该原型，请咨询微信522073109 方式2：https://weidian.com/item.html?itemID=4094396890 【原型截图】 1、周日历，可以看到不同工作人员，不同周的工作安排 2、月日历，可以看到不同工作人员，不同月份的工作安排 3、具体安排及维护工
js实现日历效果
张鹏~IT~少年人的博客
03-04 500
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
一个JavaScript日历表的特效
路人甲的专栏
06-20 1926
setInterval(refreshCalendarClock(),1000);function Year_Month(){ var now = new Date(); var yy = now.getYear(); var mm = now.getMonth()+1; var cl = ; if (no
Javascript特效：简单日历
KaiSarH
12-31 499
实现JS特效：简单的日历。
javascript日历
最新发布
06-10
您好！要实现JavaScript日历，可以通过以下步骤： 1. 创建一个HTML页面，并在其上添加一个用于显示日历的元素，如`<div>`或`<table>`。 2. 在JavaScript中编写函数来计算当前日期，并将其用于生成日历。 3. 在JavaScript中编写函数来生成日历，包括日期、星期几等信息。可以使用循环语句和条件语句来生成日历。 4. 将生成的日历添加到HTML页面中的日历元素中。 下面是一个简单的JavaScript日历示例代码： ```html <!DOCTYPE html> <html> <head> <title>JavaScript Calendar</title> <style> table { border-collapse: collapse; } td { border: 1px solid black; padding: 5px; text-align: center; } </style> </head> <body> <div id="calendar"></div> <script> function generateCalendar() { // 获取当前日期 var currentDate = new Date(); var year = currentDate.getFullYear(); var month = currentDate.getMonth(); // 获取本月第一天和最后一天的日期 var firstDay = new Date(year, month, 1); var lastDay = new Date(year, month + 1, 0); // 创建日历表格 var table = document.createElement("table"); // 创建表头 var thead = document.createElement("thead"); var tr = document.createElement("tr"); var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; for (var i = 0; i < days.length; i++) { var th = document.createElement("th"); th.textContent = days[i]; tr.appendChild(th); } thead.appendChild(tr); table.appendChild(thead); // 创建表格内容 var tbody = document.createElement("tbody"); var date = 1; for (var i = 0; i < 6; i++) { var tr = document.createElement("tr"); for (var j = 0; j < 7; j++) { var td = document.createElement("td"); if (i === 0 && j < firstDay.getDay()) { // 前一个月的日期 td.textContent = ""; } else if (date > lastDay.getDate()) { // 下一个月的日期 td.textContent = ""; } else { // 本月的日期 td.textContent = date; if (date === currentDate.getDate()) { // 当前日期加粗显示 td.style.fontWeight = "bold"; } date++; } tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); // 将日历添加到页面中 var calendar = document.getElementById("calendar"); calendar.appendChild(table); } // 调用生成日历的函数 generateCalendar(); </script> </body> </html> ``` 上面的代码会生成一个简单的日历表格，包括当前月份的日期，并将当前日期加粗显示。您可以根据需要进行修改和扩展，以满足您的需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值