 |
 |
 |
Λίστα θεμάτων με λίστες ένθετες
σε άλλες λίστες
<HTML>
<HEAD>
<TITLE>Directory</TITLE>
</HEAD>
<BODY BGCOLOR="??????" TEXT="??8???"
>
<UL>
<LI>Multi-Part Documents
<UL>
<LI>Reload Part of the Window
<LI>Interactive Documents
</UL>
<LI>More Control over User Interaction
<LI>Documents with Memory
<LI>Live Documents
<UL>
<LI>Scrolling Messages
<LI>Clocks
<LI>Countdown Timers
<LI>Self-Updating Documents
</UL>
</UL>
</BODY>
</HTML>
Διαιρεί την οθόνη σε δύο γραμμές.
<HTML>
<HEAD>
<TITLE>Self-Modifying Document</TITLE>
</HEAD>
<FRAMESET ROWS="6?%,*">
<FRAME SRC="input.htm" NAME="input"
SCROLLING="auto"
MARGINWIDTH=1 MARGINHEIGHT=1 NORESIZE>
<FRAMESET ROWS="78%">
<FRAME SRC="output.htm" NAME="output"
SCROLLING="auto"
MARGINWIDTH=1 MARGINHEIGHT=1 NORESIZE>
</FRAMESET>
</FRAMESET>
</HTML>
Δημιουργία φόρμας μέσα στην οποία
μπορείτε να γράψετε το μικρό όνομα το μεσαίο και το επίθετο.
<HTML>
<HEAD>
<TITLE>Input</TITLE>
<SCRIPT>
<!-- hide script
function sayHello(form)
{
parent.output.document.open();
parent.output.document.open();
var gt = unescape("%3E");
parent.output.document.write("<HTML"
+ gt);
parent.output.document.write("<BODY
BGCOLOR='??4???' TEXT='FFFFFF'"
+ gt);
parent.output.document.write("Hello
" + form.firstName.value + " " +
form.middleName.value + " " + form.lastName.value);
parent.output.document.write("</BODY"
+ gt);
parent.output.document.write("</HTML"
+ gt);
parent.output.document.close();
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="??4???" TEXT="FFFFFF"
>
<FORM NAME="form">
<INPUT TYPE=TEXT SIZE=2? NAME="firstName">
First Name
<BR>
<INPUT TYPE=TEXT SIZE=2? NAME="middleName">
Middle Name
<BR>
<INPUT TYPE=TEXT SIZE=2? NAME="lastName">
Last Name
<BR>
<INPUT TYPE=BUTTON VALUE="Say
Hello"
ONCLICK="sayHello(this.form)">
</FORM>
</BODY>
</HTML>
Εμφάνιση της πληροφορίας στη περιοχή
του παραθύρου κατάστασης.
<HTML>
<HEAD>
<TITLE>Focus, Blur, Select, Change,
Click Test</TITLE>
<SCRIPT>
!--
function announce(widgetName, eventType)
{
status = "The " + widgetName + "
field just experienced a " +
eventType + " event";
return true;
}
//-->
</SCRIPT>
</HEAD>
<BODY >
<FORM ONSUBMIT="return false">
<INPUT TYPE=BUTTON NAME="button"
VALUE="button"
ONCLICK="announce('button','click')">
<INPUT TYPE=CHECKBOX NAME="checkbox"
ONCLICK="announce('checkbox','click')">A
<INPUT TYPE=CHECKBOX NAME="checkbox"
NCLICK="announce('checkbox','click')">B
<INPUT TYPE=CHECKBOX NAME="checkbox"
ONCLICK="announce('checkbox','click')">C
<INPUT TYPE=RADIO NAME='radio'
ONCLICK="announce('radio','click')">AM
<INPUT TYPE=RADIO NAME='radio'
ONCLICK="announce('radio','click')">FM
<BR>
<INPUT TYPE=RESET NAME="reset"
ONCLICK="announce('reset','click')">
<BR>
<INPUT TYPE=SUBMIT NAME="submit"
ONCLICK="announce('submit','click')">
<BR>
<INPUT TYPE=TEXT NAME="text"
SIZE=1?
ONBLUR="announce('text','blur')"
ONCHANGE="announce('text','change')"
ONFOCUS="announce('text','focus')"
ONSELECT="announce('text','select')">
<BR>
<TEXTAREA NAME="textArea" COLS="2?"
ROWS="2"
ONBLUR="announce('textarea','blur')"
ONCHANGE="announce('textarea','change')"
ONFOCUS="announce('textarea','focus')"
ONSELECT="announce('textarea','select')"
Sample Text
</TEXTAREA>
<BR>
<SELECT NAME="select"
ONBLUR="announce('select','blur')"
ONCHANGE="announce('select','change')"
ONFOCUS="announce('select','focus')">
<OPTION>Option 1
<OPTION>Option 2
<OPTION>Option 3
</SELECT>
</FORM>
</BODY>
</HTML>
Με τον παρακάτω κώδικα ένα alert
παράθυρο αναδύεται όταν το πεδίο κειμένου λαμβάνει προσοχή.
<HTML>
<HEAD>
<TITLE>Endless Loop</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=TEXT NAME="text"
SIZE=1?
ONFOCUS="alert('Here we go again...')">
</FORM>
</BODY>
</HTML>
Δημιουργία μηνύματος που ολισθαίνει.
<HTML>
<HEAD>
<TITLE>Scrolling Message</TITLE>
<SCRIPT>
<!--
var winLength = 2??; // guess at
how many spaces wide the status bar is
var speed = 1??; // number of milliseconds
between updates
function scroll(count)
{
var msg = "Hi! This is my scrolling
message in the status bar.";
var out = " ";
var cmd = "scroll(";
if (count <= winLength &&
? < count)
{
var c = ?;
for (c = ? ; c < count ; c++)
{
out += " ";
}
out += msg;
}
else if (count <= ?)
{
if (-count < msg.length)
{
out += msg.substring(-count,msg.length);
}
else
{
count = winLength + 1;
}
}
window.status = out;
count--;
cmd += count + ")";
window.setTimeout(cmd,speed);
}
//-->
</SCRIPT>
</HEAD>
<BODY ONLOAD="window.setTimeout('scroll(winLength)',speed);">
</BODY>
</HTML>
Ένα απλό ρολόι στην μπάρα κατάστασης.
<HEAD>
<TITLE>Clock</TITLE>
<SCRIPT>
<!--
function updateTime()
{
var now = new Date();
var time = "" + now.getHours() +
":";
var minute = now.getMinutes();
if (minute < 1?)
{
time += "?";
}
time += minute + ":";
var second = now.getSeconds();
if (second < 1?)
{
time += "?";
}
time += second;
window.status = time;
window.setTimeout("updateTime()",1???);
}
//-->
</SCRIPT>
</HEAD>
<BODY ONLOAD="window.setTimeout('updateTime()',1???);">
</BODY>
</HTML>
Δημιουργία χρονικού μηχανισμού
αντίστροφης μέτρησης
<HTML>
<HEAD>
<TITLE>Count Down</TITLE>
<SCRIPT>
<!--
function countDown(tick)
{
if (tick == ?)
{
window.status = "We have liftoff...";
return;
}
var time = "T minus ";
var minute = Math.floor(tick / 6?);
if (minute < 1?)
{
time += "?";
}
time += minute + ":";
var second = tick % 6?;
if (second < 1?)
{
time += "?";
}
time += second;
window.status = time;
--tick;
var command = "countDown(" + tick
+ ")";
window.setTimeout(command,1???);
}
//-->
</SCRIPT>
</HEAD>
<BODY ONLOAD="window.setTimeout('countDown(12?)',1???);">
</BODY>
</HTML>
Άνοιγμα δευτερογενών παραθύρων
Πρώτα βάλτε τα παρακάτω στην αρχή
του HTML εγγράφου:
<head>
<SCRIPT LANGUAGE = "JAVASCRIPT''>
<!--
function WinOpen( ) {
open("Window.htm'',"Window1", "toolbar
= yes''); }
//-->
</SCRIPT>
</head>
Κάπου στο έγγραφο προσθέστε τα εξής
:
<form>
<input type = "button'' name
= "WindowButton'' value ="Δευτερογενές Παράθυρο -Πάτησε με "onclick="WinOpen
( )''>
</form>
Αυτόματη προώθηση με επιβεβαίωση
<SCRIPT LANGUAGE = "JAVASCRIPT''>
<!--
function redirect ( ) {
if ( confirm ( "Η έχει μεταφερθεί.
Παρακαλούμε σημειώστε την καινούργια της θέση και ζητήστε από τον ιδιοκτήτη
της σελίδας από την οποία ήρθατε να αλλάξει τον σύνδεσμο. Πατήστε OK για
να πάτε στη νέα σελίδα.'')) {
location='2-12A.htm'
}
}
<!--Τέλος-->
</SCRIPT>
</HEAD>
<BODY onload = "redirect ( )''>
Συλλογή φωτογραφιών της JavaScript
Ακολουθεί ο κώδικας για μια συλλογή
φωτογραφιών της JavaScript. Επιτρέπει στο χρήστη να επιλέγει από έναν αριθμό
φωτογραφιών ενώ διατηρεί το υπόλοιπο μέρος της σελίδας σταθερό.
<head>
<script language="JavaScript">
<!--
which_image_loaded = 0;
NUMBER_OF_IMAGES = 20; // Change
to the number of images you wish to display.
ImageNames = new Array;
ImageNames.length = NUMBER_OF_IMAGES
- 1;
for (counter = 0; counter < NUMBER_OF_IMAGES;
counter++){
file_number = counter + 1;
filename = ("image" + file_number
+ ".jpg");
ImageNames[counter] = filename;
}
function changeImage(direction){
which_image_loaded += direction;
if (which_image_loaded < 0){
which_image_loaded = NUMBER_OF_IMAGES
- 1;
}
if (which_image_loaded == NUMBER_OF_IMAGES){
which_image_loaded = 0;
}
document.myimage.src = ImageNumber[which_image_loaded];
}
//-->
</script>
Για να χρησιμοποιήσετε τον συγκεκριμένο
κώδικα πρέπει να ονομάσετε τις φωτογραφίες που θέλετε να εμφανίσετε μέσα
στη συλλογή ως image1.jpg image2.jpg κ.τ.λ. Δώστε στην μεταβλητή NUMBER_OF_IMAGES
τον αριθμό των φωτογραφιών που θα εμφανίσετε μέσα στην συλλογή.
Εκεί που θέλετε να εμφανίσετε τη
συλλογή προσθέστε τον παρακάτω κώδικα:
<img name="myimage" src="image1.jpg">
Προσοχή: Για να βελτιώσετε την εμφάνιση
της συλλογής καθορίστε το εύρος και το ύψος της φωτογραφίας (υποθέτωντας
ότι κάθε φωτογραφία είναι του ιδίου μεγέθους).
Εκεί που θέλετε να τοποθετήσετε
τα κουμπιά της συλλογής προσθέστε τον παρακάτω κώδικα (συνήθως κάτω από
την ετικέτα της φωτογραφίας):
<form>
<input type="button" value="<<"
onClick='changeImage(-1);'>
<input type="button" value=">>"
onClick='changeImage(1);'>
</form>
Δημιουργώντας απλά κινούμενα σχέδια
<HTML><HEAD>
<SCRIPT>
var img0 = new Image( 250, 50 );
img0.src = "../images/jht.gif";
var img1 = new Image( 250, 50 );
img1.src = "../images/jsht.gif";
var img2 = new Image( 250, 50 );
img2.src = "../images/pht.gif";
var i = 0;
var nbImg = 3; // change to the
number of different images you have
function animate() {
document.images[0].src = eval("img"
+ i ).src;
i++;
if (i == nbImg) i=0;
junk = setTimeout("animate();",
500); // in milliseconds
}
</SCRIPT>
<HEAD> <BODY ONLOAD="ANIMATE();">
<IMG srs="" width=250 height=50>
</BODY></HTML>
Φορτώνοντας ένα διαφορετικό χρώμα
φόντου βασιζόμενο στην ώρα της ημέρας.
Οδηγίες: Τοποθετήστε τον παρακάτω
κώδικα ακριβώς μετά την ετικέτα </head>.
<script>
<!--
var now = new Date();
var hours = now.getHours();
var psj=0;
//18-19 night
if (hours > 17 && hours
< 20){
document.write('<body bgcolor="orange"
text="#FFFFFF">')
}
//20-21 night
if (hours > 19 && hours
< 22){
document.write('<body bgcolor="orangered"
text="#FFFFFF">')
}
//22-4 night
if (hours > 21 || hours < 5){
document.write('<body bgcolor="black"
text="#FFFFFF">')
}
//9-17 day
if (hours > 8 && hours <
18){
document.write('<body bgcolor="deepskyblue"
text="#FFFFFF">')
}
//7-8 day
if (hours > 6 && hours <
9){
document.write('<body bgcolor="skyblue"
text="#FFFFFF">')
}
//5-6 day
if (hours > 4 && hours <
7){
document.write('<body bgcolor="steelblue"
text="#FFFFFF">')
}
//-->
</script>
Συνεχής εναλλαγή του χρώματος
του φόντου χρησιμοποιώντας μια ποικιλία χρωμάτων.
Βήμα 1: Τοποθετήστε τον παρακάτω
κώδικα μέσα στο <head> τμήμα της σελίδας σας:
<script language="JavaScript">
<!--
//you can assign the initial color
of the background here
r=255;
g=255;
b=255;
flag=0;
t=new Array;
o=new Array;
d=new Array;
function hex(a,c)
{
t[a]=Math.floor(c/16)
o[a]=c%16
switch (t[a])
{
case 10:
t[a]='A';
break;
case 11:
t[a]='B';
break;
case 12:
t[a]='C';
break;
case 13:
t[a]='D';
break;
case 14:
t[a]='E';
break;
case 15:
t[a]='F';
break;
default:
break;
}
switch (o[a])
{
case 10:
o[a]='A';
break;
case 11:
o[a]='B';
break;
case 12:
o[a]='C';
break;
case 13:
o[a]='D';
break;
case 14:
o[a]='E';
break;
case 15:
o[a]='F';
break;
default:
break;
}
}
function ran(a,c)
{
if ((Math.random()>2/3||c==0)&&c<255)
{
c++
d[a]=2;
}
else
{
if ((Math.random()<=1/2||c==255)&&c>0)
{
c--
d[a]=1;
}
else d[a]=0;
}
return c
}
function do_it(a,c)
{
if ((d[a]==2&&c<255)||c==0)
{
c++
d[a]=2
}
else
if ((d[a]==1&&c>0)||c==255)
{
c--;
d[a]=1;
}
if (a==3)
{
if (d[1]==0&&d[2]==0&&d[3]==0)
flag=1
}
return c
}
function disco()
{
if (flag==0)
{
r=ran(1, r);
g=ran(2, g);
b=ran(3, b);
hex(1,r)
hex(2,g)
hex(3,b)
document.bgColor="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag=50
}
else
{
r=do_it(1, r)
g=do_it(2,g)
b=do_it(3,b)
hex(1,r)
hex(2,g)
hex(3,b)
document.bgColor="#"+t[1]+o[1]+t[2]+o[2]+t[3]+o[3]
flag--
}
if (document.all)
setTimeout('disco()',50)
}
//-->
</script>
Βήμα 2:Προσθέστε τον παρακάτω χειριστή
γεγονότων μέσα στην ετικέτα <body> ως εξής:
<body onload="disco()">
|
|
|