11. Несколько поучительных примеров программирования на JavaScript.

11.1. Программа изменения фонового цвета страницы.

  ПРИМЕР 1

<html>
<head>
<title> Change Background </title>
<script language="LiveScript">
function changeBackground(hexNumber)
{
document.bgColor=hexNumber
}
</script>
</head>
<body>
<center>
<FORM METHOD="POST" NAME="background">
<TABLE BORDER="3" CELLPADDING="3">
<TR>
<TD Align=center colspan=6>Background Color Changer</td></tr>
<tr>
<TD Align=center>
<INPUT TYPE="button" VALUE="red" ONCLICK="changeBackground('#FF0000')"></TD>
<TD Align=center>
<INPUT TYPE="button" VALUE="green" ONCLICK="changeBackground('#00FF00')"></TD>
<TD Align=center>
<INPUT TYPE="button" VALUE="blue" ONCLICK="changeBackground('#0000FF')"></TD>
<TD Align=center>
<INPUT TYPE="button" VALUE="white" ONCLICK="changeBackground('#FFFFFF')"></TD>
<TD Align=center>
<INPUT TYPE="button" VALUE="black" ONCLICK="changeBackground('#000000')"></TD>
<TD Align=center>
<INPUT TYPE="button" VALUE="grey" ONCLICK="changeBackground('#C0C0C0')"></TD>
</tr>
</TABLE>
</form>
</body>
</html>

11.2. Калькулятор.


11. 3. Секундомер и счетчик.

  ПРИМЕР 3

<html>
<head>
<script language="JavaScript">
<!-- Begin
var up,down;
var min1,sec1;
var cmin1,csec1,cmin2,csec2;
function Minutes(data) {
for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":") break;
return(data.substring(0,i)); }
function Seconds(data) {
for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":") break;
return(data.substring(i+1,data.length)); }
function Display(min,sec) {
var disp;
if(min<=9) disp=" 0";
else disp=" ";
disp+=min+":";
if(sec<=9) disp+="0"+sec;
else disp+=sec;
return(disp); }
function Up() {
cmin1=0;
csec1=0;
min1=0+Minutes(document.sw.beg1.value);
sec1=0+Seconds(document.sw.beg1.value);
UpRepeat(); }
function UpRepeat() {
csec1++;
if(csec1==60) { csec1=0; cmin1++; }
document.sw.disp1.value=Display(cmin1,csec1);
if((cmin1==min1)&&(csec1==sec1)) alert("Stopwatch Stopped");
else up=setTimeout("UpRepeat()",1000); }
function Down() {
cmin2=1*Minutes(document.sw.beg2.value);
csec2=0+Seconds(document.sw.beg2.value);
DownRepeat(); }
function DownRepeat() {
csec2--;
if(csec2==-1) { csec2=59; cmin2--; }
document.sw.disp2.value=Display(cmin2,csec2);
if((cmin2==0)&&(csec2==0)) alert("Countdown Stopped");
else down=setTimeout("DownRepeat()",1000); }
// End -->
</script>
</head>

<body>
<center>
<h1>Stopwatch</h1>
<form name="sw">
<table border="0" width="100%">
<tr align="center"><td>
<table border="3" width="100%">
<tr><th colspan="2">Stopwatch</th></tr>
<tr align="center">
   <td>Stop at<br><input type="text" name="beg1" size="7" value="0:10"></td>
   <td><input type="button" value="Start" onclick="Up()"></td></tr>
<tr align="center">
   <td colspan="2"><input type="text" name="disp1" size="7"></td></tr>
</table>
</td>
<td><input type="button" value="Start Both" onclick="Up();Down()"></td><td>

<table border="3" width="100%">
<tr><th colspan="2">Countdown</th></tr>
<tr align="center">
   <td>Start at<br><input type="text" name="beg2" size="7" value="0:10"></td>
   <td><input type="button" value="Start" onclick="Down()"></td>
</tr>
<tr align="center">
   <td colspan="2"><input type="text" name="disp2" size="7"></td></tr>
</table>
</td></tr></table>
</form>
</body>
</html>

11.4. Кнопка возврата.

  ПРИМЕР 4

<html>
<head>
<title> Back button </title>
<script language="JavaScript">
    <!---
        function retrace()
          { history.back() }
    // -->
</script>

<body bgcolor="#dddd" text="#000000">
<form>
    <input type="BUTTON" name="GOBACK" value="GOBACK"
      OnCLick="retrace()" align=right>
</form>
</body>
</html>
 

11.5. Выход с подтверждением.

  ПРИМЕР 5

<HTML>
<HEAD>
<!---------------------------------------------------------->
<script language="JavaScript">
function GoBack() {
        if (confirm("Are you sure you want to go to the previous page?")) {
           history.back()
        }
    }
</script>
</HEAD>

<BODY>
<FORM>
<TABLE BORDER="3" CELLPADDING="3">
<td><INPUT TYPE="button" VALUE="Go Back" ONCLICK="GoBack()"></td>
</table>
</form>
</BODY>
</HTML>

11. 6. Ввод пароля.

  ПРИМЕР 6 ( при запросе пароля наберите, к примеру, количество часов текущего времени)

<html>
<head> <title>My Home Web page</title>
<script language="JavaScript">

function getpass(){
  var pass = prompt("Enter password:","pass");
  dt = new Date();
  var vpass = dt.getHours() + "";
  if(pass == vpass)
      { new_win = window.open("homepage.html");
        self.close(); }
  else {
       alert("Sorry, noncorrect password");
       self.close();

       history.back();
window.location="chckpass.html";
      }
}
</script>
</head>

<body bgcolor="#000000" onload="getpass()">
</body>
</html>

11.7. Время и дата.

  ПРИМЕР 7

<HTML>
<HEAD>

<script language="JavaScript">
<!---
var id;
function stop() {
         clearTimeout(id); }

function rdTime() {
// variables declaration
         var dt=new Date();
         var mm,dd,yy,h,m,s;
         var date=" ",time=" ";
// find out date(mm,dd,yy) and time(h,m,s)
         mm=dt.getMonth()+1;
         dd=dt.getDate();
         yy=dt.getYear();
         h=dt.getHours();
         m=dt.getMinutes();
         s=dt.getSeconds();
        

// show it together

         if(mm==1) date+="Январь";
         if(mm==2) date+="Февраль";
         if(mm==3) date+="Март";
         if(mm==4) date+="Апрель";
         if(mm==5) date+="Май";
         if(mm==6) date+="Июнь";
         if(mm==7) date+="Июль";
         if(mm==8) date+="Август";
         if(mm==9) date+="Сентябрь";
         if(mm==10) date+="Октябрь";
         if(mm==11) date+="Ноябрь";
         if(mm==12) date+="Декабрь";

         date+=" "+dd+", "+(1900+yy);
         time+=h+":"+m+":"+s;
         document.ok.date.value=date;
         document.ok.time.value=time;
// run again in 999 ms
id=setTimeout("rdTime()",999); }
// end -->
</script>
</HEAD>

<BODY onload="rdTime()" onunload="stop()">
<!--------------------------------------->
<center>
<form name="ok">
<input type="text" name="date" size="20">
<input type="text" name="time" size="15">
</form>
</center>
</body>
</html>

11.8. Дата ревизии документа

  ПРИМЕР 8

<script language="JavaScript">
document.write("Last update:" + document.lastModified);
</script>
BACK.gifВернуться к оглавлению