日历练习

总体效果展示：

代码展示：

源代码部分

<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. c++数字转化为字符串、字符串转换为数字

    char ch[20]; int i =1; int j = 2; char *p = "34567"; 数字装换为字符串 sprintf(ch , "%d,%d&quo ...

  2. 缺少对公共可见类型或成员的XML注释

    最近突然心血来潮,想清理下代码,结果看到了一堆这样的警告——缺少对公共可见类型或成员“XXX”的 XML 注释: 其实要想取消上面的警告,仅仅需要在项目属性里找到生成页签里的”错误和警告“项,在禁止显 ...

  3. JavaScript图形实例：迭代函数系统生成图形

    迭代函数系统(Iterated Function System,IFS)可以用来创建分形图案,它是分形理论的重要分支,也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯 ...

  4. css3-pointer-events

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. axure8.0实现tab切换

    这两天帮忙做产品原型图,tab切换做一次忘一次,这次索性记录一下,免得下次再忘了. 1.在元件库中拉出来一个动态面板,双击动态面板,添加状态,添加完成之后,点击红色标注的地方,开始编辑每个面板状态: ...

  6. Chive CTF 2020 - Tiki

    题目状态: OPEN - 正在试图解这道题CLOSED - 这道题还没有打开SOLVED - 解决了!鼓掌撒花! 赛事信息: 起止时间:2020-04-09 01:00 ~ 2020-04-12 01 ...

  7. HBuilder生成证书

    一.安装jdk https://www.oracle.com/java/technologies/javase-downloads.html 二.打开CMD命令到JDK安装目录bin文件夹下 执行命令 ...

  8. 小师妹学JVM之:Dirty cards和PLAB

    目录 简介 分代收集器中的空间划分 Write barrier和Dirty cards PLAB old space分配对象 总结 简介 分代垃圾回收器在进行minor GC的时候会发生什么操作呢?有 ...

  9. day21 模块与包+软件开发目录规范

    目录 一.导入模块的两种方式 二.模块搜索的路径的优先级 三.循环导入 四.区分py文件的两种用途 五.编写一个规范的模板 五.包 1 什么是包 2 为什么要有包 3 包的相关使用 3.1 在当前文件 ...

  10. 03 Vue实例成员

    Vue实例 1.el:实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容 2.data ...