Работа с цветом в динамическом HTML
Содержание Разноцветная кнопка Непрерывная смена цвета текста Непрерывная смена фона ячейки Разноцветная кнопка
Рассмотрим скрипт на примере изменения цвета кнопки (разноцветная кнопка). Здесь изменение переменной i задается обычным способом с помощью оператора for (i = 0; i <= 13; i++). Эта переменная пробегает по компонентам массива arrColor, содержащего набор цветов. В коде вывода цвета создается задержка. Скрипт сценария. <HTML> <HEAD> <TITLE>tip6</TITLE> <script> arrColor = ["red","#00ff00", "#ff00ff", "#0000ff", "#ffff00", "#ff0000","#00ff00" ,"#ff00ff","#adff2f","#c71585","#40e0d0","#ff00ff","#008000"]; function WW() { for (i = 0; i <= 13; i++) setTimeout ('document.blinkbutton.button.style.background = "'+arrColor[i]+'";', i *500); } WW() </script> </head> <body> <form name = "blinkbutton"> <input type="button" name="button" value=" пуск"> </form> </body> </html> Этот скрипт изменяет цвет кнопки столько раз, сколько цветов содержит массив. Но можно создать кнопку с непрерывным изменением цвета. Скрипт приводится ниже. Для организации непрерывного мигания используется вложенный цикл (один в другом). Частота мигания задается переменной z. Кнопка - "живая". Чтобы убедиться - нажмите кнопку. <HTML> <HEAD> <TITLE>tip6a</TITLE> <script> col = ["red","#00ff00", "#ff00ff", "#0000ff", "#ffff00", "#ff0000","#00ff00" ,"#ff00ff","#adff2f","#c71585","#40e0d0","#ff00ff","#008000"]; var k=0 function WW() { var z=800 for (i = 0; i <= 13; i++) setTimeout('document.blinkbutton.button.style.background ="'+col[i]+'";', i *500); window.setTimeout("WW()",z); k++ if(k>3) } </script> </head> </body> <form name = "blinkbutton"> <input type="button" name="button" value="пуск" onClick="WW()"> </form> </body> </html> Непрерывная смена цвета текста
Скрипт непрерывного изменения цвета текста представлен ниже. По сравнению с предыдущим скриптом здесь изменение переменной (n) задается другим способом - путем наращивания переменной n на единицу. Для вывода цвета (с задержкой) используется идентификатор и свойство innerHTML. Скрипт сценария. <HTML> <HEAD> <TITLE>tip7</TITLE> <span id="txt"><font size=7>цвет меняется НЕПРЕРЫВНО</span> <script> function ZW(){ massive_length=11;/*сколько будет цветов*/ col= new Array(massive_length); col= ["#dc143c","#800080","#FF0000","#0000FF","maroon","#ff00ff", "#ffff00","#c71585","#008000","#40e0d0","red"] var n = 0; function WW(){ txt.innerHTML=col[n]; n++; if(n>massive_length-1) n=0; window.setTimeout("WW()",500); } } </script> Нажмите на кнопку. Через 3 секунды надпись исчезнет сама. Непрерывная смена фона ячейки
Вернемся к скрипту непрерывного изменения цвета текста. Приведенный выше скрипт легко преобразовать в скрипт изменения цвета фона ячейки таблицы, если код перед скриптом заменить на
<p align=center><table border=4 bordercolor=blue width=300 height=200> <td id = "txt"><p align=center><span style='font- size:40;color:yellow'>смена фона ячейки</span></p></td><table/> а в коде вывода color поменять на background: txt.style.background=col[n] Нажмите на кнопку. Через 3 секунды ячейка исчезнет сама.Можно немного усложнить задачу и сделать ячейку в ячейке, у каждой из которых меняется фон. Для этого перед скриптом нужно поставить код:
<p align=center><table border=6 bordercolor=red bgcolor="#ffb6c1"
width=360 height=240> <td id="tim"><p align=center><table border=4
bordercolor=blue width=300 height=160 ><td id = "txt"><p align=center><span style='font-size:40;color:yellow'>можно менять фон
двух ячеек </span>></p></td></table></table> а в самом скрипте добавить строчку tim.style.color=col[n]; Естественно, что потребуется еще один идентификатор ("tim").