Как бы я обновил только часть кода JavaScript, а не всю страницу? - PullRequest
2 голосов
/ 13 мая 2011

Я пытаюсь выяснить, как заставить этот код обновляться без обновления всей страницы.

Вот как это работает.

  1. Страница открыта.
  2. Пользователю предлагается выбрать синий, зеленый или красный.
  3. Кодсмотрит на дату, а затем определяет час.
  4. Код используется для выбора изображения, которое представляет первую цифру часа.Он также выбирает правильный цвет изображения.

Мне бы хотелось, чтобы этот код обновлялся и отображал новое изображение при изменении времени, а не при перезагрузке страницы, чтобы получить самое текущее время.

Если я обновлю всю страницу, чтобы часы обновлялись каждую секунду, мне каждый раз будет предлагаться выбрать цвет.Я хочу, чтобы это происходило при обновлении страницы, поэтому я просто хочу обновить часть страницы, на которой выполняется часть часов.

Я сократил код, чтобы отображалось только первое изображение,Также есть минуты и секунды, но все они в значительной степени делают то же самое, что и то, как они определяются и отображаются.

Я изменил код здесь, чтобы использовать изображения из URL вместо локальныхпапка, в которой хранится файл, так что вы можете скопировать / вставить его в предпочитаемый HTML-редактор, если хотите.Я использовал TinyURL для сокращения URL в интересах пробела.

    <html>
     <head>
     <script type="text/javascript">
     /*The following two variables are used to determine the hour.*/
     var d = new Date();
     var h = d.getHours();

     /*The following variable is used to pick either 1 or "blank" for 
    the first hour digit and display the corresponding image*/
     var h1
     if(h>=1&&h<=9)
     {
     h1=new Array();
     h1[0]=document.createElement('img');
     h1[0].src= "http://tinyurl.com/3qqsggj ";
     h1[1]=document.createElement('img');
     h1[1].src= "http://tinyurl.com/3n75atp ";
     h1[2]=document.createElement('img');
     h1[2].src= "http://tinyurl.com/3tcha7o ";
     } 
    else if(h>=13&&h<=21)
     {
     h1=new Array();
     h1[0]=document.createElement('img');
     h1[0].src= "http://tinyurl.com/3qqsggj ";
     h1[1]=document.createElement('img');
     h1[1].src= "http://tinyurl.com/3n75atp ";
     h1[2]=document.createElement('img');
     h1[2].src= "http://tinyurl.com/3tcha7o ";
     } 
    else
     { 
    h1=new Array();
     h1[0]=document.createElement('img');
     h1[0].src= "http://tinyurl.com/3s8wt8q ";
     h1[1]=document.createElement('img');
     h1[1].src= "http://tinyurl.com/3rz42gw ";
     h1[2]=document.createElement('img');
     h1[2].src= "http://tinyurl.com/3egvtho ";
     }

     /*The following function is used to take variable h1 and place 
    the image that corresponds to it into the table in the body*/
     function timewrite()
     {
     document.getElementById("hour1").appendChild(h1[colnum]);
     }

     </script>
     </head>
     <!--Body runs function timewrite() upon loading-->
     <body onload="timewrite()"> 
     <table border="5" bordercolor="black">
     <tr>
     <td>
     <span id="hour1"> <!--Here is where the h1 image goes--> </span>
     </td>
     </tr>
     </table>
     <script type="text/javascript">

     /*The following variable is used to determine whether the image
     for blue, green, or red should be shown.*/
     var col=prompt("Please enter blue, green, or red.");
     col=col.toLowerCase()

     /*The following variable converts variable col into a number
     so that it can easily be used to pick the correct h1 array 
    portion in the timewrite() function*/
     var colnum
     if(col=="blue")
     colnum=0;
     else if(col=="green")
     colnum=1;
     else if(col=="red")
     colnum=2;
     else
     colnum=1;
     </script>
     </body>
     </html>

Заранее благодарен за вашу помощь.

Я хотел бы знать, не будут ли setTimeout и / или setInterval эффективными, потому чтопеременные сохраняют свои значения?Как, например, переменные «d» и «h» циклически изменяются один раз, принимают эти значения и затем не изменяют их, если страница не обновляется?Нужно ли помещать переменные в функцию или что-то в этом роде, чтобы их можно было обновлять, или они будут автоматически обновляться при изменении времени?Кстати, я относительно новичок в JavaScript, если вам интересно.

Вот ссылка на весь код, если это поможет.Я делаю понимаю, что это не самый эффективный способ выполнить то, что я делаю, но я новичок в JavaScript, а также это проект, который должен содержать несколько различных концепций программирования.Я это прокомментировал довольно хорошо.http://cid -7cc3864d98261b77.office.live.com / browse.aspx / Shared% 20Files? = 1 ис

Ответы [ 2 ]

4 голосов
/ 13 мая 2011

Что вам нужно сделать, это просто поместить ваш метод в тайм-аут, чтобы он обновлялся позднее (вы, кажется, уже извлекли информацию в метод с именем timewrite:

setInterval(function()
{
    timewrite();
}, 3000);

Эффективно, это устанавливает повторяющийся вызов для записи времени каждые 3 секунды.

1 голос
/ 13 мая 2011

Используйте setTimeout () или setInterval () для повторного запуска кода при необходимости.

...