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 ...
随机推荐
- maven测试配置是否成功
测试maven 是否安装成功 win+r 输入 cmd 调出doc 输入 mvn -v maven安装完成测试报错 后来发现是java-home在path中配置缺少bin,如下图 这个是 java-h ...
- JavaScript基础关于JSON(011)
JSON意即JavaScript Object Notation,是JavaScript里数据表示的通用格式,JSON数据格式很象JavaScript里的对象: {"name": ...
- 重学 Java 设计模式：实战观察者模式「模拟类似小客车指标摇号过程，监听消息通知用户中签场景」
作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 知道的越多不知道的就越多 编程开发这条路上的知识是无穷无尽的, ...
- java架构-一些设计上的基本常识
最近给团队新人讲了一些设计上的常识,可能会对其它的新人也有些帮助, 把暂时想到的几条,先记在这里. 1.API与SPI分离 框架或组件通常有两类客户,一个是使用者,一个是扩展者. API(Applic ...
- 轻松让HTML5可以显示桌面通知Notification非常实用
使用Notification的流程 1.检查浏览器是否支持Notification2.检查浏览器的通知权限3.如果权限不够则申请获取权限4.创建消息通知5.展示消息通知 Notification AP ...
- 「区间DP」「洛谷P3205」「 [HNOI2010]」合唱队
洛谷P3205 [HNOI2010]合唱队 题目: 题目描述 为了在即将到来的晚会上有更好的演出效果,作为 A 合唱队负责人的小 A 需要将合唱队的人根据他们的身高排出一个队形.假定合唱队一共 n 个 ...
- MVC + EFCore 项目实战 - 数仓管理系统2- 搭建基本框架配置EFCore
本次课程就正式进入开发部分. 首先我们先搭建项目框架,还是和之前渐进式风格保持一致,除必备组件外,尽量使用原生功能以方便大家理解. 开发工具:vs 2019 或以上 数据库:SQL SERVER 20 ...
- centOS7：创建的新用户如何获得写权限
要在root用户下使用 1.新建用户 adduser testuser //新建testuser 用户 passwd testuser //给testuser 用户设置密码 2.赋予root权限 方法 ...
- Bash的特性
Bash的特性 1. tab补全 #命令补全 [root@clf ~]# user #命令补全useradd userdel usermod usernetctl user ...
- 让windows原生CMD使用ls命令
1.新建ls.bat. 2.编辑内容: @echo off dir 3.将ls.bat文件放到C:\Windows目录下. 效果: