使用array (JavaScript)创建一个简单的next / previous链接

Create a simple next / previous link using array (JavaScript)

本文关键字：next previous 链接 简单 JavaScript array 创建 使用 一个      更新时间：2023-09-26

我创建了一个简单的表，显示了今天的日期和当天正在运行的类。我希望有一个链接，以便能够去到第二天或前一天，看看那些天有什么课。下面是我的代码:

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

试试这个

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/

相关文章：