2015-04-01
1611
- Напишите сценарий, с помощью которого можно выяснить количество дней между заданными датами.
2. Напишите сценарий, который по заданной дате определяет номер недели в году.
3. Напишите сценарий, который по заданному времени определяет количество минут прошедших с 8.00 часов текущего дня.
Элементы управления формы
Переключатели
Переключатели используются в том случае, когда необходимо выбрать один вариант из нескольких.
Элемент «переключатель» отображается в виде круглой кнопки и существует только в составе группы подобных элементов. Может быть осуществлен выбор лишь одного элемента группы. Все элементы группы должны иметь одинаковое значение параметра name. Обязательный параметр value должен иметь уникальное значение для каждого элемента группы.
Объект form имеет свойство-массив elements, в котором содержатся ссылки на элементы формы в порядке их перечисления в теге <form>. Получать доступ к первому элементу формы можно с помощью конструкции document.form1.elements[0]. Свойство checked выдает значение true, если переключатель выбран, и false – в противном случае.
|
|
|
Площадь фигуры, выбранной с помощью переключателя
<html>
<head>
<script>
function test(obj)
{var a=obj.num.value
var s
if(a=="")
{alert("Вы не указали размер")}
else
{a=Number(a)
if(obj.elements[0].checked)
{s=a*a*3.14;obj.res.value=s}
else
if(obj.elements[1].checked)
{s=a*a;obj.res.value=s}
else
alert("Вы не выбрали форму")
}
}
</script>
</head>
<body>
<form name="form1">
<input type=radio name="fv" value=1> круг <br>
<input type=radio name="fv" value=2> квадрат <br>
Выберите размер (радиус круга или сторону квадрата) <br>
<input type="text" name="num" size=10><br>
<input type=button value=Площадь onClick="test(form1)"><br>
<input type=text name="res" size=10><br>
<input type=reset value=Отменить>
</form>
</body>
</html>
Флажки
Элемент управления «флажок» используется в том случае, когда из предложенных вариантов можно выбрать несколько. Флажок определяется в теге <input> значением checkbox параметра type. Обязательным параметром является параметр value, значение которого будет передано на обработку в случае выбора нажатием кнопки.
Обработка результатов тестирования
<html>
<head>
<script>
function grant(obj)
{var k=0;
for(var i=0;i<=6;i++)
if((obj.elements[i]).checked)
{k++}
obj.res.value=k
}
</script>
</head>
<body>
<form name="form1">
<input type=checkbox name=test value=t1> тест1<br>
<input type=checkbox name=test value=t2> тест2<br>
<input type=checkbox name=test value=t3> тест3<br>
<input type=checkbox name=test value=t4> тест4<br>
<input type=checkbox name=test value=t5> тест5<br>
<input type=checkbox name=test value=t6> тест6<br>
<input type=button value=результат onClick="grant(form1)"><br>
сумма баллов по тесту
<input type=text name="res" size=3><br>
<input type=reset value=Отменить>
|
|
|
</form></body></html>
Списки
Если элементов много, представление их с помощью флажков или переключателей увеличивает размер формы. В этом случае варианты выбора могут быть представлены в окне браузера более компактно, с помощью тега <select>. Для того чтобы установить число одновременно видимых элементов, следует задать параметр size=n. Когда n равно 1, отображается меню или раскрывающийся список выбора; при n>1 выводится список с n одновременно видимыми значениями. Если параметр size не задан, по умолчанию =1. Указание параметра multiple означает, что из меню или списка можно выбрать несколько элементов. Элементы меню задаются внутри тега <select> с помощью тега <option> /
Общий вид: <option selected value=строка>
Параметр selected означает, что данный элемент списка считается выбранным по умолчанию. Параметр value содержит значение, которое передается, если данный элемент выбран из списка или меню.
Результаты тестирования представленные списком
<html>
<head>
<script>
function testsel()
{var d=document
var s=0
for(var i=0;i<=5;i++)
{if(((d.forms["form1"].elements[0])[i]).selected)
s+=1
}
return s
}
</script>
</head>
<body>
<form name="form1">
Укажите те тесты, которые вы выполняли<br>
<select name="list" size=4 multiple>
<option value=1>тест 1
<option value=2>тест 2
<option value=3>тест 3
<option value=4>тест 4
<option value=5>тест 5
<option value=6>тест 6
</select>
<br>
<input type=button value=Определить onClick="form1.res.value=testsel()"<br>
Результат:<input type=text name="res" size=10><br>
<input type=reset value=Отменить>
</form></body></html>
Вопросы для повторения
- В каком случае используется элемент “переключатель”? Опишите его синтаксис и свойство, позволяющее определить выбран переключатель или нет.
2. В каком случае используется элемент “список”? Опишите его синтаксис и свойство, позволяющее определить выбран элемент списка или нет.
3. В каком случае используется элемент “переключатель”? Опишите его синтаксис и свойство, позволяющее определить выбран переключатель или нет.
