Jquery日历编写小练习
生活随笔
收集整理的這篇文章主要介紹了
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:0;margin: 0; } .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");//找到tddivDoms = $("#div_sty1");//找到 }function addEvent(){tdDoms.mouseover(function(){tdDoms.css("color","white");$(this).css("color","red");divDoms.html($(this).attr("data"));}) }注：當鼠標移動到相應月份的時候，下面的事件提示緊接發生相對應的變化。
轉載于:https://www.cnblogs.com/Ace-suiyuan008/p/9237262.html
總結
以上是生活随笔為你收集整理的Jquery日历编写小练习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第六章 Windows应用程序对键盘与鼠
- 下一篇： Zinterstore 命令