黑马程序员技术交流社区

标题: 发一个自己以前写的javascript 用到jQuery框架 附DEMO 前端可以用 [打印本页]

作者: 汪磊    时间: 2012-12-9 21:40
标题: 发一个自己以前写的javascript 用到jQuery框架 附DEMO 前端可以用
本帖最后由 汪磊 于 2012-12-9 21:59 编辑

以前做博客 时候写的一个周历,感觉还不错 加图片轮播的,需要的可以拿去看看;附一下JS代码:
  1. //计算日期
  2. function GetDateStr(num) {
  3.     var otherDay = new Date();
  4.     otherDay.setDate(otherDay.getDate() + num);//获取num天后的日期
  5.     var otherY = otherDay.getFullYear();
  6.     var otherM = otherDay.getMonth() + 1;//获取当前月份的日期
  7.     var otherD = otherDay.getDate(/dd|DD/);
  8.     var otherD = (otherD < 10) ? '0' + otherD : otherD;
  9.     var y = document.getElementsByClassName("year")[0];
  10.     var m = document.getElementsByClassName("month")[0];
  11.     y.innerHTML = otherY;
  12.     m.innerHTML = otherM+'月';
  13.     return [otherY, otherM, otherD];
  14. }

  15. //写出周历
  16. function getWeek(n) {
  17.     var w = document.getElementsByClassName("slide-triggers")[0];
  18.     var li = w.children;
  19.     var sun = document.getElementsByClassName("date");
  20.     var d = new Date().getDate();
  21.     var m = -n;
  22.     for (a = 0; a <= 7; a++) {
  23.         sun[a].textContent = GetDateStr(m)[2];
  24.         if (sun[a].textContent == d) { li[a].className = 'on';}
  25.         li[a].title = GetDateStr(m)[0] + '年' + GetDateStr(m)[1] + '月' + GetDateStr(m)[2] + '日';
  26.         m++;
  27.     }
  28. }

  29. $(function weekDay() {
  30.     //这里设置轮播的参数
  31.     $(".myweek").slide({ mainCell: ".slide-content ul", titCell: ".slide-triggers li", defaultIndex: day, trigger: "click" })
  32.    //星期判断
  33.     var day = new Date().getDay();
  34.     switch (day) {
  35.         case 1:
  36.             getWeek(1);
  37.             break;
  38.         case 2:
  39.             getWeek(2);
  40.             break;
  41.         case 3:
  42.             getWeek(3);
  43.             break;
  44.         case 4:
  45.             getWeek(4);
  46.             break;
  47.         case 5:
  48.             getWeek(5);
  49.             break;
  50.         case 6:
  51.             getWeek(6);
  52.             break;
  53.         case 0:
  54.             getWeek(0);
  55.             break;
  56.     }
  57. });
复制代码

QQ截图20121209213644.jpg (132.94 KB, 下载次数: 107)

动态周历+图片轮播

动态周历+图片轮播

demo.rar

290.45 KB, 阅读权限: 10, 下载次数: 9


作者: 陈辉    时间: 2012-12-9 21:53
不错,下下来学习一下
作者: 马长江    时间: 2012-12-10 09:17
{:soso_e179:}
作者: 被遗弃者    时间: 2012-12-10 12:16
学习中!!!
作者: 穆爱明    时间: 2013-7-10 09:16
学习一下,感谢分享!




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2