百分求解

刚接触JS一段时间。碰到难题，眼泪已流干，有跳楼的冲动。琢磨的很久就只完成了function addTask()。function deleteTask，function writePersonalTasksToCookie，function readPersonalTasksFromCookie均未完成。不知哪位仁兄肯不岐赐教。先行谢过了。后附问题。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Assignment 2</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #330000;
}.pageTitle {
font-size: 36px;
font-weight: bolder;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
background-color: #006699;
}
.taskPriority {
color: #CC0000;
width: 40px;
float: left;
}
th {
font-weight: bold;
}
.taskDelete {
color: #006699;
}
.borderPage {
padding: 0px;
border-width: 1px;
border-style: solid;
border-color: #006699;
}
a:link {
color: #006699;
}
a:hover {
color: #CC0000;
}
-->
</style>
<script type="text/javascript">
<!--
// Declare GLOBAL variables
var gTaskArray  = new Array(); // Create global array to store Tasks
var sortField  = "msec" //default sort order is msec - uses the msecs of task date to sort by // Declare GLOBAL CONSTANTS
var COOKIE_NAME  = "myTasks" // name of cookie
var COOKIE_HOURS  = 24; // hours that cookie should be kept/* 
function addTask()
Description : DESCRIBE WHAT FUNCTION DOES Passed Parameters :
none
Returned Values :
none
*/
function addTask() {
//*** WRITE YOUR CODE HERE - to add a PERSONAL task to the global Task Array
        gTaskArray[gTaskArray.length] = new Array();
gTaskArray[gTaskArray.length - 1].title     = "CIS1001 A1";
gTaskArray[gTaskArray.length - 1].priority  = 0;
gTaskArray[gTaskArray.length - 1].msec      = new Date("15 August 2008").getTime();
gTaskArray[gTaskArray.length - 1].date      = "15 August 2008";
gTaskArray[gTaskArray.length - 1].type     = "COURSE";
gTaskArray[gTaskArray.length] = new Array();
gTaskArray[gTaskArray.length - 1].title     = "CIS1001 A2";
gTaskArray[gTaskArray.length - 1].priority  = 0;
gTaskArray[gTaskArray.length - 1].msec      = new Date("17 October 2008").getTime();
gTaskArray[gTaskArray.length - 1].date      = "17 October 2008";
gTaskArray[gTaskArray.length - 1].type     = "COURSE";

return;
  
// Re-write cookie with new updated To-Do list 
writePersonalTasksToCookie();

// Display updated To-Do List
  displayTasks(); return;
}/* 
function deleteTask()
Description : DESCRIBE WHAT FUNCTION DOES Passed Parameters :
item - number of array item to be deleted
Returned Values :
none
*/

