收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 7779|回复: 7

[asp] 求一个旅游网站价格日历表显示的实例或者方法

[复制链接]
发表于 2011-11-14 14:56:33 | 显示全部楼层 |阅读模式
QQ截图20111114145249.jpg

类似于这种效果。

旅游网站的价格日历表,后台要能够添加数据,想过fullcalendar 但是貌似后台用asp交互不太好做。

能不能用一个日历直接进行修改?

哪位仁兄做过这种类似的效果或有完整的实例提供?感激不尽!!
发表于 2011-11-14 17:01:27 | 显示全部楼层
ASP你可以参考l-blog的日历。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-11-14 17:56:21 | 显示全部楼层
本帖最后由 xiaohua77 于 2011-11-14 17:58 编辑
  1. <Script LANGUAGE="JavaScript">
  2. var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");
  3. var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
  4. var days = new Array("星期日","星期一", "星期二", "星期三","星期四", "星期五", "星期六");
  5. var classTemp;
  6. var today=new getToday();
  7. var year=today.year;
  8. var month=today.month;
  9. var newCal;

  10. function getDays(month, year) {
  11.   if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
  12.   else return daysInMonth[month];
  13. }

  14. function getToday() {
  15.   this.now = new Date();
  16.   this.year = this.now.getFullYear();
  17.   this.month = this.now.getMonth();
  18.   this.day = this.now.getDate();
  19. }

  20. function Calendar() {
  21.   newCal = new Date(year,month,1);
  22.   today = new getToday();   
  23.   var day = -1;
  24.   var startDay = newCal.getDay();
  25.   var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
  26.   var daily = 0;
  27.   if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
  28.   {
  29.    day = today.day;
  30.   }
  31.   var caltable = document.all.caltable.tBodies.calendar;
  32.   var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());

  33.   for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
  34.    for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
  35.    {
  36.     var cell = caltable.rows[intWeek].cells[intDay];
  37.     var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);         
  38.     if ((intDay == startDay) && (0 == daily)){ daily = 1;}
  39.     var daytemp=daily<10?("0"+daily):(daily);
  40.     var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
  41.     if(day==daily) cell.className="DayNow";
  42.     else if(intDay==6) cell.className = "DaySat";
  43.     else if (intDay==0) cell.className ="DaySun";
  44.     else cell.className="Day";
  45.     if ((daily > 0) && (daily <= intDaysInMonth))
  46.     {
  47.      cell.innerHTML = "<a href=datexiugai.asp?date="+today.year+today.month+daily+">"+daily+"<br/><font color=red size=2>120元</font></a>";
  48.      daily++;
  49.     } else
  50.     {
  51.      cell.className="CalendarTD";
  52.      cell.innerText = "";
  53.     }
  54.   }
  55.   document.all.year.value=year;
  56.   document.all.month.value=month+1;
  57. }

  58. function subMonth()
  59. {
  60.   if ((month-1)<0)
  61.   {
  62.    month=11;
  63.    year=year-1;
  64.   } else
  65.   {
  66.    month=month-1;
  67.   }
  68.   Calendar();
  69. }

  70. function addMonth()
  71. {
  72.   if((month+1)>11)
  73.   {
  74.    month=0;
  75.    year=year+1;
  76.   } else
  77.   {
  78.    month=month+1;
  79.   }
  80.   Calendar();
  81. }

  82. function setDate()
  83. {
  84.   if (document.all.month.value<1||document.all.month.value>12)
  85.   {
  86.    alert("月的有效范围在1-12之间!");
  87.    return;
  88.   }
  89.   year=Math.ceil(document.all.year.value);
  90.   month=Math.ceil(document.all.month.value-1);
  91.   Calendar();
  92. }
  93. </Script>

  94. <Script>
  95. function buttonOver()
  96. {
  97. var obj = window.event.srcElement;
  98. obj.runtimeStyle.cssText = "background-color:#FFFFFF";
  99. // obj.className="Hover";
  100. }

  101. function buttonOut()
  102. {
  103. var obj = window.event.srcElement;
  104. window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
  105. }
  106. </Script>

  107. <Style>
  108. Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height:20px;border: 1px solid #666666;color:#000000;}

  109. .Calendar {font-family: verdana;text-decoration: none;width:670px;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}
  110. .CalendarTD {font-family: verdana;font-size:14px;color: #000000;background-color:#f6f6f6;height:50px;width:11%;text-align: center;}

  111. .Title {font-family: verdana;font-size: 11pt;font-weight: normal;height:34px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;}

  112. .Day {font-family: verdana;font-size:16px;color:#243F65;background-color: #E5E9F2;height: 50px;width:11%;text-align: center;}
  113. .Day a{ text-decoration:none;}
  114. .DaySat {font-family: verdana;font-size: 16px;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;width: 11%;}
  115. .DaySun {font-family: verdana;font-size: 16px;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;width: 11%;}
  116. .DayNow {font-family: verdana;font-size: 16px;font-weight: bold;color: #f00;background-color: #FFFFFF;height: 40px;text-align: center;}

  117. .DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}
  118. .DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 40px;width: 12%;}
  119. .DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 40px;width: 12%;}

  120. .DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}

  121. </Style>


  122. <table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">
  123. <thead>
  124.      <tr align="center" valign="middle">
  125.   <td colspan="7" class="Title">
  126.    <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>
  127.   </td>
  128. </tr>
  129. <tr align="center" valign="middle">
  130.   <Script LANGUAGE="JavaScript">  
  131.    document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>");
  132.    for (var intLoop = 1; intLoop < days.length-1;intLoop++)
  133.     document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>");
  134.     document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>");
  135.   </Script>
  136. </TR>
  137. </thead>
  138. <TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
  139. <Script LANGUAGE="JavaScript">
  140.   for (var intWeeks = 0; intWeeks < 6; intWeeks++)
  141.   {
  142.    document.write("<TR style='cursor:hand'>");
  143.    for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
  144.    document.write("</TR>");
  145.   }
  146. </Script>
  147. </TBODY>
  148. </TABLE>
  149. <Script  LANGUAGE="JavaScript">
  150. Calendar();
  151. </Script>
