日历练习

总体效果展示：

代码展示：

源代码部分

<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日历编写小练习的更多相关文章

  1. 11个实用jQuery日历插件

    1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...

  2. 10个漂亮的jQuery日历插件下载【转载】

    10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件   日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用 ...

  3. 前端学习02：jQuery 日历

    引言:学习前端已经接近1个月了,先后经历了1周的 html+css, 2周的"JavaScript 从入门到下跪",期间还看了vue+webpack.然鹅,Mentor Brigh ...

  4. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

  5. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  6. Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表

    Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表 一个个人觉得比较简单小巧的软件. 下面就如何编写如何发布打包来介绍一下吧! 先下载mysql的库文件链接:http://files. ...

  7. 9款精致HTML5/jQuery日历时钟控件源码下载（源码请见百度云） 链接：http://pan.baidu.com/s/1geIXe75 密码：7m4a

    现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...

  8. 25个有用的jQuery日历和日期选取插件

    jQuery被认为是最好的JavaScript库,因为它简单易用.灵活,并有大量的插件.本文介绍25个非常不错的jQuery日历和日期选取插件,希望对各位有用. 1. Simple JQuery Da ...

  9. jquery日历datepicker的使用方法

    jquery.ui.datepicker.js 用法: http://blog.csdn.net/zb0567/article/details/7906238   原文  http://blog.cs ...

随机推荐

  1. Python 中的元类到底是什么？这篇恐怕是最清楚的了

    类作为对象 在理解元类之前,您需要掌握 Python 的类.Python 从 Smalltalk 语言中借用了一个非常特殊的类概念. 在大多数语言中,类只是描述如何产生对象的代码段.在 Python ...

  2. SpringBoot项目部署到tomcat

    SpringBoot部署到tomcat 一.修改maven.xml 1.添加<.packaging>war</.packaging>,打包为war包 <packaging ...

  3. apply()方法和call()介绍

    我们发现apply()和call()的真正用武之地是能够扩充函数赖以运行的作用域. 1.call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的 ...

  4. .Net Core 集成ExceptionLess分布式日志框架之本地化部署

    前言 公司目前使用的项目中关于日志记录这块,之前一直都是使用的Log4net 存放于后台文件中的,对于异常错误啊,或者需要查看一些详情错误的时候感觉很不方便,要到服务器上去打开日志文件检索错误,降低了 ...

  5. centos7时间调整

    查看时区是否正确,命令date -R: 不正确先调整时区,命令tzselect: 安装ntp,命令yum install ntp: 同步时间,命令ntpdate cn.pool.ntp.org: 设置 ...

  6. Python-数据结构-最全六种排序代码实现

    1.冒泡排序 def bubble_sort(alist): """冒泡排序""" n = len(alist) for j in rang ...

  7. Pytorch | 详解Pytorch科学计算包——Tensor

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Pytorch专题的第二篇,我们继续来了解一下Pytorch中Tensor的用法. 上一篇文章当中我们简单介绍了一下如何创建一个Ten ...

  8. 让MySQL为我们记录执行流程

    让MySQL为我们记录执行流程   我们可以开启profiling,让MySQL为我们记录SQL语句的执行流程   查看profiling参数 shell > select @@profilin ...

  9. day49 数据库终章

    目录 一.pymysql补充 二.数据库补充 1 视图(了解) 2 触发器(了解) 3 事务 4 存储过程(了解) 5 函数 6 流程控制 7 索引 8 b+树 9 聚集索引(primary key) ...

  10. easy tornado

    easy tornado 题目分析 这是一道2018年护网杯的题目 /flag.txt /welcome.txt /hints.txt 一共有3个文件. /flag.txt flag in /flll ...