Jquery日历编写小练习
日历练习
总体效果展示：
代码展示：
源代码部分
<body>
<!-- 日历-->
<div class="div_sty">
<table cellpadding="10px" cellspacing="10px" height="200px" class="tab_sty">
<tr>
<td data="一月活动<br>这是一月活动">1Jan</td>
<td data="二月活动<br>这是二月活动">2Fer</td>
<td data="三月活动<br>这是三月活动">3Mar</td>
</tr>
<tr>
<td data="四月活动<br>这是四月活动">4Apr</td>
<td data="五月活动<br>这是五月活动">5May</td>
<td data="六月活动<br>这是六月活动">6Jun</td>
</tr>
<tr>
<td data="七月活动<br>这是七月活动">7Jul</td>
<td data="八月活动<br>这是八月活动">8Auq</td>
<td data="九月活动<br>这是九月活动">9Sep</td>
</tr>
<tr>
<td data="十月活动<br>这是十月活动">10Oct</td>
<td data="十一月活动<br>这是十一月活动">11Nov</td>
<td data="十二月活动<br>这是十二月活动">12Dec</td>
</tr>
</table>
<div id="div_sty1"></div>
</div>
CSS代码：
*{
padding:;
margin:;
}
.div_sty{
background: #ccc;
width: 200px;
height: 300px;
margin: 0 auto;
margin-top: 100px;
text-align: center;
}
.tab_sty td{
color: #FCFCFC;
background: #000000;
}
#div_sty1{
width: 100%;
height: 150px;
float: left;
}
js代码：
var tdDoms = null;
var divDoms = null;
$(function(){
initDom();//初始化变量
addEvent();//添加事件
tianjiaEvent();//添加事件
})
function initDom(){
tdDoms = $("td");//找到td
divDoms = $("#div_sty1");//找到
} function addEvent(){
tdDoms.mouseover(function(){
tdDoms.css("color","white");
$(this).css("color","red");
divDoms.html($(this).attr("data"));
})
}
注：当鼠标移动到相应月份的时候，下面的事件提示紧接发生相对应的变化。
Jquery日历编写小练习的更多相关文章
- 11个实用jQuery日历插件
1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...
- 10个漂亮的jQuery日历插件下载【转载】
10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件 日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用 ...
- 前端学习02：jQuery 日历
引言:学习前端已经接近1个月了,先后经历了1周的 html+css, 2周的"JavaScript 从入门到下跪",期间还看了vue+webpack.然鹅,Mentor Brigh ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- 用jquery实现抽奖小程序
用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...
- Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表
Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表 一个个人觉得比较简单小巧的软件. 下面就如何编写如何发布打包来介绍一下吧! 先下载mysql的库文件链接:http://files. ...
- 9款精致HTML5/jQuery日历时钟控件源码下载（源码请见百度云） 链接：http://pan.baidu.com/s/1geIXe75 密码：7m4a
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...
- 25个有用的jQuery日历和日期选取插件
jQuery被认为是最好的JavaScript库,因为它简单易用.灵活,并有大量的插件.本文介绍25个非常不错的jQuery日历和日期选取插件,希望对各位有用. 1. Simple JQuery Da ...
- jquery日历datepicker的使用方法
jquery.ui.datepicker.js 用法: http://blog.csdn.net/zb0567/article/details/7906238 原文 http://blog.cs ...
随机推荐
- 玩转SpringBoot之捣鼓 Redis
我们都知道,把首页数据放到Redis里,能够加快首页数据的访问速度.但是我们要如何准确又快速的将 Redis 整合到自己的 SpringBoot2.x 项目中呢?今天阿淼就带大家爬一爬其中的门门道道. ...
- 超简单集成ML kit 实现听写单词播报
背景 相信我们大家在刚开始学习一门语言的时候都有过听写,现在的小学生学语文的时候一项重要的课后作业就是听写课文中的生词,很多家长们都有这方面的经历.不过一方面这种读单词的动作相对简单,另一方面家长 ...
- 《算法笔记》6.6小节 问题 A: 任务调度
这道题我一开始看到的时候,想到的是拓补排序,可是这么菜又这么懒的我怎么可能用呢,既然出现在优先队列里面,那么久一定和他有关了 可是并没有使用优先队列 思路: 对于这道题,我们肯定是对他们定义优先级,然 ...
- 从别人的代码中学习golang系列--01
自己最近在思考一个问题,如何让自己的代码质量逐渐提高,于是想到整理这个系列,通过阅读别人的代码,从别人的代码中学习,来逐渐提高自己的代码质量.本篇是这个系列的第一篇,我也不知道自己会写多少篇,但是希望 ...
- 遍历form中的所有空间并找到选中的radiobutton
源文件: http://pan.baidu.com/share/link?shareid=1481950339&uk=3912660076 参考:http://msdn.microsoft.c ...
- C语言学习笔记——特别篇(VScode安装使用)
B站有同步教学视频 参考博文: https://www.cnblogs.com/czlhxm/p/11794743.html 注意事项: 请在英文目录下运行!!! VScode下载链接: https: ...
- 基于ASP.NET core的MVC站点开发笔记 0x01
基于ASP.NET core的MVC站点开发笔记 0x01 我的环境 OS type:mac Software:vscode Dotnet core version:2.0/3.1 dotnet sd ...
- 洛谷 P4408 [NOI2003]逃学的小孩
题目传送门 题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:“喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?”一听说要考试,Chris的父母就心急如焚, ...
- 【Windows10】如何使用Segoe MDL2 Assets图标
众所周知,在Windows 10中,微软引入了汉堡菜单,方便Android和ios的开发者移植程序,而不需要单独为Windows设计一套UI.但有人可能发现在symbol icon里根本找不到所谓的汉 ...
- shell进阶篇之数组应用案例
数组中可以存放多个值. Shell 只支持一维数组(不支持多维数组),初始化时不需要定义数组大小. 与大部分编程语言类似,数组元素的下标由0开始. Shell 数组用括号来表示,元素用"空格 ...