 |
A$-iam |
||||
Урок по созданию часов DHTML
Сначала создадим html документ с формой и полем ввода
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"></head><body>
<form name="myform1">
<input onkeydown="return false" type="text" size="8" name="texttime" id="texttime"></form>
</body>
</html>
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"></head><body>
<form name="myform1">
<input onkeydown="return false" type="text" size="8" name="texttime" id="texttime"></form>
</body>
</html>
Добавим функцию, которая определяет время и вставляет его в документ, между тегами <head> и </head>
<head>
<script>
<!--
//Функция altime()
function altime(){
//Получение даты и времени
idate = new Date();
//Разделение времени на часы, минуты и секунды
ihours = idate.getHours();
iminutes = idate.getMinutes();
iseconds = idate.getSeconds();
//если число однозначное, то преписываеться 0
if(iminutes<10){
bminutes="0"+iminutes};
if(iminutes>9){
bminutes=iminutes};
if(ihours<10){
bhours="0"+ihours};
if(ihours>9){
bhours=ihours};
if(iseconds<10){
bseconds="0"+iseconds};
if(iseconds>9){
bseconds=iseconds};
//вставка значения в input (id="texttime")
document.myform1.texttime.value=bhours+":"+bminutes+":"+bseconds;
setTimeout("altime();",1000);
};
//-->
</script> </head>
<script>
<!--
//Функция altime()
function altime(){
//Получение даты и времени
idate = new Date();
//Разделение времени на часы, минуты и секунды
ihours = idate.getHours();
iminutes = idate.getMinutes();
iseconds = idate.getSeconds();
//если число однозначное, то преписываеться 0
if(iminutes<10){
bminutes="0"+iminutes};
if(iminutes>9){
bminutes=iminutes};
if(ihours<10){
bhours="0"+ihours};
if(ihours>9){
bhours=ihours};
if(iseconds<10){
bseconds="0"+iseconds};
if(iseconds>9){
bseconds=iseconds};
//вставка значения в input (id="texttime")
document.myform1.texttime.value=bhours+":"+bminutes+":"+bseconds;
setTimeout("altime();",1000);
};
//-->
</script> </head>
Вызов этой функции при загрузке документа в теге body
<body onLoad="altime();">
задание переменных после тега body
<body onLoad="altime();">
<script>
<!--
//задание переменных
var bhours;
var bminutes;
var bseconds;
var ihours;
var iminutes;
var iseconds;
var idate;
//-->
</script>
<script>
<!--
//задание переменных
var bhours;
var bminutes;
var bseconds;
var ihours;
var iminutes;
var iseconds;
var idate;
//-->
</script>
Осталось применить CSS к input (id="texttime") между тегами <head> и </head>
Вот пример:
<!--Загрузка Шрифта//-->
<style>
@font-face {
font-family: "Digital-7"; /* Имя шрифта */
src: url(http://as-iam.narod.ru/files/fonts/digital-7.ttf); /* Путь к файлу со шрифтом */
}
</style>
<!--Стиль для input//-->
<style>
#texttime{
height: 40;
background: black;
font-family: "Digital-7";
font-size: 25;
color: lightgreen;
border-style: inset;
border-width: 3;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
text-align: center; }
</style>
Вот полный текст html документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type">
<!--http://as-iam.narod.ru//-->
<!--Часы//-->
<!--Загрузка Шрифта//-->
<style>
@font-face {
font-family: "Digital-7"; /* Имя шрифта */
src: url(http://as-iam.narod.ru/files/fonts/digital-7.ttf); /* Путь к файлу со шрифтом */
}
</style>
<!--Стиль для input//-->
<style>
#texttime{
height: 40;
background: black;
font-family: "Digital-7";
font-size: 25;
color: lightgreen;
border-style: inset;
border-width: 3;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
text-align: center; }
</style>
<script>
<!--
//Функция altime()
function altime(){
//Получение даты и времени
idate = new Date();
//Разделение времени на часы, минуты и секунды
ihours = idate.getHours();
iminutes = idate.getMinutes();
iseconds = idate.getSeconds();
//если число однозначное, то преписываеться 0
if(iminutes<10){
bminutes="0"+iminutes};
if(iminutes>9){
bminutes=iminutes};
if(ihours<10){
bhours="0"+ihours};
if(ihours>9){
bhours=ihours};
if(iseconds<10){
bseconds="0"+iseconds};
if(iseconds>9){
bseconds=iseconds};
//вставка значения в input (id="texttime")
document.myform1.texttime.value=bhours+":"+bminutes+":"+bseconds;
setTimeout("altime();",1000);
};
//-->
</script></head>
<!--Функция altime() выполняется при загрузке//-->
<body onLoad="altime();">
<script>
<!--
//задание переменных
var bhours;
var bminutes;
var bseconds;
var ihours;
var iminutes;
var iseconds;
var idate;
//-->
</script>
<form name="myform1">
<input onkeydown="return false" type="text" size="8" name="texttime" id="texttime"></form><br>
</body>
</html>
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type">
<!--http://as-iam.narod.ru//-->
<!--Часы//-->
<!--Загрузка Шрифта//-->
<style>
@font-face {
font-family: "Digital-7"; /* Имя шрифта */
src: url(http://as-iam.narod.ru/files/fonts/digital-7.ttf); /* Путь к файлу со шрифтом */
}
</style>
<!--Стиль для input//-->
<style>
#texttime{
height: 40;
background: black;
font-family: "Digital-7";
font-size: 25;
color: lightgreen;
border-style: inset;
border-width: 3;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
text-align: center; }
</style>
<script>
<!--
//Функция altime()
function altime(){
//Получение даты и времени
idate = new Date();
//Разделение времени на часы, минуты и секунды
ihours = idate.getHours();
iminutes = idate.getMinutes();
iseconds = idate.getSeconds();
//если число однозначное, то преписываеться 0
if(iminutes<10){
bminutes="0"+iminutes};
if(iminutes>9){
bminutes=iminutes};
if(ihours<10){
bhours="0"+ihours};
if(ihours>9){
bhours=ihours};
if(iseconds<10){
bseconds="0"+iseconds};
if(iseconds>9){
bseconds=iseconds};
//вставка значения в input (id="texttime")
document.myform1.texttime.value=bhours+":"+bminutes+":"+bseconds;
setTimeout("altime();",1000);
};
//-->
</script></head>
<!--Функция altime() выполняется при загрузке//-->
<body onLoad="altime();">
<script>
<!--
//задание переменных
var bhours;
var bminutes;
var bseconds;
var ihours;
var iminutes;
var iseconds;
var idate;
//-->
</script>
<form name="myform1">
<input onkeydown="return false" type="text" size="8" name="texttime" id="texttime"></form><br>
</body>
</html>
Скачать пример