ПРИМЕРЫ JAVASCRIPT

ПРИМЕРЫ JAVASCRIPT

ПРИМЕР-41 Прокрутка текста

<HTML>
<HEAD>
<TITLE>Text Block Scrolling</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var line_beak = "\n"
var screen = ""
 
//                   1234567890123456789012345678901234567890
    screen += "Будем прокручивать "
    screen += "Данный фрагмент текста "
    screen += "В поле типа "
    screen += "TEXTAREA                                "
    screen += "формы term "
 
    for(i=0;i<6;i++)
    screen += "                                         "
 
var i=0
var j=40
flag = 0
function scroll()
         {
          if( flag== 0 )
            {
             display_str = ""
             for(k=0;k<11;k++)
                {
                 display_str += screen.substring(i,j)
                 i +=40;j = i + 40
                 if(i>400) i = 0
                }
      window.document.term.work_field.value = display_str
             i += 40 ; if(i>400) i =0
            }
          id = setTimeout("scroll()",1000)
          return true
         }
function change_button()
         {
          if(flag==0)
            {
             flag = 1
             return true
            }
          if(flag == 1)
            {
             flag = 0
             return false
            }
         }
</SCRIPT>
</HEAD>

<BODY onLoad="scroll()">
<CENTER>
<H1>Text Block Scrolling.</H1>
<HR>
<FORM NAME=term>

ПРИМЕР-42 Календарь 2000 - 2004

<HEAD>

<!-- Begin
var dDate = new Date();
var dCurMonth = dDate.getMonth();
var dCurDayOfMonth = dDate.getDate();
var dCurYear = dDate.getFullYear();
var objPrevElement = new Object();

<BODY>

<table border="1">
<tr>
<td>
<select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<option value="1">Январь</option>
<option value="2">Февраль</option>
<option value="3">Март</option>
<option value="4">Апрель</option>
<option value="5">Май</option>
<option value="6">Июнь</option>
<option value="7">Июль</option>
<option value="8">Август</option>
<option value="9">Сентябрь</option>
<option value="10">Октябрь</option>
<option value="11">Ноябрь</option>
<option value="12">Декабрь</option>
</select>
  
<select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
</td>
</tr>
<tr>
<td>
<script language="JavaScript">
var dCurDate = new Date();
fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);
</script>
</td>
</tr>
</table>
</form>

</body>

ПРИМЕР-43 Электронные часики(24H)

timestr = "00:00:00";
tid = 0;
pause = 0;
var to;
var bcount;
var tcount;

function writer(){
document.write("test"); 
}

function start(x) {
  f=x;
                to=60;
  time(x);
  }

function cleartids() {
 window.clearTimeout(tid);
}

</script>

</body>

ПРИМЕР-44 Электронные часики(АМ/PM)
ПРИМЕР-45 Часы(24H)
Включаются после нажатия ПРИМЕР-46 Время в разных городах

<head>

var worldtime = new Array()
worldtime[0]="Azores,-1"
worldtime[1]="Baghdad,3"
worldtime[2]="Beijing,8"
worldtime[3]="Berlin,1"
worldtime[4]="Buenos Aires,-3"
worldtime[5]="Chicago,-6"
worldtime[6]="Denver,-7"
worldtime[7]="Hong Kong,8"
worldtime[8]="Honolulu,-10"
worldtime[9]="Johannesburg,2"
worldtime[10]="Kairo,2"
worldtime[11]="Lima,-5"
worldtime[12]="London,0"
worldtime[13]="Mexico City,-6"
worldtime[14]="Moscow,4"
worldtime[15]="New York,-5"
worldtime[16]="Paris,1"
worldtime[17]="Perth,8"
worldtime[18]="Rio de Janheiro,-2"
worldtime[19]="San Francisco,-8"
worldtime[20]="Sydney,11"
worldtime[21]="Tokyo,9"

var hours
var shifthours
var minutes
var seconds
var localhours
var pause=2000
var thisplace
var thisline=""
var showmenu=1

