2011-10-20 60 views
1

我創建了一個簡單的表格,顯示今天的日子以及當天正在運行的課程。我想有一個鏈接,可以前往下一天或前一天查看那些日子裏的課程。以下是我的代碼:使用數組創建一個簡單的next/previous鏈接(JavaScript)

<table border="1"> 
<th><div id="display_day"></div></th> 
<tr> 
<td> 

<script type="text/javascript"> 

var day_today=new Date(); 

var weekday=new Array(7); 
    weekday[0]="Sunday"; 
    weekday[1]="Monday"; 
    weekday[2]="Tuesday"; 
    weekday[3]="Wednesday"; 
    weekday[4]="Thursday"; 
    weekday[5]="Friday"; 
    weekday[6]="Saturday"; 

document.getElementById("display_day").innerHTML=weekday[day_today.getDay()]; /* display in "display_day" div above */ 

if (day_today.getDay()==0) /* sun */ 
    { 
    document.write("No classes today"); 
    } 
    else if (day_today.getDay()==1) /* mon */ 
    { 
    document.write("9.30am - 10.30am: Mixed<br>5pm - 7pm: Mens advanced"); 
    } 
    else if (day_today.getDay()==2)/* tues */ 
    { 
    document.write("5pm - 7pm: Mens<br>7pm - 9pm: Womens"); 
    } 
    else if (day_today.getDay()==3)/* wed */ 
    { 
    document.write("9.30am - 10.30am: Mixed<br>12pm - 1pm: mums and bubs<br>5pm - 7pm: Mens advanced<br>7pm - 9pm: mixed"); 
    } 
    else if (day_today.getDay()==4)/* thurs */ 
    { 
    document.write("4.15pm - 6.15pm: Kids<br>5pm - 7pm: Mens<br>7pm - 9pm: Womens"); 
    } 
    else if (day_today.getDay()==5)/* fri */ 
    { 
    document.write("5pm - 7pm: Mens advanced"); 
    } 
    else if (day_today.getDay()==6)/* sat */ 
    { 
    document.write("8.30am - 10am: Kids<br>10am - 11am: Womens"); 
    } 

</script> 

</td> 
</tr> 
</table> 

任何幫助將不勝感激。

回答

0

試試這個。

HTML

<table border="1"> 
    <tr> 
     <th> 
      <a id="prev" href="#" onclick="ShowOtherSchedule(false)">Previous</a> 
     </th> 
     <th id="display_day"> 
     </th> 
     <th> 
      <a id="next" href="#" onclick="ShowOtherSchedule(true)">Next</a> 
     </th> 
    </tr> 
    <tr> 
     <td> 
     </td> 
     <td id="display_class"> 
     </td> 
     <td> 
     </td> 
    </tr> 
</table> 
<script>ShowSchedule();</script> 

的JavaScript

var today_day = new Date().getDay(); 

function ShowSchedule() { 
    var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], 
     scheduledClass = ""; 

    switch (today_day) { 
    case 0: 
     scheduledClass = "No classes today"; 
     break; 
    case 1: 
     scheduledClass = "9.30am - 10.30am: Mixed<br>5pm - 7pm: Mens advanced"; 
     break; 
    case 2: 
     scheduledClass = "5pm - 7pm: Mens<br>7pm - 9pm: Womens"; 
     break; 
    case 3: 
     scheduledClass = "9.30am - 10.30am: Mixed<br>12pm - 1pm: mums and bubs<br>5pm - 7pm: Mens advanced<br>7pm - 9pm: mixed"; 
     break; 
    case 4: 
     scheduledClass = "4.15pm - 6.15pm: Kids<br>5pm - 7pm: Mens<br>7pm - 9pm: Womens"; 
     break; 
    case 5: 
     scheduledClass = "5pm - 7pm: Mens advanced"; 
     break; 
    case 6: 
     scheduledClass = "8.30am - 10am: Kids<br>10am - 11am: Womens"; 
     break; 

    } 
    document.getElementById("display_day").innerHTML = weekday[today_day]; 
    document.getElementById("display_class").innerHTML = scheduledClass; 
} 

function ShowOtherSchedule(isNextDay) { 
    if (isNextDay) { 
     today_day = (today_day == 6) ? 0 : today_day + 1; 
    } 
    else { 
     today_day = (today_day == 0) ? 6 : today_day - 1; 
    } 
    ShowSchedule(); 
} 

工作演示:http://jsfiddle.net/naveen/xFmc5/

相關問題