复制代码
在蓝色里搜索了一位仁兄的js代码。
稍作修改,大体的效果显示出来了。但是还有一个判断不知道怎么做。

就是鼠标放上去的链接只显示今天及今天以后的。。今天之前的就不能够点击。

应该是
if ((daily > 0) && (daily <= intDaysInMonth))
    {
     cell.innerHTML = "<a href=datexiugai.asp?date="+today.year+today.month+daily+">"+daily+"<br/><font color=red size=2>120元</font></a>";
     daily++;
    }
这个地方做个判断,但是无奈水平有限,求高人帮忙指点额。。。

效果如下,貌似等级太低,发不了html代码

QQ截图20111114175758.jpg
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-11-14 18:06:27 | 显示全部楼层
本帖最后由 xiaohua77 于 2011-11-14 18:07 编辑

求高手帮忙解决。
回复 支持 反对

使用道具 举报

发表于 2012-6-27 10:15:00 | 显示全部楼层
看上去挺不错的
回复 支持 反对

使用道具 举报

发表于 2017-6-10 16:11:44 | 显示全部楼层
楼主研究出来了吗,很实用啊,急需这个,要是有的话能不能给我一份啊,谢谢思密达
回复 支持 反对

使用道具 举报

发表于 2018-9-4 15:17:49 | 显示全部楼层
本帖最后由 oerrite 于 2018-9-4 15:22 编辑

QQ图片20180904151201.png
'----前些天重做的考勤系统-----
'---这个日历不在前端生成,而是后台ASP生成,在填写每一天的时候查询当天的记录一并填写;


'---------------------分割线----------------------
如果是前端实现,可以后台生成数组到前端,然后在那个判断的地方从数组里面找就是了。






'--------过期不显示的问题--------------
也是后台生成的时候判断一下当前日期,小于就忽略,大于就输出,搞定。




编辑于2018年9月4日15:21:59
我怎么跟了个坟帖。。。。。
回复 支持 反对

使用道具 举报

发表于 2018-9-12 00:30:47 | 显示全部楼层
楼上的做的不错啊
分享一下啊1
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-29 12:47 , Processed in 0.125660 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表