function showtime() {

for (i=0; i<=worldtime.length-1;i++) {
  thisplace=worldtime[i].split(",")
  thistime= new Date()
  hours=thistime.getUTCHours()
  hours=eval(hours)
  shifthours=eval(thisplace[1])
  localhours=eval(shifthours+hours)
  if (localhours <0) {localhours=24+localhours}
  if (localhours >=24) {localhours=localhours-24}
 
  minutes=thistime.getUTCMinutes()
  seconds=thistime.getUTCSeconds()
 
  if (thisplace[0]=='Delhi') {
   minutes=eval(minutes+30)
   if (minutes>=60) {
    minutes=eval(minutes-60)
    localhours=eval(localhours+1)
   }
  }
  if (eval(minutes) < 10) {minutes="0"+minutes}
  if (eval(seconds) < 10) {seconds="0"+seconds}
  if (eval(localhours) < 10) {localhours="0"+localhours}
  thisline+=localhours+":"+minutes+":"+seconds+" "+thisplace[0]+"<br>"
 }
 if (document.all) {
  timediv.innerHTML=thisline
  thisline=""
  var timer=setTimeout("showtime()",1000)
 }
 if (document.layers) {
  document.timediv.document.write("<span id='nn' class='timestyle'>")
  document.timediv.document.write(thisline)
  document.timediv.document.write("</span>")
  document.timediv.document.close()
  thisline=""
 }
}
 
function dblclick() {
 if (document.all && showmenu==1) {
  document.all.timediv.style.visibility="visible"
  document.all.timediv.style.posLeft=x
  document.all.timediv.style.posTop=y
  showtime()
 }
 if (document.layers && showmenu==1) {
  document.timediv.visibility="visible"
  document.timediv.left=x-40
  document.timediv.top=y-80
  showtime()
 }
 if (document.all && showmenu!=1) {
  document.all.timediv.style.visibility="hidden"
 }
 if (document.layers && showmenu!=1) {
  document.timediv.visibility="hidden"
 }
 showmenu=showmenu*-1
}

if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;

