转载请注明：学时网 » 模仿百度教育->考试日历控件， 自己用html+css+jquery实现
效果图
实现后的效果
html里面只写了一个月的考试信息，其他月份一样。用到的图片可以去网上下载，
由于自己网站部分，给这个日历的高度不够高，自己加了一个更多的事件
（鼠标移动到更多，则全部显示本月考试信息，鼠标移出恢复原来样式）
js部分
$(function(){
//定位当前月份
locationMonth();
//点击下一月按钮
$(‘.next-month-btn’).click(function(){
//获取当前选定的月份
var selectMonth = $(‘.selected-month’).data(‘month’);
var toMonth = selectMonth + 1;
if (selectMonth == 11) {
$(‘.next-month-btn’).addClass(“next-month-disable”);
}
if (selectMonth < 12) {
var nowLeft = $(‘.month-list’).data(“left”);
//这个时候需要移动月份条
if (nowLeft > -270 && toMonth > 6) {
var toLeft = – (toMonth – 6) * 45;
$(‘.month-list’).animate({marginLeft: toLeft + “px”});
$(‘.month-list’).data(‘left’, toLeft);
}
toChangeMonth(selectMonth, toMonth);
$(‘.prev-month-btn’).removeClass(“next-month-disable”);
}
});
//点击上一月按钮
$(‘.prev-month-btn’).click(function(){
//获取当前选定的月份
var selectMonth = $(‘.selected-month’).data(‘month’);
var toMonth = selectMonth – 1;
if (selectMonth == 2) {
$(‘.prev-month-btn’).addClass(“prev-month-disable”);
}
if (selectMonth > 1) {
var nowLeft = $(‘.month-list’).data(“left”);
//这个时候需要移动月份条
if (nowLeft < 0 && toMonth < 7) {
var toLeft = -270 + (7 – toMonth) * 45;
$(‘.month-list’).animate({marginLeft: toLeft + “px”});
$(‘.month-list’).data(‘left’, toLeft);
}
toChangeMonth(selectMonth, toMonth);
$(‘.next-month-btn’).removeClass(“next-month-disable”);
}
});
//月份单击事件
$(‘.month-item’).click(function(){
var oldMonth = $(‘.selected-month’).data(‘month’);
var toMonth = $(this).data(“month”);
toChangeMonth(oldMonth, toMonth);
toChangeExam(toMonth);
});
//为更多按钮添加鼠标事件
$(‘.exam-more’).mouseenter(function(){
var selectMonth = $(‘.selected-month’).data(‘month’);
var toHeight = $(“[data-exam = '" + selectMonth + "']“).children().size() * 28 + “px”;
$(‘.exam-viewport’).animate({height:toHeight});
$(‘.exam-more’).hide();
});
$(‘.exam-viewport’).mouseleave(function(){
$(‘.exam-viewport’).animate({height:”140px”});
$(‘.exam-more’).show();
});
});
//获取当前时间月份，定位显示那个月份的考试信息信息
function locationMonth(){
var nowMonth = ownGetCurrentMonth();
$(“[data-month = '" + nowMonth + "']“).addClass(“selected-month”);
$(“[data-month = '" + nowMonth + "']“).children().css(“background”, “transparent”);
var monthMargin = -parseInt(nowMonth / 7) * 270;
$(“.month-list”).css(“margin-left”, monthMargin + “px”);
$(“.month-list”).data(“left”, monthMargin);
toChangeExam(nowMonth);
}
//获取当前月数
function ownGetCurrentMonth() {
var nowDate = new Date();
var nowMonth = nowDate.getMonth() + 1;
return nowMonth;
}
//负责移动月份条，改变选择月份样式
function toChangeMonth(srcMonth, toMonth) {
$(“[data-month = '" + toMonth + "']“).addClass(“selected-month”);
$(“[data-month = '" + toMonth + "']“).children().css(“background”, “transparent”);
$(“[data-month = '" + srcMonth + "']“).removeClass(“selected-month”);
$(“[data-month = '" + srcMonth + "']“).children().css(“background-color”, “#E0F8F1″);
toChangeExam(toMonth);
}
//负责切换每月考试内容
function toChangeExam(toMonth) {
var examPostion = – 268 * (toMonth – 1) + “px”;
$(‘.ow_exam’).animate({marginLeft: examPostion});
}
css部分
.exam-info {
height: 100%;
width: 100%;
}
.exam-info .exam-title {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
height: 25px;
line-height: 25px;
padding:5px 10px;;
}
.exam-info h2 {
display: inline-block;
font-family: “Microsoft YaHei”,”微软雅黑”;
font-size: 16px;
font-weight: 400;
width: 80px;
margin: 0;
padding: 0;
}
.exam-info .prev-month-btn, .exam-info .next-month-btn {
background: url(“../img/baidu.png”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #ccc;
cursor: pointer;
float: right;
height: 24px;
width: 24px;
}
.exam-info .prev-month-btn {
background-position: -2px -436px;
}
.exam-info .prev-month-btn:hover {
background-position: -2px -373px;
border: 1px solid #40b019;
}
.exam-info .next-month-btn {
background-position: 1px -405px;
}
.exam-info .next-month-btn:hover {
background-position: 1px -340px;
border: 1px solid #40b019;
}
.prev-month-disable {
background-position: -2px -469px;
}
.exam-info .prev-month-disable:hover {
background-position: -2px -469px;
border: 1px solid #ccc;
}
.next-month-disable {
background-position: 1px -499px;
}
.exam-info .next-month-disable:hover {
background-position: 1px -499px;
border: 1px solid #ccc;
}
.exam-info .month-slide {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
height: 45px;
overflow: hidden;
}
.exam-info .month-list:before, .exam-info .month-list:after {
content: “”;
display: table;
line-height: 0;
}
.exam-info .month-list:after {
clear: both;
}
.exam-info .month-list:before, .exam-info .month-list:after {
content: “”;
display: table;
line-height: 0;
}
.exam-info .third-site {
left: -406px;
}
.exam-info .month-list {
height: 45px;
width: 540px;
}
.exam-info .month-item {
cursor: pointer;
float: left;
height: 45px;
line-height: 38px;
margin-right: 2px;
width: 43px;
}
.exam-info .month-item .month-card {
background-color: #E0F8F1;
color: #787878;
height: 40px;
text-align: center;
}
.exam-info .month-item .month-card i {
font-family: “Microsoft YaHei”,”微软雅黑”;
font-size: 18px;
font-style: normal;
}
.exam-info .month-item .month-card {
color: #787878;
text-align: center;
}
.selected-month {
background: url(“../img/month.png”);
}
.exam-info .exam-viewport {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
height: 140px;
width: 268px;
overflow: hidden;
position: absolute;
background:#e0f8f1;
}
.exam-info .exam-list {
font-size: 12px;
width: 3500px;
}
.exam-info .exam-item {
float: left;
line-height: 25px;
padding: 0 10px;
width: 248px;
}
.exam-info .exam-desc {
color: #333;
cursor: pointer;
display: inline-block;
height: 28px;
width: 248px;
}
.exam-info .exam-name {
background: url(“../img/green-point.png”) no-repeat scroll -7px 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 25px;
line-height: 25px;
padding-left: 10px;
}
.exam-info .exam-desc:hover {
color:#40b019;
}
.c-text-danger {
background-color: #f13f40;
}
.c-text {
color: #fff;
display: inline-block;
font-size: 12px;
font-style: normal;
height: 12px;
line-height: 12px;
overflow: hidden;
padding: 2px;
text-align: center;
vertical-align: text-bottom;
}
.exam-info .exam-time {
float:right;
padding-right:10px;
}
.exam-more {
bottom:0px;
left:0px;
background:#e0f8f1;
position: absolute;
text-align: right;
}
html部分
<div class=”exam-info”>
<div class=”exam-title”>
<a class=”next-month-btn”></a>
<a class=”prev-month-btn”></a>
<h2>
考试日历
</h2>
</div>
<div class=”month-slide”>
<ul class=”month-list third-site”>
<#list 1 .. 12 as monthNum>
<li class = “month-item” data-month=”${monthNum}”>
<div class=”month-card”>
<i>${monthNum}</i>
月
</div>
</li>
</#list>
<ul>
</div>
<div class=”exam-viewport”>
</a>
<a class=”exam-desc exam-more”>更多↓
</a>
<ul class=”exam-list ow_exam”>
<li class=”exam-item” data-exam=”1″>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E7%A1%95%E5%A3%AB%E7%A0%94%E7%A9%B6%E7%94%9F%E5%85%A5%E5%AD%A6%E8%80%83%E8%AF%95&key=%E7%A1%95%E5%A3%AB%E7%A0%94%E7%A9%B6%E7%94%9F%E5%85%A5%E5%AD%A6%E8%80%83%E8%AF%95″>
<span class=”exam-name”>考研
<i class=”c-text c-text-danger icon-hui”>热</i>
</span>
<span class=”exam-time”>1月4、5日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E5%85%AC%E5%85%B1%E7%AE%A1%E7%90%86%E7%A1%95%E5%A3%ABMPA%E8%80%83%E8%AF%95&key=%E5%85%AC%E5%85%B1%E7%AE%A1%E7%90%86%E7%A1%95%E5%A3%ABMPA%E8%80%83%E8%AF%95″>
<span class=”exam-name”>MPA（全日制）
</span>
<span class=”exam-time”>1月4、5日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E5%B7%A5%E5%95%86%E7%AE%A1%E7%90%86%E7%A1%95%E5%A3%ABMBA%E8%80%83%E8%AF%95&key=%E5%B7%A5%E5%95%86%E7%AE%A1%E7%90%86%E7%A1%95%E5%A3%ABMBA%E8%80%83%E8%AF%95″>
<span class=”exam-name”>MBA（全日制）
</span>
<span class=”exam-time”>1月4、5日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E9%9B%85%E6%80%9D%E8%80%83%E8%AF%95&key=%E9%9B%85%E6%80%9D%E8%80%83%E8%AF%95″>
<span class=”exam-name”>雅思考试
<i class=”c-text c-text-danger icon-hui”>热</i>
</span>
<span class=”exam-time”>1月9、11、18、25日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E9%AB%98%E7%AD%89%E6%95%99%E8%82%B2%E8%87%AA%E5%AD%A6%E8%80%83%E8%AF%95&key=%E9%AB%98%E7%AD%89%E6%95%99%E8%82%B2%E8%87%AA%E5%AD%A6%E8%80%83%E8%AF%95″>
<span class=”exam-name”>自考
<i class=”c-text c-text-danger icon-hui”>热</i>
</span>
<span class=”exam-time”>1月11、12日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E6%89%98%E7%A6%8F%E8%80%83%E8%AF%95&key=%E6%89%98%E7%A6%8F%E8%80%83%E8%AF%95″>
<span class=”exam-name”>托福考试
<i class=”c-text c-text-danger icon-hui”>热</i>
</span>
<span class=”exam-time”>1月12、18日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://www.shgkw.org/ “>
<span class=”exam-name”>上海公务员考试
</span>
<span class=”exam-time”>1月18日</span>
</a>
<a class=”exam-desc” target=”_blank” href=”http://jiaoyu.baidu.com/query/exam?originQuery=%E5%9F%BA%E9%87%91%E4%BB%8E%E4%B8%9A%E8%80%83%E8%AF%95&key=%E5%9F%BA%E9%87%91%E4%BB%8E%E4%B8%9A%E8%80%83%E8%AF%95″>
<span class=”exam-name”>基金从业
</span>
<span class=”exam-time”>1月18日</span>
</a>
</li>
</ul>
</div>
</div>
相关推荐
【HTML+JS+CSS日历控件】是一个前端开发中常见的组件，主要用于在网页上显示日期，方便用户选择或查看日期。在这个特定的例子中，该控件不仅包含了公历日期，还特别添加了阴历（农历）的支持，使得功能更加全面，...
在这个主题中，我们专注于"ASP.NET---js日历控件"，这通常指的是在ASP.NET应用中使用JavaScript实现的日历交互功能。JavaScript是一种广泛使用的客户端脚本语言，它允许在用户的浏览器上执行代码，提供更丰富的用户...
`jQuery Calendar.js`是一款基于JavaScript库`jQuery`的插件，用于实现日历选择功能，同时它具有节日显示的功能，增强了用户体验。这个控件能够帮助用户在网页上方便地选择日期，常见于在线预订系统、事件安排或者...
在Java服务器页面（JSP）开发中，常常需要用到日历控件来提供用户友好的日期选择功能。"jsp+日历控件+好用的+两款"这个标题暗示了我们将探讨两种适用于JSP的高效日历组件。这些控件通常用于网页表单中，让用户能够...
在实现JS版日历控件时，开发者可以选择现成的第三方库，例如jQuery UI的Datepicker、Bootstrap的Datetimepicker、FullCalendar等，这些库已经封装好了大部分功能，可以直接在项目中使用，大大减少了开发时间和复杂度...
jQuery UI Datepicker是一款广泛应用于网页开发中的日历控件，它是jQuery UI库的一部分，提供了丰富的功能和高度的可定制性，使得网页上的日期选择变得既美观又实用。这个控件可以轻松集成到任何HTML页面中，只需...
将jQuery与日历控件结合，可以创建出功能强大且易于使用的日期选择器。以下是对“日历控件（Jquery）”这一主题的详细阐述。 1. **jQuery简介**： jQuery由John Resig在2006年推出，其目标是简化JavaScript编程。...
最后，对于压缩包中的“jquery_ui日历控件”文件，这可能包含了示例代码、样式文件或者已经配置好的日历控件实例，方便开发者快速集成到自己的项目中。为了使用这些资源，你需要将它们部署到服务器或本地开发环境中...
在这个项目中，"自制日历控件（jquery+html）" 提供了一个使用jQuery和HTML实现的日历组件。下面我们将详细探讨这些技术及其在构建此类控件中的应用。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作...
本篇文章将详细讲解基于JQuery实现的日历控件，通过分析给定的文件，我们可以了解到如何创建一个实用且美观的日历组件。 首先，我们来看一下压缩包中的文件： 1. `calendar.css`：这是样式表文件，用于定义日历...
- **JavaScript文件**：实现日历控件的逻辑，可能包括jQuery插件代码。 - **HTML文件**：示例页面，展示如何在网页中使用此日历控件。 - **图片资源**：可能包含日历图标或其他视觉元素。 - **文档**：可能包含使用...
在Web开发中，日历控件是不可或缺的一部分，尤其对于需要处理时间安排和任务管理的应用来说。jQuery Week Calendar控件是一个强大而灵活的解决方案，它使得开发者能够轻松地在网页上实现可编辑的日历视图，用于记录...
而jQuery UI的脚本则包含了实现日历控件的各种函数和逻辑，如日期解析、日期格式化、事件绑定等。 在“index.html”文件中，你可以看到一个简单的示例，展示了如何在网页中集成和使用这个日历控件。通过这个示例，...
要实现JQuery日历控件，首先需要在页面中引入JQuery和JQuery UI的CSS和JS文件。然后，选择一个元素（如文本框或div）作为日历的触发器，并使用`$("#selector").datepicker();`方法初始化日历控件。例如： ```html...
jQuery日历控件是网页开发中常用的一种交互组件，它能为用户提供直观的日历选择功能，简化日期输入操作。在Web应用中，日历控件通常用于表单中的日期输入，比如预订系统、事件安排或者任务管理等。jQuery库的强大和...
本篇文章将详细讲解如何使用jQuery实现一个兼容IE和Firefox的日历控件。 首先，jQuery日历控件是网页应用程序中常见的用户界面元素，它允许用户方便地选择日期，常用于表单输入或者时间相关的功能。这个控件的关键...
- 要使用jQuery日历控件，首先需要在页面中引入jQuery库和日历插件的CSS及JS文件。这通常通过`<script>`和`<link>`标签来实现。 - 初始化日历控件时，可以选择一个DOM元素（如input框）作为目标，并使用`....
"JQ版本自定义日历控件"是指利用jQuery来实现一个可自定义的日历插件。接下来，我们将深入探讨这个主题，了解如何创建这样一个日历控件及其相关的技术知识点。 首先，我们需要理解jQuery的基本概念。jQuery是一个轻...
《jQuery日历价格插件——实现高效前端交互与动态数据展示》 在现代网页开发中，用户界面的交互性与视觉吸引力是提升用户体验的关键因素之一。"Calendar-price-jquery"是一款基于jQuery的实用插件，它专为网页设计...
-- 引入jQuery.datePickerCn插件 --> <script src="path/to/jquery.datePickerCn.js"></script> <style> .ui-datepicker { font-size: 14px; } </style> </head> <body> <input type="text" id="dateInput"> ...