javascript - 使用数组 (JavaScript) 创建简单的下一个/上一个链接

Question

我创建了一个简单的表格，显示今天以及当天正在运行的类(class)。我想要一个链接，以便能够转到第二天或前一天，查看那些日子有哪些类(class)。下面是我的代码:

<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> 

任何帮助将不胜感激。

Answer 1

试试这个。

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/