JavaScript dành cho các bạn học thiết kế Web

Thay đổi trang: 12 > | Trang 1 của 2 trang, bài viết từ 1 đến 30 trên tổng số 58 bài trong đề mục
Tác giả Bài
CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:49:56
JavaScript tạo hình những bông tuyết rơi trên nền trang Web

Bạn muốn tạo một trang Web có hình những hoa tuyết từ từ rơi xuống. Rất dễ dàng. Trước hết bạn dùng các chương trình đồ hoạ để tạo hình một bông tuyết trắng (nhỏ xíu thôi), đặt tên nó là idcs.gif (hay tên gì tùy bạn, nhưng bạn phải sửa tên tập tin hình đó trong đoạn code dưới đây) đặt cùng folder với trang Web của bạn. Sau đó chèn đoạn code phía dưới vào giữa thẻ <body> ... <\body> trong trang Web của bạn.
(Chú ý : nếu bạn tạo hình bông tuyết trắng, nên dùng nền trang web màu đen mới dễ thấy và đẹp)
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Begin
var no = 50; // Số bông tuyết
var speed = 14; // Số càng nhỏ tuyết rơi tốc độ càng nhanh
var snowflake = "idcs.gif"; // tập tin hình bông tuyết
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // tọa độ và những vị trí thay đổi
var am, stx, sty; // Ðộ rộng và bước thay đổi
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx = 0; // những biến đổi tọa độ của tập hợp
xp = Math.random()*(doc_width-50); // tập hợp những thay đổi vị trí
yp = Math.random()*doc_height;
am = Math.random()*20; // tập hợp những thay đổi độ rộng
stx = 0.02 + Math.random()/10; // tập hợp những thay đổi bước
sty = 0.7 + Math.random();
if (ns4up) { // những lớp tập hợp
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() { // hàm Nescape script chính
for (i = 0; i < no; ++ i) { // vòng lặp cho mỗi điểm
yp += sty;
if (yp > doc_height-50) {
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02 + Math.random()/10;
sty = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx += stx;
document.layers["dot"+i].top = yp;
document.layers["dot"+i].left = xp + am*Math.sin(dx);
}
setTimeout("snowNS()", speed);
}
function snowIE() { // hàm IE script chính
for (i = 0; i < no; ++ i) { // vòng lặp cho mỗi điểm
yp += sty;
if (yp > doc_height-50) {
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02 + Math.random()/10;
sty = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx += stx;
document.all["dot"+i].style.pixelTop = yp;
document.all["dot"+i].style.pixelLeft = xp + am*Math.sin(dx);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>
Bạn sẽ có một trang Web hết sức ấn tượng.
Bạn có thể thay hình bông tuyết bằng hình của chính bạn, hay hình một dòng text, hay hình bất kỳ nào đó, tùy theo ý thích của bạn. Miễn là tên tập tin hình đó đúng với tên khai báo trong dòng 5 của đoạn script trên.
Chúc bạn thành công
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:51:14
Hiện đồng hồ trên trang web và thanh tình trạng (status bar)
<script language="JavaScript">
function tick() { //Compose Time String
var hours, minutes, seconds;
var intHours, intMinutes, intSeconds;
var today;
today = new Date();
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();
hours = intHours + ":";
if (intMinutes < 10) {
minutes = "0"+intMinutes+":";
} else {
minutes = intMinutes+":";
}
if (intSeconds < 10) {
seconds = "0"+intSeconds+" ";
} else {
seconds = intSeconds+" ";
}
timeString = hours+minutes+seconds;
window.status=timeString; //Display time String
eval(itemwrite); // Call action to write text in layer
eval(itemclose); // Close action/document layer
}

function startClock() {
tick();
setTimeout('startClock()', 1000); //Count Every Second
// We use onLoad="" function to load the time after page loaded
}
//-->
</script>
<body onLoad="startClock()" bgcolor="#ffe4c4" text="#000000" link="#0000FF"
vlink="#800080" alink="#FF0000">
<div id="test" style="position:absolute; left:30; top:250; font-family:Arial">Set
Layer Position and ID for insert</div>
<Script Language=Javascript>
if(document.layers){ //if ns4
itemwrite="document.test.document.write('<p style="font-family:Arial
""">'+timeString+'</p>')" ; //Set String Style For Netscape!
//we add a style to the p tag so we get the font and size we want.
itemclose="document.test.document.close()";
}

if(document.all){//if ie4
itemwrite="test.innerText=timeString" ;
//We use the innertext property to change the text in ie.
itemclose="";
}
</Script>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:51:58
Dòng chữ từ từ biến mất
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="author" content="Alan Palmer">
<meta name="description" content="A collection of examples of JavaScript and DHTML - Disappearing Text">
<meta name="keywords" content="JavaScript, javascript, jscript, JScript, DHTML, dhtml, dynamic HTML, script, scripts, Netscape, Microsoft">
<title>JavaScript Resources - Disappearing Text</title>
<script language="JavaScript1.2">
/ **************************************************
******************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
**************************************************
******************************/
/*If you want the text to appear differently on another place on the page
or anything set that in the style tag of the zoom layer.
Here are the variables you have to set:
First the text:*/
text="JavaScript Resources"
//set the fontsize you want:
var fontsize=36
//The color of the text
var color="brown"
//the alignment of the text, you can choose center, right or left.
var align="left"
//Set the speed you want it to write in (in milliseconds between each letter)
var Wspeed=100
//Set font
var font='Arial,Helvetica, sans-serif'
//Set the time you want it to wait before it starts after pageload:
var timetowait=1000
/*You can remove this if you don't wan't it to start right away.
You can have it start if someone clicks a link (make a link like this:
<a href="#" onclick="writeInit()">Click to writetext</a> )*/
onload=writeInit;
/*You shouldn't really have to set anything below this point
**************************************************
**************************
**************************************************
**************************
**************************************************
***************************/
/*Browsercheck and settings vars
**************************************************
**************************/
var ie, n;
if (document.all) {
n=0; ie=1
writeText='document.all.divZoom.innerHTML=\ '<p align=\ "\ '+align+\ '\ " style=\ "font-family:\ '+font+\ '; font-size:\ '+fontsize+\ 'px; color:\ '+color+\ '">\ '+text+\ '</p>\ ''
closeIt=""
}
if (document.layers) {
n=1;ie=0
writeText="document.divZoom.document.write('<p align=\ "'+align+'\ "" style=\ "font-family:'+font+'; font-size:'+fontsize+'px; color:'+color+'\ "">'+text+'</p>')"
closeIt="document.divZoom.document.close()"
}
/*The functions for writing text.
**************************************************
**************************/
function writeIt(){
if(text.length>0){
text=text.slice(0,text.length-1)
eval(writeText)
eval(closeIt)
setTimeout("writeIt()",Wspeed)
}
}
/*This is the functions that calls the right function...or something :}
**************************************************
**************************/
function writeInit(){
eval(writeText)
eval(closeIt)
if(ie || n) setTimeout("writeIt(0)",timetowait)
}
// **************************************************
*************************
</script>
</head>
<body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<div id="divZoom" style="position:absolute; top:100; left:10"></div>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:52:49
Thông tin về trình duyệt, hệ điều hành, ActiveX
<form name="form">
<object id="Label1" width=96 height=24 classid="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0">
<param name="Caption" value="ActiveX">
</object>
<br>
<script language="JavaScript">
<!-- // Hide Script from old browsersvar
/* OS checking in appVersion by Norman G. King
Email: cable@i1.net http://www.i1.net/~cable
*/
function mac(){
return(navigator.appVersion.lastIndexOf('Mac') != -1 );
}
/* Netscape reports the processor type, Internet Explorer doesn't */
function ppc(){
return(navigator.appVersion.lastIndexOf('PPC') != -1 );
}
function intel(){
return((navigator.appVersion.lastIndexOf('Intel') != -1) || (navigator.appVersion.lastIndexOf('; I') != -1));
}
function rhapsody(){
return(navigator.appVersion.lastIndexOf('Rhapsody') != -1 );
}
function openstep(){ return(navigator.appVersion.lastIndexOf('OpenStep') != -1 );
}
function nextos(){
return(navigator.appVersion.lastIndexOf('Next') != -1 );
}
function linux(){
return(navigator.appVersion.lastIndexOf('Linux') != -1 );
}
function os2(){
return((navigator.appVersion.lastIndexOf('OS/2') != -1) || (navigator.appVersion.lastIndexOf('OS2') != -1));
}
function win(){
return(navigator.appVersion.lastIndexOf('Win') != -1 );
}
function win95(){
return((navigator.appVersion.lastIndexOf('Windows 95') != -1) || (navigator.appVersion.lastIndexOf('Win95') != -1));
}
function winNT(){
return((navigator.appVersion.lastIndexOf('Windows NT') != -1) || (navigator.appVersion.lastIndexOf('Windows NT') != -1));
}
function irix(){
return(navigator.appVersion.lastIndexOf('IRIX') != -1 );
}
function aix(){
return(navigator.appVersion.lastIndexOf('AIX') != -1 );
}
function sunos(){
return(navigator.appVersion.lastIndexOf('SUNOS') != -1 );
}
function solaris(){
return(navigator.appVersion.lastIndexOf('Solaris') != -1 );
}
function netscape(){
return(navigator.appName.lastIndexOf('Netscape') != -1 );
}
function explorer(){
return(navigator.appName.lastIndexOf('Explorer') != -1 );
}
// -->
</script>
<script language="JavaScript">
<!-- // Hide Script from old browsers
/* Gets browser's name and version by Norman G. King Email: cable@i1.net http://www.i1.net/~cable
*/
function getBrowserNameVersion()
{ return(navigator.appName + " " + navigator.appVersion); }
// -->
</script>
<script language="JavaScript">
<!-- Beginning of JavaScript Applet -------------------
/* Finds out the browser name and version and the OS used
and if ActiveX is enabled. By Norman G. King
Email: cable@i1.net http://www.i1.net/~cable
*/
document.write(getBrowserNameVersion() + "<BR>");
if (netscape()) document.write("You are using Netscape<br>");
if (explorer()) document.write("You are using Internet Explorer<br>");
if (win95()) document.write("You are using Windows 95<br>");
if (winNT()) document.write("You are using Windows NT<br>");
if (mac()) document.write("You are using a Macintosh<br>");
if (linux()) document.write("You are using Linux<br>");
if (nextos()) document.write("You are using NeXTStep<br>");
if (os2()) document.write("You are using OS/2<br>");
if (rhapsody()) document.write("You are using Rhapsody<br>");
if (openstep()) document.write("You are using OpenStep<br>");
if (irix()) document.write("You are using IRIX<br>");
if (sunos()) document.write("You are using SunOS<br>");
if (aix()) document.write("You are using AIX<br>");
if (ppc()) document.write("With a PowerPC processor<br>");
if (intel()) document.write("With an Intel processor<br>");
if (document.form.Label1) { //ActiveX Object is there
document.write("You are ActiveX Enabled!<br>")
}
if (!(document.form.Label1)) { //ActiveX is not there
document.write("You are not ActiveX Enabled<br>")
}
// -->
</script>
</form>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:53:31
Một kiểu lịch giờ, ngày, tháng, nãm
<script language="JavaScript">
<!-- Activate Cloaking Device

// Global variables for timer.
var timerID = null;

var timerRunning = false;

function startclock ()
{

// Make sure the clock is stopped
stopclock();
time();

}


function stopclock ()
{
if(timerRunning)

clearTimeout(timerID);

timerRunning = false;

}

function time ()
{

var now = new Date();
var yr = now.getYear();

var mName = now.getMonth() + 1;
var dName = now.getDay() + 1;

var dayNr = ((now.getDate()<10) ? "0" : "")+ now.getDate();
var ampm = (now.getHours() >= 12) ? " P.M." : " A.M."
var hours = now.getHours();
hours = ((hours > 12) ? hours - 12 : hours);

var minutes = ((now.getMinutes() < 10) ? ":0" : ":") + now.getMinutes();

var seconds = ((now.getSeconds() < 10) ? ":0" : ":") + now.getSeconds();

if(dName==1) Day = "Sunday";
if(dName==2) Day = "Monday";
if(dName==3) Day = "Tuesday";
if(dName==4) Day = "Wednesday";
if(dName==5) Day = "Thursday";
if(dName==6) Day = "Friday";
if(dName==7) Day = "Saturday";

if(mName==1) Month="January";
if(mName==2) Month="February";
if(mName==3) Month="March";
if(mName==4) Month="April";
if(mName==5) Month="May";
if(mName==6) Month="June";
if(mName==7) Month="July";
if(mName==8) Month="August";
if(mName==9) Month="September";
if(mName==10) Month="October";
if(mName==11) Month="November";
if(mName==12) Month="December";


// String to display current date.

var DayOfWeek =(" "

+ Day

+ " ");
// Displays the current time.
document.forms[0].elements[0].value = DayOfWeek;

// String to display month, day, & year.

var MonthDayYear =(" "

+ Month

+ " "

+ dayNr

+ ", "

+ "19"

+ yr
+ " ");
// Displays the month, day, & year.
document.forms[0].elements[1].value = MonthDayYear;

// String to display current time.

var TimeValue =(" "

+ hours

+ minutes

+ seconds

+ " "
+ ampm);
// Displays the current time.
document.forms[0].elements[2].value = TimeValue;

timerID = setTimeout("time()",1000);

timerRunning = true;
}
// Deactivate Cloaking -->
</script>
<body onload="startclock ()">
<center>
<form>
<table border=3 width=500>
<tr>
<td align="center"><font color="#800000" size="+1"><strong>Day of the Week</strong></font></td>
<td align="center"><input type="text" name="local" size=13 value="Weekday"></td>
</tr>
<tr>
<td align="center"><font color="#800000" size="+1"><strong>Month, Day, and Year</strong></font></td>
<td align="center"><input type="text" name="local" size=22 value="Month, Day, and Year"></td>
</tr>
<tr>
<td align="center"><font color="#800000" size="+1"><strong>Current Time</strong></font></td>
<td align="center"><input type="text" name="local" size=16 value="Current Time"></td>
</tr>
</table>
<br>
<table border=0 width=400>
<tr>
<td align="center"><input type="button" value="Pause" onclick="stopclock()"></td>
<td align="center"><input type="button" value="Resume" onclick="startclock()"></td>
<td align="center"><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
</center>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:54:15
Tìm tên đồng tiền theo quốc gia
<center><h1>Currency Finder</h1></center>
<p>Note: this script does not work with some early versions of Opera.</p>
<p>This script lets the user find out the name of a country's currency with a pop-up list. Users with IE4 will also see coloured backgrounds and text in the form fields.Only a few currencies are listed, but the list can be easily extended or altered for other purposes.</p>
<div align="center"><form>
<select name="Country" size="1"
onChange="text.value = Country[selectedIndex].value"
style="background-color: rgb(255,0,0); color: rgb(255,255,0)">
<option value="Dollar">USA</option>
<option value="Hryvnia">Ukraine</option>
<option value="Rouble">Russia</option>
<option value="Yen">Japan</option>
<option value="Franc ">French</option>
<option value="Dollar ">HongKong</option>
<option value="Yuan">China</option>
<option value="Schilling">Austria</option>
<option value="Manat">Azerbaijan</option>
<option value="East Caribbean Dollar">Antigua and Barbuda</option>
<option value="Kwanza">Angola</option>
<option value="Sucres">Ecuador</option>
<option value="Pound">Egypt</option>
<option value="Kroon">Estonia</option>
<option value="Dollar">Bahamas</option>
<option value="Taka">Bangladesh</option>
<option value="Dollar">Barbados</option>
<option value="Rouble">Belarus</option>
<option value="Franc">Belgium</option>
<option value="Bolivanio">Bolivia</option>
<option value="Dinar">Bosnia and Herzegovina</option>
<option value="Pula">Botswana</option>
<option value="Rupee">India</option>
<option value="Ringgit">Malaysia</option>
<option value="Brazilian Cruzeiro">Brazil </option>
<option value="Pound Sterling">United Kingdom </option>
<option value="Dirham">United Arab Emirates</option>
<option value="Uzbek Sum">Uzbekistan </option>
</select><br><br><input type="text" name="text" size="20"
style="color: rgb(0,0,255); background-color: rgb(255,255,0)"></p>
<p><input type="reset" value="Reset" name="B2"></p>
</form></div>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:55:02
Chuyển ðến trang web khi con trỏ chuột nằm trên liên kết
Try it here: <a href="http://www.masterasap.com" onMouseover="window.location=this.href">Go Home!</a></p>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:55:46
Chọn quốc gia theo vùng lãnh thổ
<!-- Original: Mattias Sjogren (masj4037@student.uu.se) -->
<!-- This script and many more are available online from -->
<!-- The JavaScript Source!! http://javascriptsource.com -->
<script language="JavaScript">
<!--
var africaArray = new Array("('Select country','',true,true)",
"('Ethiopia')",
"('Somalia')",
"('South Africa')",
"('Other')");
var middleeastArray = new Array("('Select country','',true,true)",
"('Egypt')",
"('Iran')",
"('Israel')",
"('Kuwait')",
"('Lebanon')",
"('Morocco')",
"('Saudi Arabia')",
"('Syria')",
"('Turkey')",
"('U. A. Emirates')",
"('Other')");
var asiaArray = new Array("('Select country','',true,true)",
"('Armenia')",
"('Bangladesh')",
"('Cambodia')",
"('China')",
"('India')",
"('Indonesia')",
"('Japan')",
"('Malaysia')",
"('Myanmar')",
"('Nepal')",
"('Pakistan')",
"('Philippines')",
"('Singapore')",
"('South Korea')",
"('Sri Lanka')",
"('Taiwan')",
"('Thailand')",
"('Uzbekistan')",
"('Vietnam')",
"('Other')");
var europeArray = new Array("('Select country','',true,true)",
"('Albania')",
"('Austria')",
"('Belarus')",
"('Belgium')",
"('Bosnia')",
"('Bulgaria')",
"('Croatia')",
"('Cyprus')",
"('Czech Rep.')",
"('Denmark')",
"('Estonia')",
"('Finland')",
"('France')",
"('Germany')",
"('Greece')",
"('Hungary')",
"('Iceland')",
"('Ireland')",
"('Italy')",
"('Latvia')",
"('Liechtenstein')",
"('Lithuania')",
"('Luxembourg')",
"('Macedonia')",
"('Malta')",
"('Monaco')",
"('Netherlands')",
"('Norway')",
"('Poland')",
"('Portugal')",
"('Romania')",
"('Russia')",
"('Slovakia')",
"('Slovenia')",
"('Spain')",
"('Sweden')",
"('Switzerland')",
"('Ukraine')",
"('United Kingdom')",
"('Other')");
var australiaArray = new Array("('Select country','',true,true)",
"('Australia')",
"('New Zealand')",
"('Other')");
var lamericaArray = new Array("('Select country','',true,true)",
"('Costa Rica')",
"('Cuba')",
"('El Salvador')",
"('Guatemala')",
"('Haiti')",
"('Jamaica')",
"('Mexico')",
"('Panama')",
"('Other')");
var namericaArray = new Array("('Select country','',true,true)",
"('Canada')",
"('USA')",
"('Other')");
var samericaArray = new Array("('Select country','',true,true)",
"('Argentina')",
"('Bolivia')",
"('Brazil')",
"('Chile')",
"('Colombia')",
"('Ecuador')",
"('Paraguay')",
"('Peru')",
"('Suriname')",
"('Uruguay')",
"('Venezuela')",
"('Other')");
function populateCountry(inForm,selected) {
var selectedArray = eval(selected + "Array");
while (selectedArray.length < inForm.country.options.length) {
inForm.country.options[(inForm.country.options.length - 1)] = null;
}
for (var i=0; i < selectedArray.length; i++) {
eval("inForm.country.options=" + "new Option" + selectedArray);
}
if (inForm.region.options[0].value == '') {
inForm.region.options[0]= null;
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
window.history.go(0);
}
else {
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
window.history.go(0);
}
}
}
}
}
function populateUSstate(inForm,selected) {
var stateArray = new Array("('Select State','',true,true)",
"('Alabama')",
"('Alaska')",
"('Arizona')",
"('Arkansas')",
"('California')",
"('Colorado')",
"('Connecticut')",
"('Delaware')",
"('Columbia')",
"('Florida')",
"('Georgia')",
"('Hawaii')",
"('Idaho')",
"('Illinois')",
"('Indiana')",
"('Iowa')",
"('Kansas')",
"('Kentucky')",
"('Louisiana')",
"('Maine')",
"('Maryland')",
"('Massachusetts')",
"('Michigan')",
"('Minnesota')",
"('Mississippi')",
"('Missouri')",
"('Montana')",
"('Nebraska')",
"('Nevada')",
"('New Hampshire')",
"('New Jersey')",
"('New Mexico')",
"('New York')",
"('North Carolina')",
"('North Dakota')",
"('Ohio')",
"('Oklahoma')",
"('Oregon')",
"('Pennsylvania')",
"('Rhode Island')",
"('South Carolina')",
"('South Dakota')",
"('Tennessee')",
"('Texas')",
"('Utah')",
"('Vermont')",
"('Virginia')",
"('Washington')",
"('West Virginia')",
"('Wisconsin')",
"('Wyoming')");
if (selected == 'USA') {
for (var i=0; i < stateArray.length; i++) {
eval("inForm.country.options=" + "new Option" + stateArray);
}
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
window.history.go(0)
}
else {
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
window.history.go(0)
}
}
}
}
else {
}
if (selected == 'Other') {
newCountry = "";
while (newCountry == ""){
newCountry=prompt ("Please enter the name of your country.", "");
}
if (newCountry != null) {
inForm.country.options[(inForm.country.options.length-1)]=new Option(newCountry,newCountry,true,true);
inForm.country.options[inForm.country.options.length]=new Option('Other, not listed','Other');
}
}
if(inForm.country.options[0].text == 'Select country') {
inForm.country.options[0]= null;
}
}
//-->
</script>
<center>
<form name="globe">
<select name="region" onChange="populateCountry(document.globe,document.globe.region.options[document.globe.region.selectedIndex].value)">
<option selected value=''>Select Region</option>
<option value='asia'>Asia</option>
<option value='africa'>Africa</option>
<option value='australia'>Australia</option>
<option value='europe'>Europe</option>
<option value='middleeast'>Middle East</option>
<option value='lamerica'>Latin America</option>
<option value='namerica'>North America</option>
<option value='samerica'>South America</option>
</select>
<select name="country" onChange="populateUSstate(document.globe,document.globe.country.options[document.globe.country.selectedIndex].text)">
<option value=''><--------------------</option>
</select>
</form>
</center>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:56:22
Dòng văn bản động trong text box
<script language="JavaScript">
<!--
// global variables
var max=0;
function textlist()
{
max=textlist.arguments.length;
for (i=0; i<max; i++)
this=textlist.arguments;
}
tl=new textlist
(
"Visit masterasap.com for the best online training!"
);
var x=0; pos=0;
var l=tl[0].length;
function textticker()
{
document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
if(pos++==l)
{
pos=0;
setTimeout("textticker()",1000);
x++;
if(x==max)
x=0;
l=tl[x].length;
} else
setTimeout("textticker()",50);
}
// end -->
</script>
</head>
<script language="JavaScript">
<!--
document.write("<CENTER><FORM NAME=\ "tickform\ ">");
document.write("<INPUT TYPE=\ "TEXT\ " NAME=\ "tickfield\ " SIZE=\ "48\ ">");
document.write("</FORM></CENTER>");
textticker();
//-->
</script>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:56:58
Xác nhận khi chuyển ðến một trang Web
<Script Language=JavaScript>
function Info(URL)
{
if (!confirm("Are you sure you really want to go to this page? Click <OK> to enter or <Cancel> to change your mind."))
{return} else {self.location=URL;}
}
</Script>
<a href=javascript:Info('http://www.shop4all.com')>Click here</a> to try it. (The code is on the following page.)</p>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:57:57
Ðổi màu vãn bản
<div align="center"><h1>Changing Text Colours</h1></div><br>
<div align="center"><p><script language="JavaScript1.2" type="text/javascript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this = initArray.arguments;
}
}
// Set the text to be displayed here.
var ctext = "Wow! Look at all the pretty colours! ;-)";
// Set the speed of change here (in milliseconds)
var speed = 1000;
var x = 0;
var color = new initArray(
// Set the colours to be used here
"red",
"purple",
"blue",
"green",
"black",
"orange"
);
if(navigator.appName == "Netscape") {
document.write('<layer id="c"><center>'+ctext+'</center></layer><br>');
}
if (navigator.appVersion.indexOf("MSIE") != -1){
document.write('<div id="c"><center>'+ctext+'</center></div>');
}
function chcolor(){
if(navigator.appName == "Netscape") {
document.c.document.write('<center><font color="'+color[x]);
document.c.document.write('">'+ctext+'</font></center>');
document.c.document.close();
}
else if (navigator.appVersion.indexOf("MSIE") != -1){
document.all.c.style.color = color[x];
}
(x < color.length-1) ? x++ : x = 0;
}
setInterval("chcolor()",1000);
// End -->
</script></p></div><br>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:58:42
Ðổi màu nền trang Web
<center><h1>Changing Background Colours</h1>
<form>
<input type="text" name="color" size=18>
<select name=pco onChange="document.bgColor=(this.form.pco.value)">
<option value=aliceblue>aliceblue</option>
<option value=antiquewhite>antiquewhite</option>
<option value=aqua>aqua</option>
<option value=aquamarine>aquamarine</option>
<option value=azure>azure</option>
<option value=beige>beige</option>
<option value=bisque>bisque</option>
<option value=black>black</option>
<option value=blanchedalmond>blanchedalmond</option>
<option value=blue>blue</option>
<option value=blueviolet>blueviolet</option>
<option value=brown>brown</option>
<option value=burlywood>burlywood</option>
<option value=cadetblue>cadetblue</option>
<option value=chartreuse>chartreuse</option>
<option value=chocolate>chocolate</option>
<option value=coral>coral</option>
<option value=cornflowerblue>cornflowerblue</option>
<option value=cornsilk>cornsilk</option>
<option value=crimson>crimson</option>
<option value=cyan>cyan</option>
<option value=darkblue>darkblue</option>
<option value=darkcyan>darkcyan</option>
<option value=darkgoldenrod>darkgoldenrod</option>
<option value=darkgray>darkgray</option>
<option value=darkgreen>darkgreen</option>
<option value=darkkhaki>darkkhaki</option>
<option value=darkmagenta>darkmagenta</option>
<option value=darkolivegreen>darkolivegreen</option>
<option value=darkorange>darkorange</option>
<option value=darkorchid>darkorchid</option>
<option value=darkred>darkred</option>
<option value=darksalmon>darksalmon</option>
<option value=darkseagreen>darkseagreen</option>
<option value=darkslateblue>darkslateblue</option>
<option value=darkslategray>darkslategray</option>
<option value=darkturquoise>darkturquoise</option>
<option value=darkviolet>darkviolet</option>
<option value=deeppink>deeppink</option>
<option value=deepskyblue>deepskyblue</option>
<option value=dimgray>dimgray</option>
<option value=dodgerblue>dodgerblue</option>
<option value=firebrick>firebrick</option>
<option value=floralwhite>floralwhite</option>
<option value=forestgreen>forestgreen</option>
<option value=fuchsia>fuchsia</option>
<option value=gainsboro>gainsboro</option>
<option value=ghostwhite>ghostwhite</option>
<option value=gold>gold</option>
<option value=goldenrod>goldenrod</option>
<option value=gray>gray</option>
<option value=green>green</option>
<option value=greenyellow>greenyellow</option>
<option value=honeydew>honeydew</option>
<option value=hotpink>hotpink</option>
<option value=indianred>indianred</option>
<option value=indigo>indigo</option>
<option value=ivory>ivory</option>
<option value=khaki>khaki</option>
<option value=lavender>lavender</option>
<option value=lavenderblush>lavenderblush</option>
<option value=lawngreen>lawngreen</option>
<option value=lemonchiffon>lemonchiffon</option>
<option value=lightblue>lightblue</option>
<option value=lightcoral>lightcoral</option>
<option value=lightcyan>lightcyan</option>
<option value=lightgoldenrodyellow>lightgoldenrodyellow</option>
<option value=lightgreen>lightgreen</option>
<option value=lightgrey>lightgrey</option>
<option value=lightpink>lightpink</option>
<option value=lightsalmon>lightsalmon</option>
<option value=lightseagreen>lightseagreen</option>
<option value=lightskyblue>lightskyblue</option>
<option value=lightslategray>lightslategray</option>
<option value=lightsteelblue>lightsteelblue</option>
<option value=lightyellow>lightyellow</option>
<option value=lime>lime</option>
<option value=limegreen>limegreen</option>
<option value=linen>linen</option>
<option value=magenta>magenta</option>
<option value=maroon>maroon</option>
<option value=mediumaquamarine>mediumaquamarine</option>
<option value=mediumblue>mediumblue</option>
<option value=mediumorchid>mediumorchid</option>
<option value=mediumpurple>mediumpurple</option>
<option value=mediumseagreen>mediumseagreen</option>
<option value=mediumslateblue>mediumslateblue</option>
<option value=mediumspringgreen>mediumspringgreen</option>
<option value=mediumturquoise>mediumturquoise</option>
<option value=mediumvioletred>mediumvioletred</option>
<option value=midnightblue>midnightblue</option>
<option value=mintcream>mintcream</option>
<option value=mistyrose>mistyrose</option>
<option value=moccasin>moccasin</option>
<option value=navajowhite>navajowhite</option>
<option value=navy>navy</option>
<option value=oldlace>oldlace</option>
<option value=olive>olive</option>
<option value=olivedrab>olivedrab</option>
<option value=orange>orange</option>
<option value=orangered>orangered</option>
<option value=orchid>orchid</option>
<option value=palegoldenrod>palegoldenrod</option>
<option value=palegreen>palegreen</option>
<option value=paleturquoise>paleturquoise</option>
<option value=palevioletred>palevioletred</option>
<option value=papayawhip>papayawhip</option>
<option value=peachpuff>peachpuff</option>
<option value=peru>peru</option>
<option value=pink>pink</option>
<option value=plum>plum</option>
<option value=powderblue>powderblue</option>
<option value=purple>purple</option>
<option value=red>red</option>
<option value=rosybrown>rosybrown</option>
<option value=royalblue>royalblue</option>
<option value=saddlebrown>saddlebrown</option>
<option value=salmon>salmon</option>
<option value=sandybrown>sandybrown</option>
<option value=seagreen>seagreen</option>
<option value=seashell>seashell</option>
<option value=sienna>sienna</option>
<option value=silver>silver</option>
<option value=skyblue>skyblue</option>
<option value=slateblue>slateblue</option>
<option value=slategray>slategray</option>
<option value=snow>snow</option>
<option value=springgreen>springgreen</option>
<option value=steelblue>steelblue</option>
<option value=tan>tan</option>
<option value=teal>teal</option>
<option value=thistle>thistle</option>
<option value=tomato>tomato</option>
<option value=turquoise>turquoise</option>
<option value=violet>violet</option>
<option value=wheat>wheat</option>
<option value=white>white</option>
<option value=whitesmoke>whitesmoke</option>
<option value=yellow>yellow</option>
<option value=yellowgreen>yellowgreen</option>
</select>
<input type="button" value="Colour" onclick="document.bgColor=(this.form.color.value)">
<input type="reset" name="cancel" value="Reset">
</form></center>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 21:59:29
Tạo lịch trên trang Web
<script language="JavaScript">
<!--
function selectCurrent () {
var now = new Date();
var Year = now. getYear();
if(document.layers){Year +=1900;}
var Month = now.getMonth();
document.calendar_control.month.selectedIndex = Month;
document.calendar_control.year.value = Year;
alert(Year);
doCal (document.calendar_control,Year);
}
function doCal (form,y) {
if (y==0) {y=form.year.options[form.year.selectedIndex].value;}
var ret=calendar (form.month.selectedIndex, y);
//var x = window.open('','','');
//doc=x.document;
// doc.close ();
// doc.open ("text/html");
var result=fetchText (ret);
eval(itemwrite); // Call action to write text in layer
eval(itemclose); // Close action/document layer
}
if(document.layers){ //if ns4
itemwrite="document.test.document.write(result)"; //Set String Style For Netscape!
//we add a style to the p tag so we get the font and size we want.
itemclose="document.test.document.close()";
}

if(document.all){//if ie4
itemwrite="test.innerHTML=result" ;
//We use the innertext property to change the text in ie.
itemclose="";
}
function calendar (SelMonth, SelYear) {
var Month=SelMonth+1
var Year=SelYear;
var ret=getDaysofYear(Year);
var Days=ret[Month];
var firstOfMonth = new Date (Year, Month-1, 1);
var StartingPos=firstOfMonth.getDay();
var retVal= new Object();
retVal[1]=StartingPos;
retVal[2]=Days;
retVal[3]=Month;
retVal[4]=Year;
return (retVal);
}
function leapYear (Year) {
if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0))
{ return (1);}
else
{ return (0);}
}
function getDaysofYear (Year) {
if (leapYear (Year)==1)
{ Leap=29;}
else
{ Leap=28;}
var daysOfYear = new Object();
daysOfYear[1] = 31; daysOfYear[2] = Leap; daysOfYear[3] = 31; daysOfYear[4] = 30;
daysOfYear[5] = 31; daysOfYear[6] = 30; daysOfYear[7] = 31; daysOfYear[8] = 31;
daysOfYear[9] = 30; daysOfYear[10] = 31; daysOfYear[11] = 30; daysOfYear[12] = 31;
return (daysOfYear);
}
function fetchText (InArray) {
var Month;
var Year=""+InArray[4];
if (InArray[3]==1) Month="January";
if (InArray[3]==2) Month="February";
if (InArray[3]==3) Month="March";
if (InArray[3]==4) Month="April";
if (InArray[3]==5) Month="May";
if (InArray[3]==6) Month="June";
if (InArray[3]==7) Month="July";
if (InArray[3]==8) Month="August";
if (InArray[3]==9) Month="September";
if (InArray[3]==10) Month="October";
if (InArray[3]==11) Month="November";
if (InArray[3]==12) Month="December";
var result='<HTML><HEAD><TITLE>Calendar</TITLE></HEAD>'
result+='<body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">'
result+='<BR><CENTER>'
result+='<TABLE BORDER=2 CELLSPACING=2>'
result+='<TH COLSPAN="7" VALIGN="center"><BR><BIG>'+Month+' '+Year
result+='</BIG><P></TH>'
var CellKeeper=0
var Digit=1
var CountRow;
for (CountRow = 1; CountRow <=6; CountRow++) {
result+='<TR ALIGN="right" VALIGN="top">'
for (CountColumn = 1; CountColumn <=7; CountColumn++) {
if (CellKeeper<InArray[1])
result+='<TD></TD>'
else {
result+='<TD><DD>' + Digit + '<P></TD>'
Digit++
}
if (Digit<=InArray[2])
CellKeeper++
else
break;
}
result+='</TR>'
if (Digit>InArray[2])
break;
}
result+='</TABLE><CENTER>'
result+='</BODY></HTML>'
return (result);
}
// -->
</script>
<body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000" onload="selectCurrent()">
<form name="calendar_control">
Choose the month:<br>
<select name="month">
<option>January
<option>February
<option>March
<option>April
<option>May
<option>June
<option>July
<option>August
<option>September
<option>October
<option>November
<option>December
</select><p>
Choose the year: <br>
<select name="year">
<option value=1995>1995
<option value=1996>1996
<option value=1997>1997
<option value=1998>1998
<option value=1999>1999
<option value=2000>2000
</select><p>
<input type="button" name="button1" value="Create" onclick="doCal(this.form,0)">
</form>
<div id="test" style="position:absolute; left:30; top:250; font-family:Arial">Set Layer Position and ID for insert</div>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 22:00:08
Ðánh dấu trang vào mục Favorist
<script language="JavaScript" type="text/javascript">
<!--
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) {
var url="http://www.shop4all.com/";
var title="shop4all you neat";
document.write('<a href="javascript:window.ext');
document.write('ernal.AddFavorite(url,title);" ');
document.write('onMouseOver=" window.status=');
document.write("'Add this site to your favorites!'; return true ");
document.write('"onMouseOut=" window.status=');
document.write("' '; return true ");
document.write('">Add this site to your favorites!</a>');
}
else {
var msg = "Don't forget to bookmark us!";
if(navigator.appName == "Netscape") msg += " (Use CTRL-D)";
document.write(msg);
}
//-->
</script>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 22:00:57
Chuyển đổi hệ thống số (nhị phân, thập phân, thập lục phân, và hệ thống số 3, 5, 8) :
<script language="JavaScript">
<!-- for wise eyes only
var hex;
function MakeArray()
{
this.length = 16;
return this;
}
function Populate()
{
hex = new MakeArray();
hex[1] = "0";
hex[2] = "1";
hex[3] = "2";
hex[4] = "3";
hex[5] = "4";
hex[6] = "5";
hex[7] = "6";
hex[8] = "7";
hex[9] = "8";
hex[10] = "9";
hex[11] = "A";
hex[12] = "B";
hex[13] = "C";
hex[14] = "D";
hex[15] = "E";
hex[16] = "F";
}
// function DecimaltoAnother(N, radix)
//
// return representation of a number N
// in the system based on radix
//
function DecimaltoAnother(N, radix)
{
s = "";
A = N;
while (A >= radix)
{
B = A % radix;
A = Math.floor(A / radix);
s += hex[B+1];
}
s += hex[A+1];
return Transpose(s);
}
// function Transpose(s)
//
// return a string written from right to left
//
function Transpose(s)
{
N = s.length;
t = "";
for (i = 0; i < N; i++)
t = t + s.substring(N-i-1, N-i);
s = t;
return s;
}
function EvalB(form)
{
if (form.b.value.length != 0)
M = parseInt(form.b.value, 2);
else
M = 0;
form.t.value = DecimaltoAnother(M, 3);
form.q.value = DecimaltoAnother(M, 5);
form.o.value = DecimaltoAnother(M, 8);
form.h.value = DecimaltoAnother(M, 16);
form.d.value = M;
}
function EvalT(form)
{
if (form.t.value.length != 0)
M = parseInt(form.t.value, 3);
else
M = 0;
form.b.value = DecimaltoAnother(M, 2);
form.q.value = DecimaltoAnother(M, 5);
form.o.value = DecimaltoAnother(M, 8);
form.h.value = DecimaltoAnother(M, 16);
form.d.value = M;
}
function EvalQ(form)
{
if (form.q.value.length != 0)
M = parseInt(form.q.value, 5);
else
M = 0;
form.b.value = DecimaltoAnother(M, 2);
form.t.value = DecimaltoAnother(M, 3);
form.o.value = DecimaltoAnother(M, 8);
form.h.value = DecimaltoAnother(M, 16);
form.d.value = M;
}
function EvalO(form)
{
if (form.o.value.length != 0)
M = parseInt(form.o.value, 8);
else
M = 0;
form.b.value = DecimaltoAnother(M, 2);
form.t.value = DecimaltoAnother(M, 3);
form.q.value = DecimaltoAnother(M, 5);
form.h.value = DecimaltoAnother(M, 16);
form.d.value = M;
}
function EvalH(form)
{
if (form.h.value.length != 0)
M = parseInt(form.h.value, 16);
else
M = 0;
form.b.value = DecimaltoAnother(M, 2);
form.t.value = DecimaltoAnother(M, 3);
form.q.value = DecimaltoAnother(M, 5);
form.o.value = DecimaltoAnother(M, 8);
form.d.value = M;
}
function EvalD(form)
{
if (form.d.value.length != 0)
M = parseInt(form.d.value, 10);
else
M = 0;
form.b.value = DecimaltoAnother(M, 2);
form.t.value = DecimaltoAnother(M, 3);
form.q.value = DecimaltoAnother(M, 5);
form.o.value = DecimaltoAnother(M, 8);
form.h.value = DecimaltoAnother(M, 16);
}
//-- done hiding from old browsers -->
</script>
</head>
<body onLoad="Populate()">
<center><h1>A Base Converter</h1></center>
<p>Type a valid positive number in any one of the boxes and click outside the box. The equivalent will appear in the other boxes.</p>
<form method="post">
<table border="0" cellspacing="3" cellpadding="3" align="CENTER">
<tr>
<td align=right>
<p>Binary (Base 2):</p>
</td>
<td>
<input name="b" value="0" onChange="EvalB(form)" size=27>
</td>
</tr>
<tr>
<td align=right>Ternary (Base 3):</td>
<td>
<input name="t" value="0" onChange="EvalT(form)" size=21>
</td>
</tr>
<tr><td align=right>Quintal (Base 5):</td>
<td>
<input name="q" value="0" onChange="EvalQ(form)" size=16>
</td>
</tr>
<tr>
<td align=right>Octal (Base 8):</td>
<td>
<input name="o" value="0" onChange="EvalO(form)" size=12>
</td>
</tr>
<tr>
<td align=right>Decimal (Base 10):</td>
<td>
<input name="d" value="0" onChange="EvalD(form)" size=11>
</td>
</tr>
<tr>
<td align=right>Hexadecimal (Base 16):</td>
<td>
<input name="h" value="0" onChange="EvalH(form)" size=8>
</td>
</tr>
</table>
</form>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 22:01:39
Tạo menu trong trang Web
<script>
function listThem() {
if (document.chooser.sitelist.selectedIndex == 0) alert("Please select something");
else if (document.chooser.sitelist.selectedIndex == 1) location = 'http://www.shop4all.com';
else if (document.chooser.sitelist.selectedIndex == 2) location = 'http://www.coomedia.com';
else if (document.chooser.sitelist.selectedIndex == 3) location = 'http://www.microsoft.com';
}
</script>
<body>
<center><h1>Another Dropdown list box</h1></center>
<p>The advantage of this dropdown list to choose URLs is that there is no need for a submit button, as you can see.</p>
<center><table border="5" cellpadding="5" align="center" valign="middle"><form name="chooser">
<tr><th align="center" bgcolor="#deb887">Make a choice:</th></tr>
<tr><td align="center" bgcolor="#deb887"><select name="sitelist" onchange="listThem()">
<option selected>Select one
<option>Home Page
<option>Contents
<option>Navigation Aids
</select></td></tr>
</form></table>
</center>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 26.10.2005 22:02:27
Các dòng văn bản động, thay đổi màu sắc
<script language="Javascript">
<!-- Hiding
/* Script by Lefteris Haritou
Copyright ©1998
http://www.geocities.com/~lef
This Script is free as long
as you keep the above credit !
*/
bname=navigator.appName;
bversion=parseInt(navigator.appVersion)
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
if (bname=="Netscape"){
brows=true
del=30
}
else{
brows=false
del=80
}
var msg=0;
var z=0;
var timer1;
var message= new Array();
var color= new Array();
var values= new Array('-6','-5','-4','-3','-2','-1','+1','+2','+3','+4','+5','+6')
// Put here your own messages. Add as many as you want (Do not edit anything else in the Script except the lines below)
message[0]='Animated Titles'
color[0]='#FF0000'
message[1]='A new JavaScript'
color[1]='##009900'
message[2]='Fully customisable and easy to use'
color[2]='#003399'
message[3]='© 2000 BDG Publishing Inc.'
color[3]='#990033'
message[4]='NS 4.x and IE 4.x supported'
color[4]='#ff66cc'

// Put here your own messages. Add as many as you want (Do not edit anything else in the Script except the lines above)

function start(){
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
if(z<values.length){
if (brows){
document.layers['text'].document.writeln('<P Class="main" Align="Center"><font color="'+color[msg]+'" size="'+values[z]+'" face="Arial"><NOBR>'+message[msg]+'</NOBR></font></P>')
document.layers['text'].document.close();
}
else{
text.innerHTML='<Pre><P Class="main" Align="Center"><font color="'+color[msg]+'" size="'+values[z]+'" face="Arial"><NOBR>'+message[msg]+'</NOBR></font></P></Pre>'
}
z++;
timer1=window.setTimeout('start()',del)
}
else
chg();
}
}
function stop(){
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4))
window.clearTimeout(timer1);
window.clearTimeout(timer2);
}
function chg(){
if (brows){
document.layers['text'].document.writeln('')
document.layers['text'].document.close();
}
else
text.innerHTML='';
if(msg<message.length-1){
msg++;
}
else
msg=0;
z=0;
timer2=window.setTimeout('start()',2000)
}
}
// done hiding -->
</script>
<body onLoad="start()" onUnload="stop()">
<div id="text" style="position: absolute; left: 4; top: 80"></div>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 18:58:23
Chữ I LOVE YOU khiêu vũ

Từng ký tự trong chữ I LOVE YOU dao động qua lại, khi đụng với ký tự bên cạnh sẽ bật ngược trở lại.

<p align="center"><b><font face="VNI-Cooper" color="#FF0000" size="6">

<marquee scrollamount="15" width="10%" behavior="alternate">I</marquee>

<marquee scrollamount="15" width="10%" behavior="alternate"
direction="right">L</marquee>

<marquee scrollamount="15" width="10%" behavior="alternate">O</marquee>

<marquee scrollamount="15" width="10%" behavior="alternate"
direction="right">V</marquee>

<marquee scrollamount="15" width="10%" behavior="alternate">E</marquee>

<marquee scrollamount="15" width="10%" behavior="alternate"
direction="right">Y</marquee>

<marquee scrollamount="15" width="10%" behavior="alternate">O</marquee>

<marquee scrollamount="15" width="10%" behavior="alternate"
direction="right">U</marquee>

</marquee></font></b></p>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 18:58:54
Chữ được xếp từ nhiều hình trái tim

Nhiều hình trái tim rơi từ trên xuống và xếp lại thành chữ LOVE, trông rất lãng mạn. Bạn có thể dùng hiệu ứng này trong thư gửi “người ấy”, nó sẽ giúp bạn nói thay những lời muốn nói.

<center>
<marquee direction=down scrollamount=1 height=15><font face=webdings
size=3
color=#ff0000>Y     YY Y      YYYY</font></marquee>
<marquee direction=down scrollamount=1 height=15><font face=webdings
size=3
color=#ff0000>Y    Y  Y Y    Y Y</font></marquee>
<marquee direction=down scrollamount=1 height=15><font face=webdings
size=3
color=#ff0000>Y    Y  Y  Y  Y  YYY</font></marquee>
<marquee direction=down scrollamount=1 height=15><font face=webdings
size=3
color=#ff0000>Y    Y  Y   YY   Y</font></marquee>
<marquee direction=down scrollamount=1 height=15><font face=webdings
size=3
color=#ff0000>YYY YY     Y    YYY</font></marquee>
</center>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 18:59:43
Hiệu ứng đèn chớp nháy

Hiệu ứng sau sẽ tạo chữ chớp nháy và chạy giống như đèn trang trí.

<p align="center"><font face="Impact" color="#FF0000" size="6">

<marquee scrollamount="30" width="32" behavior="slide"
loop="9000">I</marquee>

 

<marquee scrollamount="40" width="32" behavior="slide"
loop="9000">L</marquee>

 

<marquee scrollamount="30" width="32" loop="9000"
behavior="slide">O</marquee>

 

<marquee scrollamount="40" width="32" loop="9000"
behavior="slide">V</marquee>

 

<marquee scrollamount="30" width="32" loop="9000"
behavior="slide">E</marquee>

 

<marquee scrollamount="40" width="32" loop="9000"
behavior="slide">Y</marquee>

 

<marquee scrollamount="30" width="32" loop="9000"
behavior="slide">O</marquee>

 

<marquee scrollamount="40" width="32" loop="9000"
behavior="slide">U</marquee>

 

</font></p>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 19:00:08
Chữ đổ hào quang

Dòng chữ I LOVE YOU đổ hào quang và chạy từ phải sang trái, khi gặp biên màn hình sẽ bật trở lại. Trông cũng thú vị đấy chứ?

<table border="2" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#800000" width="500" bgcolor="#FFFFFF">
<tr>
<td width="100%">
<marquee behavior=alternate><TABLE
STYLE="filter:glow(color=blue,
strength=5)">
<TR><TD><center>
<font face=arial size=4 color=aqua>I LOVE YOU</font></td></tr></TABLE></marquee></td>
</tr>
</table>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 19:00:39
Hiệu ứng chữ hào quang nhảy múa



Hiệu ứng sau đây sẽ làm e-mail hay trang Web của bạn sinh động hơn với dòng chữ I LOVE YOU đổ hào quang và nhảy múa.

<marquee scrollamount="5" width="7%" behavior="alternate"
direction="up" scrolldelay="125" ><TABLE STYLE="filter:glow(color=BLACK,
strength=5)"> <TR><TD><center> <font face=arial size=15
color=aqua>I</font></td></tr></TABLE></marquee>

<marquee scrollamount="6" width="7%" behavior="alternate"
direction="up" scrolldelay="130"><TABLE STYLE="filter:glow(color=BLACK,
strength=5)"> <TR><TD><center> <font face=arial size=15 color=aqua>L</font></td></tr></TABLE></marquee>

<marquee scrollamount="5" width="7%" behavior="alternate"
direction="up" scrolldelay="125"><TABLE STYLE="filter:glow(color=BLACK,
strength=5)"> <TR><TD><center> <font face=arial size=15
color=aqua>O</font></td></tr></TABLE></marquee>

<marquee scrollamount="6" width="7%" behavior="alternate"
direction="up" scrolldelay="130"><TABLE STYLE="filter:glow(color=BLACK,
strength=5)"> <TR><TD><center> <font face=arial size=15
color=aqua>V</font></td></tr></TABLE></marquee>

<marquee scrollamount="5" width="7%" behavior="alternate"
direction="up" scrolldelay="125"><TABLE STYLE="filter:glow(color=BLACK,
strength=5)"> <TR><TD><center> <font face=arial size=15
color=aqua>E</font></td></tr></TABLE></marquee>

<marquee scrollamount="6" width="7%" behavior="alternate"
direction="up" scrolldelay="130"><TABLE STYLE="filter:glow(color=BLACK,
strength=5)"> <TR><TD><center> <font face=arial size=15
color=aqua>Y</font></td></tr></TABLE></marquee>

<marquee scrollamount="5" width="7%" behavior="alternate"
direction="up" scrolldelay="125" ><TABLE STYLE="filter:glow(color=BLACK,
strength=5)"> <TR><TD><center> <font face=arial size=15
color=aqua>O</font></td></tr></TABLE></marquee>

<marquee scrollamount="6" width="7%" behavior="alternate"
direction="up" scrolldelay="130"><TABLE STYLE="filter:glow(color=BLACK,
strength=5)"> <TR><TD><center> <font face=arial size=15
color=aqua>U</font></td></tr></TABLE></marquee>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 19:01:10
Chữ nhiều màu nhảy múa



Những dòng chữ đầy màu sắc mang phong cách “xì tin” nhảy múa trên màn hình, chắc chắn sẽ để lại một ấn tượng khó quên cho “người ấy”.

<font size=15><FONT COLOR=#AB0457><SUB><marquee scrollamount="9"
width="5%" behavior="alternate" direction="up"
>I</marquee></SUB></FONT></FONT>

<font size=15><FONT COLOR=#D5042D><SUP> <marquee scrollamount="8"
width="5%" behavior="alternate" direction="up"
>L</marquee></SUP></FONT></FONT>

<font size=15><FONT COLOR=#820481><SUP> <marquee scrollamount="7"
width="5%" behavior="alternate" direction="up"
>O</marquee></SUP></FONT></FONT>

<font size=15><FONT COLOR=#5805AB><SUP> <marquee scrollamount="7"
width="5%" behavior="alternate" direction="up"
>V</marquee></SUP></FONT></FONT>

<font size=15><FONT COLOR=#FF0404><SUP> <marquee scrollamount="8"
width="5%" behavior="alternate" direction="up"
>E</marquee></SUP></FONT></FONT>

<font size=15><FONT COLOR=#2E05D5><SUB> <marquee scrollamount="9"
width="5%" behavior="alternate" direction="up"
>Y</marquee></SUB></FONT></FONT>

<font size=15><FONT COLOR=#5805AB><SUB> <marquee scrollamount="9"
width="5%" behavior="alternate" direction="up"
>O</marquee></SUB></FONT></FONT>

<font size=15><FONT COLOR=#820481><SUP> <marquee scrollamount="8"
width="5%" behavior="alternate" direction="up"
>U</marquee></SUP></FONT></FONT>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 19:12:19
Tạo một dropdown list

<script language="JavaScript">
<!--
function go(){
if (document.selecter.select1.options[document.selecter.select1.selectedIndex].value != "none") {
location = document.selecter.select1.options[document.selecter.select1.selectedIndex].value
}
}
//-->
</script>
</head>
<body>
<center><h1>A Dropdown List</h1></center>
<center><script language="JavaScript">
<!--
document.write('<form name="selecter"><select name="select1" size=1>');
document.write('<option value=none>Select your destination');
document.write('<option value=none>--------------------');
document.write('<option value="http://www.shop4all.com">Shopping Page');
document.write('<option value="http://www.coomedia.com">Main Page');
document.write('<option value="http://www.yahoo.com">Navigation');
document.write('</select>');
document.write('<input type="button" value="Go" onclick="go()">');
document.write('</form>');
// end hiding contents -->

//parent.cont.location.href =
//<frameset cols="37%,*">
// <frame name="boxcont" src="boxcont.htm" marginwidth="10" marginheight="10" scrolling="auto" //frameborder="no">
// <frame name="cont" src="cont.htm" marginwidth="10" marginheight="10" scrolling="auto" //frameborder="no">
//</frameset>

</script></center>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 19:12:42
Mở rộng thể hiện các liên kết từ một tiêu đề

<script language="JavaScript1.2">
<!--
/*Contractable Headers script- By Website Abstraction
(www.wsabstract.com)
Over 200+ free JavaScripts here!
*/
var head="display:''"
function doit(header){
var head=header.style
if (head.display=="none")
head.display=""
else
head.display="none"
}
//-->
</script>

<h2 style="cursor:hand" onClick="doit(document.all[this.sourceIndex+1])" title="Click
here to expand/contract!">Some JavaScript Links</h2>
<span style="display:none" style=&{head};>
<dl>
<dt><a
href="http://developer.netscape.com/docs/manuals/communicator/jsguide4/index3.ht
m" target="_top">Netscape</a><dd>The official source about JavaScript
<dt><a href="http://javascriptsource.com" target="_top">The JavaScript
Source</a><dd>Lots of good examples
<dt><a href="http://www.ce.net/users/ryan/java/" target="_top">The Unofficial
JavaScript Resource Center</a>
<dd>Some useful examples
<dt><a href="http://www.coolshare.com/html/" target="_top">JAVAZOO</a>
<dd>A page stuffed with JavaScript examples
<dt><a href="http://javascript.developer.com/" target="_top">Gamelan JavaScript
Pages</a>
<dd>A truly excellent collection of links to JavaScript pages and collections
<dt><a href="http://www.freqgrafx.com/411/library.html">Snippet Library</a>
<dd>A fine collection of scripts
<dt><a href="http://www.geocities.com/SiliconValley/7116/">JavaScript Planet</a>
<dd>Some nice scripts
<dt><a href="http://irt.org/">IRT.ORG</a>
<dd>An excellent collection of articles and scripts.
</dl>
</span>
<h2 style="cursor:hand" onClick="doit(document.all[this.sourceIndex+1])" title="Click
here to expand/contract!">Some DHTML Links</h2>
<span style="display:none" style=&{head};>
<table cellspacing="10" cellpadding="2">
<tr><td><a href="http://www.microsoft.com/workshop/author/dhtml/">Microsoft's Site
Builder Network<br>-Dynamic HTML</a></td>
<td><a href="http://www.dhtmlzone.com/index3.html">Macromedia's DHTML
Zone</a></td></tr>
<tr><td><a
href="http://developer.netscape.com/library/documentation/communicator/dynhtml/ind
ex3.htm">Dynamic HTML in Netscape Communicator</a></td>
<td><a href="http://www.erols.com/jrule/dhtml/">DHTML Demos</a></td></tr>
<tr><td><a href="http://www.insidedhtml.com/home.htm">Inside DHTML</a></td>
<td><a href="http://members.tripod.com/~dynduo/ ">The Dynamic Duo</a></td></tr>
<tr><td><a href="http://www.webreference.com/dhtml/">Dynamic HTML
Lab</a></td>
<td><a href="http://webcoder.com/">WebCoder.com</a></td></tr>
<tr><td><a href="http://rapid.wrox.co.uk/webdev/BookList.asp">The Wrox Web-
Developer<br>Books and Samples Page</a></td>
<td><a href="http://www.projectcool.com/developer/">Project Cool<br>Developer
Zone</a></td></tr></table>
</span>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 19:13:14
Dòng văn bản hiện lên rồi mờ dần

<style>
body{background-color:#ffe4c4}
A{color:Navy; text-decoration:none}
A:hover{color:red}
A:visited:{color:#808080}
TD{font-family:arial,helvetica; font-size:10pt}
</style>
<script language="JavaScript1.2">
/********************************************************************************
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts.
This may be used freely as long as this msg is intact!
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0

/********************************************************************************
Here are the variables you must set: (this is the only part you have to change)

Remember tho, if you wan't different size for the layers, different clip or anything
change that in the stylesheet.
*/

//The delay between the fades (in milliseconds) smaller value gives less time:
betweendelay=3000

//Do you wan't it to start over on the first one when it's gone trought all the news?
//(set to 0 if not)
var loop=1

//What font do you want it use?
FontFace='arial,helvetiva'

//What font-size (in pixel)?
FontSize=14

//Do you want it to fade out as well? 1 for on, 0 for off
fadeback=1

//Set the colors, first color is same as background, last color is the color it stops at:
//You can have upto 7 colors, set the ones you wan't use to 0
colors=new Array()
colors[0]='#ffe4c4'
colors[1]='#EEEEEE'
colors[2]='#CCCCCC'
colors[3]='#999999'
colors[4]='#666666'
colors[5]='#333333'
colors[6]='#000000'

//This is the news you wanna have, set the link and the text. If you don't wan't it to link anywhere
//use a # as the link
news=new Array()
//Copy the three lines and change the info and numbers to get more news.
news[0]=new Array()
news[0]["text"]="JavaScript Resources contains hundreds of FREE JavaScripts and DHTML scripts!"
news[0]["link"]="http://www.jsr.communitech.net/"

news[1]=new Array()
news[1]["text"]="Visit also my site about where I live, Alan\ 's Page - A Guide to Greenwich and Charlton"
news[1]["link"]="http://ourworld.compuserve.com/homepages/apalmer/"

/*Dont change anything below this!
*********************************************************************************/
fadeInit=new Function("oNews=new makeObj('divNews','divCont'); fadeNews(0)")
function makeObj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
this.writeref=(n) ? eval(nest+'document.'+obj+'.document'):eval(obj);
this.fadeIt=b_fadeIt
this.obj = obj + "Object"; eval(this.obj + "=this")
}
function b_fadeIt(text,link,font,size,speed,fn,num,c0,c1,c2,c3,c4,c5,c6){
if(num<arguments.length && arguments[num]!=0){
writetext='<a href="'+link+'" style="text-decoration:none; font-size:'+size+'px">'
+'<font face="'+font+'" color="'+arguments[num]+'">'+text+'</font></a>'
if(n){this.writeref.write(writetext); this.writeref.close()}
if(ie) this.writeref.innerHTML=writetext
num++
setTimeout(this.obj+'.fadeIt("'+text+'","'+link+'","'+font+'",'+size+','+speed+',"'
+fn+'",'+num+',"'+c0+'","'+c1+'","'+c2+'","'+c3+'","'+c4+'","'+c5+'","'+c6+'")',speed)
}else setTimeout('eval('+fn+')',betweendelay)
}
function fadeNews(num){
if(num<news.length){
fn=fadeback?'fadeBack('+num+')':'fadeNews('+(num+1)+')';
oNews.fadeIt(news[num]["text"],news[num]["link"],FontFace,FontSize,100,fn,7,
colors[0],colors[1],colors[2],colors[3],colors[4],colors[5],colors[6])
}else if(loop)fadeNews(0)
}
function fadeBack(num){
if(num>=0){
oNews.fadeIt(news[num]["text"],news[num]["link"],FontFace,FontSize,100,'fadeNews('+(num+1)
+')',7,colors[6],colors[5],colors[4],colors[3],colors[2],colors[1],colors[0])
}
}
onload=fadeInit;
/*End of fadescript
**********************************************************************************/
</script>
<body>
<div id="divCont" style="position:absolute; width:250; height:200; left:15; top:120">
<div id="divNews" style="position:absolute">
<script>//We gotta write something here so netscape will make it
//be the correct size, but we will only write if it's a 4.x browser
if(document.all || document.layers) document.write("dummy text, dummy"
+"text, you can place you fist news or a welcome msg or something here."
+"If you place these layers inside a table or something you can also"
+"use this as the msg that browsers that doesn't suport dhtml will see.")
</script>
</div>
</div>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 19:13:42
Các liên kết xoay vòng tròn

<html>
<head>
<title>JavaScript Resources - Flying Links</title>
<style>
.fly {
font-family: Arial, Helvetica;
font-size: large;
color: #0000ff;
position: absolute;
visibility: hidden;
z-index: 2;
}

.logo {
font-family: Zap-Chance, cursive;
font-size: xx-large;
color: #ff0000;
position: absolute;
top: 0px;
left: 30px;
visibility: visible;
z-index: 1;
}

.desc {
text-align: center;
font-family: Arial, Helvetica;
color: #cc6699;
position: absolute;
top: 220px;
left: 40px;
width: 400px;
visibility: hidden;
z-index: 0;
}
</style>
<script type="text/javascript" language="JavaScript">


/* Show an object */
function showObject(object) {
object.visibility = VISIBLE;
}

/* Hide an object */
function hideObject(object) {
object.visibility = HIDDEN;
}

/* Slide the company logo from top to middle */
function slideLogo(from, to) {
if (from < to) {
company.top = (from += 10);
setTimeout('slideLogo(' + from + ',' + to + ')', 75);
}
else initObjects();
}

/* Rotate selected objects */
function rotateObjects() {
for (var i = 0; i < pos.length; i++) {
pos += inc; objects.visibility = 'visible';
objects.left = (r * Math.cos(pos)) + xoff
objects.top = (r * Math.sin(pos)) + yoff;
}
rotateTimer = setTimeout("rotateObjects()", 75);
}

/* Initialize selected objects for rotation */
function initObjects() {
/* Here is the array of HTML elements that will be rotated, from fly1 to fly4
Just put the shortcut variables to the HTML elements in this little array
and they will be rotated automatically */
objects = new Array(fly1, fly2, fly3, fly4);
pos = new Array();
pos[0] = 0;
for (var i = 1; i < objects.length; i++) {
pos = parseFloat(pos[i - 1] + ((2 * pi) / objects.length));
}
rotateObjects();
}

/* Variables for rotating objects */
var objects;
var pos;
var r = 160; // radius
var xoff = 180; // x offset
var yoff = 170; // y offset
var pi = Math.PI; // get pi
var inc = pi / 180; // degrees per rotation cycle
var objects; // objects to be rotated
var pos; // position for objects

</script>

<SCRIPT LANGUAGE="JavaScript">

<!--
function exit() {
if (window.name == "") {
// top.location.href = url;
} else {
//top.opener.top.location.href = url;
top.close();
}
}
//-->

</SCRIPT>
</head>
<body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<div id = "fly1" class = "fly">
<a href = "contents.htm" onMouseOver = "showObject(desc1)" onMouseOut = "hideObject(desc1)">Introduction</a><br>
</div>
<div id = "fly2" class = "fly">
<a href = "navigationaids.htm" onMouseOver = "showObject(desc2)" onMouseOut = "hideObject(desc2)">Navigation Aids</a><br>
</div>
<div id = "fly3" class = "fly">
<a href = "coloursandgraphics.htm" onMouseOver = "showObject(desc3)" onMouseOut = "hideObject(desc3)">Colours and Graphics</a><br>
</div>
<div id = "fly4" class = "fly">
<a href = "funstuff.htm" onMouseOver = "showObject(desc4)" onMouseOut = "hideObject(desc4)">Fun Stuff</a><br>
</div>
<div id = "company" class = "logo">JavaScript Resources</div>
<div id = "desc1" class = "desc">
Introduction and links
</div>
<div id = "desc2" class = "desc">
Aids to Web site navigation
</div>
<div id = "desc3" class = "desc">
Playing with colours and images
</div>
<div id = "desc4" class = "desc">
Games, quizzes, etc.
</div>
<script type="text/javascript" language="JavaScript">

/* Simple version detection */
var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);

/* They can be used in place
of hidden and visible because on occasion Navigator has problems with the two */
var HIDDEN = (isNS) ? 'hide' : 'hidden';
var VISIBLE = (isNS) ? 'show' : 'visible';

/* Create shortcut variables for different absolutely positioned elements */
var fly1 = (isNS) ? document.fly1 : document.all.fly1.style;
var fly2 = (isNS) ? document.fly2 : document.all.fly2.style;
var fly3 = (isNS) ? document.fly3 : document.all.fly3.style;
var fly4 = (isNS) ? document.fly4 : document.all.fly4.style;
var company = (isNS) ? document.company : document.all.company.style;
var desc1 = (isNS) ? document.desc1 : document.all.desc1.style;
var desc2 = (isNS) ? document.desc2 : document.all.desc2.style;
var desc3 = (isNS) ? document.desc3 : document.all.desc3.style;
var desc4 = (isNS) ? document.desc4 : document.all.desc4.style;

/* Begin the sliding of the company logo */
slideLogo(0, 140);
</script>
<div id="footer+text" style="position: absolute; left:200; top: 370"><layer name="footer+text" left=200 top=370><form>
<input type=button value="Close Window" onClick="exit();">
</form> </layer></div>
</body>
</html>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 19:14:31
Một dạng đồng hồ khác trên trang web

<body onLoad="show5()">
<span id="liveclock" style="position:absolute;left:10;top:10;">
</span>
<script language="JavaScript">
<!--
/*Upper Corner Live clock script credit: Website Abstraction (www.wsabstract.com) More free scripts here!
*/
function show5(){
if (!document.layers&&!document.all)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if (hours>12){ dn="PM"; hours=hours-12;
}
if (hours==0){ hours=12;}
if (minutes<=9){ minutes="0"+minutes;}
if (seconds<=9){ seconds="0"+seconds;}
//change font size here to your desire
myclock="<font size='3' face='Arial' ><b><font size='1'>Current Time:</font></br>"+hours+":"+minutes+":"
+seconds+" "+dn+"</b></font>"
if (document.layers){
document.layers.liveclock.document.write(myclock);
document.layers.liveclock.document.close();
}
else if (document.all){liveclock.innerHTML=myclock;}
setTimeout("show5()",1000);
}
//-->
</script>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 19:15:18
Chuyển đổi các đơn vị đo chiều dài

<script language="JavaScript" type="text/javascript">
<!--
// Script Editor: Howard Chen

// Browser Compatible for the script: IE 3.0 or Higher

// Netscape 2.0 or Higher

// This script is free as long as you keep its credits

/*The way this works is the converter converts the number

into the smallest unit in the converter, in this case it will

be centimeter, and then it converts the unit fram centimeterto

other units.*/

function nofocus()

{

document.convert.InUnit.focus()

}

var cmValue = 1

var mValue = 100

var kmValue = 100000

var inValue = 2.54000843476

var ftValue = 30.4801012183

var ydValue = 91.440275784

var miValue = 160934.708789

function toCM()

{

var i = document.convert.unit.selectedIndex

var thisUnit = document.convert.unit.options.value

if (thisUnit == "CM")

{

document.convert.cm.value = document.convert.InUnit.value

}

else if(thisUnit == "M")

{

document.convert.cm.value = document.convert.InUnit.value * mValue

}

else if(thisUnit == "KM" )

{

document.convert.cm.value = document.convert.InUnit.value * kmValue

}

else if(thisUnit == "IN" )

{

document.convert.cm.value = document.convert.InUnit.value * inValue

}

else if(thisUnit == "FT" )

{

document.convert.cm.value = document.convert.InUnit.value * ftValue

}

else if(thisUnit == "YD" )

{

document.convert.cm.value = document.convert.InUnit.value * ydValue

}

else if(thisUnit == "MI" )

{

document.convert.cm.value = document.convert.InUnit.value * miValue

}

toAll()

}

function toAll()

{

var m = document.convert.cm.value

document.convert.m.value = m / mValue

document.convert.km.value = m / kmValue

document.convert.inch.value = m / inValue

document.convert.ft.value = m / ftValue

document.convert.yd.value = m / ydValue

document.convert.mi.value = m / miValue

}
//-->
</script>
<div align="center"><h1>Length Converter</h1></div>
<p>Simply choose the unit you want to use, type the value in the field next to it, and click the 'Convert' button.</p>
<div align="center"><form name="convert">
<table border=1>
<tr><th>Unit</th><th>Number</th></tr>
<tr>
<td>
<select name="unit">
<option value="CM">Centimetre
<option value="M">Metre
<option value="KM">Kilometre
<option value="IN">Inch
<option value="FT">Foot
<option value="YD">Yard
<option value="MI">Mile
</select>
</td>
<td>
<input type="text" name="InUnit" size="20" maxlength="20" value="0">
</td>
</tr>
<tr>
<td>
Centimetre: </td>
<td>
<input type="text" name="cm" size="20" maxlength="20" value="0" onFocus="nofocus()">
</td>
</tr>
<tr>
<td>
Metre:
</td>
<td>
<input type="text" name="m" size="20" maxlength="20" value="0" onFocus="nofocus()">
</td>
</tr>
<tr>
<td>
Kilometre: </td>
<td>
<input type="text" name="km" size="20" maxlength="20" value="0" onFocus="nofocus()">
</td>
</tr>
<tr>
<td>
Inch: </td>
<td>
<input type="text" name="inch" size="20" maxlength="20" value="0" onFocus="nofocus()">
</td>
</tr>
<tr>
<td>
Foot: </td>
<td>
<input type="text" name="ft" size="20" maxlength="20" value="0" onFocus="nofocus()"> </td>
</tr>
<tr>
<td>
Yard: </td>
<td>
<input type="text" name="yd" size="20" maxlength="20" value="0" onFocus="nofocus()">
</td>
</tr>
<tr>
<td>
Mile: </td>
<td>
<input type="text" name="mi" size="20" maxlength="20" value="0" onFocus="nofocus()">
</td>
</tr>
<tr>
<td align="center">
<input type="Reset" value="Start Over">
</td>
<td align="center">
<input type="button" value="Convert" onClick="toCM()">
</td>
</tr>
</table>
</form>
</div>
Chán đời đi lang thang !

CDDLT
  • Số bài : 1271
  • Điểm thưởng : 0
  • Từ: 21.12.2004
  • Nơi: TP Vũng Tàu - Việt Nam
RE: JavaScript dành cho các bạn học thiết kế Web - 27.10.2005 19:15:39
Tạo một menu list

<script language="JavaScript">

<!-- Begin
function go_to_station() {
if (document.stationform.stationselect.options[0].selected) {
window.location.href = "http://www.shop4all.com";}
else if (document.stationform.stationselect.options[1].selected) {
window.location.href = "http://www.coomedia.com";}
else if (document.stationform.stationselect.options[2].selected) {
window.location.href = "http://www.microsoft.com";}
else if (document.stationform.stationselect.options[3].selected) {
window.location.href = "http://www.yahoo.com";}
else if (document.stationform.stationselect.options[4].selected) {
window.location.href = "http://www.netscape.com";}
else if (document.stationform.stationselect.options[5].selected) {
window.location.href = "http://msdn.microsoft.com";}
return true;
}
function textValue() {
var stationInteger, stationString
stationInteger=document.stationform.stationselect.selectedIndex
stationString=document.stationform.stationselect.options[stationInteger].text
document.stationform.stationtext.value = "Go to " + stationString +"!"
}
// End -->
</script>
<body>
<center>
<table align="center" bgcolor="#b8860b" cellspacing="2" cellpadding="2" border="2">
<tr>
<td align="center">
<table border="0" cellspacing="2" cellpadding="2" align="CENTER" valign="MIDDLE" bgcolor="#deb887"><tr><td align="CENTER" valign="MIDDLE"><form name="stationform">
<select name="stationselect" onchange="textValue()" multiple size="5">
<option>Shopping Home Page
<option>BDG Home Page
<option>Microsoft Home Page
<option>Yahoo
<option>Netscape
<option>Developer's Page
</select></td></tr>
<tr><td align="CENTER" valign="MIDDLE">
<input type="button" name="stationbutton" value="Go!" onclick="go_to_station()">
</td></tr>
<tr><td align="CENTER" valign="MIDDLE"><input type="text" name="stationtext" value="" size="35" maxlength="35">
<p>
</form></td></tr></table></td>
</tr>
</table></center>
Chán đời đi lang thang !

Thay đổi trang: 12 > | Trang 1 của 2 trang, bài viết từ 1 đến 30 trên tổng số 58 bài trong đề mục