解决方案 »

  1.   

    function deleteTask(item) {
    //*** WRITE YOUR CODE HERE - to delete a task from the global Task Array


    // Re-write cookie with new updated To-Do list 
    writePersonalTasksToCookie(); // Display updated To-Do List
      displayTasks();
      
      return;
    }/* 
    function writePersonalTasksToCookie()
    Description : DESCRIBE WHAT FUNCTION DOES Passed Parameters :
    none
    Returned Values :
    none
    */
    function writePersonalTasksToCookie() {
    var strCookie  = ""; // formatted text string of PERSONAL tasks to write to cookie//*** WRITE YOUR CODE HERE - to loop through gTaskArray and create formatted text string of all PERSONAL type tasks
    // Re-write cookie with new updated To-Do list - COOKIE_NAME and COOKIE_HOURS are global constants declared above
    writeCookie(COOKIE_NAME, strCookie, COOKIE_HOURS)
    }/* 
    function readPersonalTasksFromCookie()
    Description : DESCRIBE WHAT FUNCTION DOES Passed Parameters :
    none
    Returned Values :
    none
    */
    function readPersonalTasksFromCookie() {
      var cookieValue = readCookie(COOKIE_NAME);
    var taskArray;  // if our cookie does exist - extract the formatted cookie string and add to the Task Array
    if(cookieValue != "") { 
    //*** WRITE YOUR CODE HERE - to extract the formatted task info from the cookie string and add each task to the global Task Array
      }  return;
    }/* 
    function displayTasks()
    Description : PROVIDED FUNCTION
    Sorts the task array by date or priority.  
    Creates the HTML code to display the tasks.
    Updates the div section "taskList" to display the new HTML table of tasks Passed Parameters :
    none
    Returned Values :
    none
    */
    function displayTasks() {
      var taskHTML = "";
      var arrPriority = new Array("High","Med","Low");  // Sort the Task array using the provided sortArray function.
      gTaskArray.sort(sortArray);
      
      // Start the HTML code for the tasks - this starts the HTML code for the table
      taskHTML += '<table border="0" cellspacing="1" cellpadding="3">';
      
      //  Add a HTML table row for each task in the global task array
      for (var i = 0; i < gTaskArray.length; i++) {
        taskHTML += '<tr>';
        taskHTML += '  <td width="65" align="center" bgcolor="#F0F0F0">' + arrPriority[gTaskArray[i].priority] + '</td>'
        taskHTML += '  <td width="356" bgcolor="#F0F0F0">' + gTaskArray[i].title + '</td>'
        taskHTML += '  <td width="136" bgcolor="#F0F0F0">' + gTaskArray[i].date + '</td>'
        taskHTML += '  <td width="66"  bgcolor="#F0F0F0">' + gTaskArray[i].type + '</td>'
        taskHTML += '  <td width="22" align="center" bgcolor="#F0F0F0"> <a href="javascript:deleteTask(' + i + ');">X</a></td>'
        taskHTML += ' </tr>';
      }
      //  End the HTML table code
      taskHTML += '</table>';
      
      // Set the div section "taskList" to display the new HTML table just created.
      document.getElementById("taskList").innerHTML = taskHTML;
      
      return;
    }/* 
    function addCourseTasks()
    Description :  PROVIDED FUNCTION
    Adds pre-set COURSE tasks to the global task array. Passed Parameters :
    none
    Returned Values :
    none
    */
    function addCourseTasks() { // Add pre-set tasks COURSE tasks for CIS1001 assignments to To-Do List
    gTaskArray[gTaskArray.length] = new Array();
    gTaskArray[gTaskArray.length - 1].title     = "CIS1001 A1";
    gTaskArray[gTaskArray.length - 1].priority  = 0;
    gTaskArray[gTaskArray.length - 1].msec      = new Date("15 August 2008").getTime();
    gTaskArray[gTaskArray.length - 1].date      = "15 August 2008";
    gTaskArray[gTaskArray.length - 1].type     = "COURSE";
    gTaskArray[gTaskArray.length] = new Array();
    gTaskArray[gTaskArray.length - 1].title     = "CIS1001 A2";
    gTaskArray[gTaskArray.length - 1].priority  = 0;
    gTaskArray[gTaskArray.length - 1].msec      = new Date("17 October 2008").getTime();
    gTaskArray[gTaskArray.length - 1].date      = "17 October 2008";
    gTaskArray[gTaskArray.length - 1].type     = "COURSE";

    return;
    }
      

  2.   

    /* 
    function readCookie(name)
    Description : PROVIDED FUNCTION
    Reads the cookie specified by the passed 'name' parameter Passed Parameters :
    name - name of cookie to be read
    Returned Values :
    none
    */
    function readCookie(name) {  var cookieValue = "";
      var cookieStart = name + "=";
    var offset;
    var end;  if(document.cookie.length > 0) {     offset = document.cookie.indexOf(cookieStart);    if (offset != -1) {       offset += cookieStart.length;      end = document.cookie.indexOf(";", offset);      if (end == -1) end = document.cookie.length;      cookieValue = unescape(document.cookie.substring(offset, end))
        }
      }  return cookieValue;}/* 
    function writeCookie(name, value, hours)
    Description : PROVIDED FUNCTION
    Saves a cookie specified by the passed 'name' parameter, with the passed parameters for value and hours. Passed Parameters :
    name - name of cookie to be written
    value - cookie value to be saved
    hours - number of hours till cookie expires
    Returned Values :
    none
    */
    function writeCookie(name, value, hours) {  var expire = "";  if(hours != null) {
        expire = new Date((new Date()).getTime() + hours * 3600000);
        expire = "; expires=" + expire.toGMTString();
    }  document.cookie = name + "=" + escape(value) + expire;

    return;
    }/* 
    function sortTasks(field)
    Description :  PROVIDED FUNCTION Passed Parameters :
    field - field to sort Task array by
    Returned Values :
    none
    */
    function sortTasks(field) {
      // Set the new sort by field and then display the tasks - displayTasks() function will sort the tasks before displaying them
      sortField = field; 
      displayTasks();
    }/* 
    function sortArray()
    Description :  PROVIDED FUNCTIONDESCRIBE WHAT FUNCTION DOES Passed Parameters :
    a - pointer to array element
    b - pointer to array element
    Returned Values :
    none
    */
    function sortArray(a, b) {
      var returnVal = 0;
      var x = a.msec;
      var y = b.msec;
      
      if (sortField == "priority") {
        x = a.priority;
        y = b.priority;
      }
      
      if (x < y) {
        returnVal = -1
      } else if (x > y){
        returnVal = 1;
      } else {
        returnVal = 0;
      }
      
      return returnVal;
    }-->
    </script>
    </head><body onload="addCourseTasks();readPersonalTasksFromCookie();displayTasks();">
    <table border="0" align="center" cellpadding="10" cellspacing="0" class="borderPage">
      <tr>
        <td align="center" class="pageTitle">To-Do List   </td>
      </tr>
      <tr>
        <td><form id="fmPics" name="fmPics" method="get" action="">
            <table width="100%" border="0" cellspacing="0" cellpadding="5">
              <tr>
                <td>
                  <legend></legend>              
                  <table border="0" cellpadding="3" cellspacing="1">
                    <tr>
                      <th>Priority </th>
                      <th>New task</th>
                      <th>Due Date </th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <td valign="middle" nowrap="nowrap"><select name="selPriority" id="selPriority">
                        <option value="0">High</option>
                        <option value="1">Med</option>
                        <option value="2">Low</option>
                      </select></td>
                      <td align="right" valign="middle" nowrap="nowrap">
    <input name="txtTask" type="text" class="numFld" id="txtTask" size="40"  /></td>
                      <td valign="bottom"><select name="selDay" id="selDay">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">32</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                        </select>
                        <select name="selMonth" id="selMonth">
                          <option value="January">January</option>
                          <option value="February">February</option>
                          <option value="March">March</option>
                          <option value="April">April</option>
                          <option value="May">May</option>
                          <option value="June">June</option>
                          <option value="July">July</option>
                          <option value="August">August</option>
                          <option value="September">September</option>
                          <option value="October">October</option>
                          <option value="November">November</option>
                          <option value="December">December</option>
                        </select>
                        <select name="selYear" id="selYear">
                          <option value="2008">2008</option>
                          <option value="2009">2009</option>
                          <option value="2010">2010</option>
                        </select>                  </td>
                      <td valign="bottom"><input name="btnAddTask" type="button" id="btnAddTask" value="Add" onclick="addTask();"/></td>
                    </tr>
                </table></td>
              </tr>
            </table>
        </form>    </td></tr>
      <tr>
        <td>
          <table border="0" cellspacing="1" cellpadding="3">
          <tr>
            <th width="65" bgcolor="#E8F3FF"><a href="javascript:sortTasks('priority')">Priority</a></th>
            <th width="356" bgcolor="#E8F3FF">Task</th>
            <th width="136" bgcolor="#E8F3FF"><a href="javascript:sortTasks('date')">Due Date</a> </th>
            <th width="66" bgcolor="#E8F3FF">Type</th>
            <th width="22" bgcolor="#E8F3FF">&nbsp;</th>
          </tr>
          </table>
          <div id="taskList">&nbsp;</div>
        </td>
      </tr>
    </table>
    </body>
    </html>