if (document.layers){
 document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

function handlerMM(e){
 x = (document.layers) ? e.pageX : event.clientX
 y = (document.layers) ? e.pageY : event.clientY
}

// - End of JavaScript - -->
</script>
<STYLE>
.timestyle {
position:absolute; 
left:50px; 
top:100px;
font-family:Verdana;
font-size:8pt;
color:880000;
background-color:DDDDFF;
}

.explainstyle {
position:absolute; 
left:10px; 
top:160px;
font-family:Verdana;
font-size:8pt;
color:000000;

}
</STYLE>
</head>
<body bgcolor=#FFFFFF>

<DIV id=source class="explainstyle"><b>Часы появятся/исчезнут при двойном клике мышью</b></DIV>

</body>

ПРИМЕР-47 Мировое время в строке статуса

<head>

var worldtime = new Array()
worldtime[0]="Azores,-2"
worldtime[1]="Baghdad,3"
worldtime[2]="Beijing,8"
worldtime[3]="Berlin,2"
worldtime[4]="Buenos Aires,-3"
worldtime[5]="Chicago,-6"
worldtime[6]="Denver,-7"
worldtime[7]="Hong Kong,8"
worldtime[8]="Honolulu,-10"
worldtime[9]="Johannesburg,2"
worldtime[10]="Kairo,2"
worldtime[11]="Lima,-5"
worldtime[12]="London,0"
worldtime[13]="Mexico City,-6"
worldtime[14]="Moscow,4"
worldtime[15]="New York,-5"
worldtime[16]="Paris,1"
worldtime[17]="Perth,8"
worldtime[18]="Rio de Janheiro,-3"
worldtime[19]="San Francisco,-8"
worldtime[20]="Sydney,11"
worldtime[21]="Tokyo,9"

// The speed of the ticker (milliseconds)
var speed=1000

// The length of the steps
var step=10

// Do not edit the variables below
var hours
var shifthours
var minutes
var seconds
var localhours
var thisplace
var i_substring=0

var content

function extracttime() {
content=" -------------------------------------"
for (i=0;i<=worldtime.length-1;i++) {
 thisplace=worldtime[i].split(",")
 thistime= new Date()
 hours=thistime.getUTCHours()
 hours=eval(hours)
 shifthours=eval(thisplace[1])
 localhours=eval(shifthours+hours)
 if (localhours <0) {localhours=24+localhours}
 if (localhours >=24) {localhours=localhours-24}
 
 minutes=thistime.getUTCMinutes()
 seconds=thistime.getUTCSeconds()
 
 if (thisplace[0]=='Delhi') {
  minutes=eval(minutes+30)
  if (minutes>=60) {
   minutes=eval(minutes-60)
   localhours=eval(localhours+1)
  }
 }
 if (eval(minutes) < 10) {minutes="0"+minutes}
 if (eval(seconds) < 10) {seconds="0"+seconds}
 if (eval(localhours) < 10) {localhours="0"+localhours}
 thistime = localhours+":"+minutes
 content+=" ------ "+thisplace[0]+": "+thistime
 }
 content+=" -------------------------------------"
 scrolltime()
}

function scrolltime() {
 if (i_substring<=content.length-1) {
  window.status=content.substring(i_substring,content.length-1)
  i_substring=i_substring+step
  var timer=setTimeout("extracttime()",speed)
 }
 else {
  i_substring=0
  clearTimeout(timer)
  extracttime()
 }
}

// - End of JavaScript - -->
</script>

</head>
<body bgcolor=#FFFFFF onLoad="extracttime()">

<DIV ID="deletethisblock" class="redirstyle" style="position:absolute;left:10px;top:110px;color:000000;font-family:Verdana;font-size:10pt">
Мировое время в строке статуса
</DIV>

</body>

ПРИМЕР-48 Прозрачные часы

<head>

// - End of JavaScript - -->
</script>
<STYLE>
A {
color:0000FF;
text-decoration:none;
}
</STYLE>
</head>
<body onLoad="clockon()">

<div id="mainbody" style="position:absolute; visibility:visible">
<table cellpadding=7 width="100%">
<tr>
 <td colspan=3 align=center>
<H1>ВСЕ ДЛЯ ВЕБМАСТЕРА</H1>
</td>
</tr>
<tr>
 <td valign=top>
<font size=-2 face="Verdana">
<a href="http://www.eurostar.com.ua/java.htm" target="_blank">Примеры JavaScript</a><p>
<a href="http://www.eurostar.com.ua/applets.htm" target="_blank">Примеры апплетов</a><p>
<a href="http://www.eurostar.com.ua/notes.htm" target="_blank">Архив статей</a><p>
<a href="http://www.eurostar.com.ua/promotion.htm" target="_blank">Раскрутка сайта</a><p>

</font>
</td>

<td valign=top>
<font size=2 face="Verdana">
Вы создали новый оригинальный проект, разместили на хорошем хостинге, поставили счетчики, но они день за днем показывают только Ваши заходы, а также заходы Ваших друзей и коллег. 
Что делать? Неужели ничего нельзя сделать? Можно!
Если Вы уверены, что Ваш сайт выглядит так, что не отталкивает своим видом, <br>
<center>
<a href="http://www.eurostar.com.ua/promotion.htm" target="_blank">Вы можете начинать</a><p>

</font>
</td>

<td valign=top>
<font size=-2 face="Verdana">
<a href="http://www.eurostar.com.ua/rassylka/glossar-1.htm" target="_blank">Основные термины Интернет</a><p>
<a href="http://www.eurostar.com.ua/rassylka/colortable.htm" target="_blank">Таблица цветовых кодов</a><p>
<a href="http://www.eurostar.com.ua/html.htm" target="_blank">HTML справочник</a><p>

</font>
</td>
</tr>
</table>
</div>

</body>

ПРИМЕР-49 Календарь(1 месяц + время)

<HEAD>
 <TITLE>Календарь</TITLE>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#7F007F" ALINK="#FF0000">
<SCRIPT LANGUAGE="JavaScript">
<!--

setCal()

function getTime() {

// initialize time-related variables with current time settings

var now = new Date()

var hour = now.getHours()

var minute = now.getMinutes()

now = null

var ampm = ""

// validate hour values	and set value of ampm

if (hour >= 12) {

hour -= 12

ampm = "PM"

} else

ampm = "AM"

hour = (hour == 0) ? 12 : hour

// add zero digit to a one digit minute

if (minute < 10)

minute = "0" + minute // do not parse this number!

// return time string

return hour + ":" + minute + " " + ampm

}

function leapYear(year) {

if (year % 4 == 0) // basic rule

return true // is leap year

/* else */ // else not needed when statement is "return"

return false // is not leap year

}

function getDays(month, year) {

// create array to hold number of days in each month

var ar = new Array(12)

ar[0] = 31 // January

ar[1] = (leapYear(year)) ? 29 : 28 // February

ar[2] = 31 // March

ar[3] = 30 // April

ar[4] = 31 // May

ar[5] = 30 // June

ar[6] = 31 // July

ar[7] = 31 // August

ar[8] = 30 // September

ar[9] = 31 // October

ar[10] = 30 // November

ar[11] = 31 // December

// return number of days in the specified month (parameter)

return ar[month]

}

function getMonthName(month) {

// create array to hold name of each month

var ar = new Array(12)

ar[0] = "January"

ar[1] = "February"

ar[2] = "March"

ar[3] = "April"

ar[4] = "May"

ar[5] = "June"

ar[6] = "July"

ar[7] = "August"

ar[8] = "September"

ar[9] = "October"

ar[10] = "November"

ar[11] = "December"

// return name of specified month (parameter)

return ar[month]

}

function setCal() {

// standard time attributes

var now = new Date()

var year = now.getYear()

var month = now.getMonth()

var monthName = getMonthName(month)

var date = now.getDate()

now = null

// create instance of first day of month, and extract the day on which it occurs

var firstDayInstance = new Date(year, month, 1)

var firstDay = firstDayInstance.getDay()

firstDayInstance = null

// number of days in current month

var days = getDays(month, year)

// call function to draw calendar

drawCal(firstDay + 0, days, date, monthName, 0 + year)

}

function drawCal(firstDay, lastDate, date, monthName, year) {

// constant table settings

var headerHeight = 50 // height of the table's header cell

var border = 2 // 3D height of table's border

var cellspacing = 4 // width of table's border

var headerColor = "midnightblue" // color of table's header

var headerSize = "+3" // size of tables header font

var colWidth = 50 // width of columns in table

var dayCellHeight = 25 // height of cells containing days of the week

var dayColor = "darkblue" // color of font representing week days

var cellHeight = 40 // height of cells representing dates in the calendar

var todayColor = "red" // color specifying today's date in the calendar

var timeColor = "purple" // color of font representing current time

// create basic table structure

var text = "" // initialize accumulative variable to empty string

text += '<CENTER>'

text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>' // table settings

text += 	'<TH COLSPAN=7 HEIGHT=' + headerHeight + '>' // create table header cell

text += 		'<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>' // set font for table header

text += 			monthName + ' ' + year

text += 		'</FONT>' // close table header's font settings

text += 	'</TH>' // close header cell

// variables to hold constant settings

var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'

openCol += '<FONT COLOR="' + dayColor + '">'

var closeCol = '</FONT></TD>'

// create array of abbreviated day names

var weekDay = new Array(7)

weekDay[0] = "Sun"

weekDay[1] = "Mon"

weekDay[2] = "Tues"

weekDay[3] = "Wed"

weekDay[4] = "Thu"

weekDay[5] = "Fri"

weekDay[6] = "Sat"

// create first row of table to set column width and specify week day

text += '<TR ALIGN="center" VALIGN="center">'

for (var dayNum = 0; dayNum < 7; ++dayNum) {

text += openCol + weekDay[dayNum] + closeCol

}

text += '</TR>'

// declaration and initialization of two variables to help with tables

var digit = 1

var curCell = 1

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {

text += '<TR ALIGN="right" VALIGN="top">'

for (var col = 1; col <= 7; ++col) {

if (digit > lastDate)

break

if (curCell < firstDay) {

text += '<TD></TD>'

curCell++

} else {

if (digit == date) { // current cell represent today's date

text += '<TD HEIGHT=' + cellHeight + '>'

text += '<FONT COLOR="' + todayColor + '">'

text += digit

text += '</FONT><BR>'

text += '<FONT COLOR="' + timeColor + '" SIZE=2>'

text += '<CENTER>' + getTime() + '</CENTER>'

text += '</FONT>'

text += '</TD>'

} else

text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'

digit++

}

text += '</TR>'

}

// close all basic table tags

text += '</TABLE>'

text += '</CENTER>'

// print accumulative HTML string

document.write(text)

}

// -->

</SCRIPT>
</BODY>

ПРИМЕР-50 Число, время прописью

ВСЕ ПРИМЕРЫ JavaScript

Архив статей - Все для вебмастера!