Lập Trình JavaScript

Code lam chu chay 7 mau

[code:2i3s5xyj]<html></p>

<head>

var rainbowcount = 0;

var glitcount=0;

var glitstring='';

var shimmercount=0;

var shimmerstring='';

var ie4 = false;

if(document.all) {

ie4 = true;

}

function setContent(name, value) {

var d;

if (ie4) {

d = document.all[name];

} else {

d = document.getElementById(name);

}

d.innerHTML = value;

}

function getContent(name) {

var d;

if (ie4) {

d = document.all[name];

} else {

d = document.getElementById(name);

}

return d.innerHTML;

}

function setColor(name, value) {

var d;

if (ie4) {

d = document.all[name];

} else {

d = document.getElementById(name);

}

d.style.color = value;

}

function getColor(name) {

var d;

if (ie4) {

d = document.all[name];

} else {

d = document.getElementById(name);

}

return d.style.color;

}

function toSpans(span) {

var str=span.firstChild.data;

var a=str.length;

span.removeChild(span.firstChild);

for(var i=0; i<a; i++) {

var theSpan=document.createElement("SPAN"

theSpan.appendChild(document.createTextNode(str.ch arAt(i)));

span.appendChild(theSpan);

}

function glitter(name, col, speed) {

var value = getContent(name);

while ( value.indexOf("", "-10&quot != (-1) ) {

var value = value.replace("", ""

};

if (value.indexOf('<span') >= 0) { return; }

var length = 0;

var str = '';

var ch;

var token = '';

var htmltag = false;

for (i = 0; i < value.length; i++) {

ch = value.substring(i, i+1);

if (i < value.length - 1) { nextch = value.substring(i+1, i+2); } else { nextch = ' '; }

token += ch;

if (ch == '<' && '/aAbBpPhHiIoOuUlLtT'.indexOf(nextch) >= 0) { htmltag = true; }

if (ch == '>' && htmltag) { htmltag = false; }

if (!htmltag && ch.charCodeAt(0) > 30 && ch != ' ' && ch != '\n') {

str += '<span id="' + name + '_' + length + '">' + token + '</span>';

token = '';

length++;

}

setContent(name, str);

glitcommand = 'glitterloop(\'' + name + '\', ' + length + ', 0, 1, \'' + col + '\', ' + speed + ')';

setTimeout(glitcommand , speed);

}

function shine(name, col, speed) {

var value = getContent(name);

while ( value.indexOf("", "-10&quot != (-1) ) {

var value = value.replace("", ""

};

if (value.indexOf('<span') >= 0) { return; }

var length = 0;

var str = '';

var ch;

var token = '';

var htmltag = false;

for (i = 0; i < value.length; i++) {

ch = value.substring(i, i+1);

if (i < value.length - 1) { nextch = value.substring(i+1, i+2); } else { nextch = ' '; }

token += ch;

if (ch == '<' && '/aAbBpPhHiIoOuUlLtT'.indexOf(nextch) >= 0) { htmltag = true; }

if (ch == '>' && htmltag) { htmltag = false; }

if (!htmltag && ch.charCodeAt(0) > 30 && ch != ' ' && ch != '\n') {

str += '<span id="' + name + '_' + length + '">' + token + '</span>';

token = '';

length++;

}

setContent(name, str);

shinecommand = 'shineloop(\'' + name + '\', ' + length + ', 0, 1, \'' + col + '\', ' + speed + ')';

setTimeout(shinecommand , speed);

}

function RainbowSpan(span, hue, deg, brt, spd, hspd) {

this.deg=(deg==null?360:Math.abs(deg));

this.hue=(hue==null?0:Math.abs(hue)%360);

this.hspd=(hspd==null?3:Math.abs(hspd)%360);

this.length=span.firstChild.data.length;

this.span=span;

this.speed=(spd==null?50:Math.abs(spd));

this.hInc=this.deg/this.length;

this.brt=(brt==null?255:Math.abs(brt)%256);

this.timer=null;

toSpans(span);

this.moveRainbow();

}

RainbowSpan.prototype.moveRainbow = function() {

if(this.hue>359) this.hue-=360;

var color;

var b=this.brt;

var a=this.length;

var h=this.hue;

for(var i=0; i<a; i++) {

if(h>359) h-=360;

if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }

else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }

else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }

else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }

else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }

else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }

h+=this.hInc;

this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+&quot";

}

this.hue+=this.hspd;

}

function shineloop(name, length, ind, delta, col, speed) {

var next = ind + delta;

if (next >= length) { delta = delta * -1; next = ind + delta; }

if (next < 0) { delta = delta * -1; next = ind + delta; }

setColor(name + '_' + ind, getColor(name + '_' + next));

setColor(name + '_' + next, col);

shinecommand = 'shineloop(\'' + name + '\', ' + length + ', ' + next + ', ' + delta + ', \'' + col + '\', ' + speed + ')';

setTimeout(shinecommand , speed);

}

function glitterloop(name, length, ind, delta, col, speed) {

var new_spd = Math.floor(Math.random()*31);

var new_spd = (new_spd - 15);

var new_spd = (new_spd + speed);

var next = Math.floor(Math.random()*(length+1));

if (next >= length) { delta = delta * -1; next = (-1); }

if (next < 0) { delta = delta * -1; next = 1; }

setColor(name + '_' + ind, getColor(name + '_' + next));

setColor(name + '_' + next, col);

glitcommand = 'glitterloop(\'' + name + '\', ' + length + ', ' + next + ', ' + delta + ', \'' + col + '\', ' + speed + ')';

setTimeout(glitcommand , new_spd);

}

</script>

</head>

<body>

<SCRIPT language="JavaScript">var rainbowcount=(rainbowcount+1); document.write("<span id='rain"+rainbowcount+"'>" </SCRIPT>ChangUonDyU</span>

while(shimmercount>0) {

var shimmerstring=shimmercount+ 'shine';

eval('var colcon= shimmercolor' +shimmercount);

eval('var shimspeed="shimmerspeed' +shimmercount+ '"');

eval('var shimcolor="' +colcon+ '"');

shine(shimmerstring, shimcolor, shimspeed);

var shimmercount=shimmercount-1;

};

while(glitcount>0) {

var glitstring=glitcount+ 'glitter';

eval('var colcon= glitcolor' +glitcount);

eval('var glitspeed="glitspeed' +glitcount+ '"');

eval('var glitcolor="' +colcon+ '"');

glitter(glitstring, glitcolor, glitspeed);

var glitcount=glitcount-1;

};

while(rainbowcount>0) {

eval('var rain'+rainbowcount+'=document.getElementById(&quot ;rain'+rainbowcount+'"');

eval('var rainbowspanning'+rainbowcount+'=new RainbowSpan(rain'+rainbowcount+', 0, 360, 255, 50, 348);');

eval('rainbowspanning'+rainbowcount+'.timer=window .setInterval("rainbowspanning'+rainbowcount+' .moveRainbow()", 50);');

var rainbowcount=(rainbowcount-1);

};

</script>

</body>

</html> [/code]

chú ý thay dòng chữ ChangUonDyu màu đỏ thành dòng chữ bạn muốn

demo

http://hqth.vndv.com/rainbow.html

---

[color=#FF0000:2i3s5xyj]donguyen edited[/color]

Tóm Tắt JavaScript

Bắt đầu :

//Mã lệnh

</Script>

Hoặc :

//Mã lệnh

</Script>

-Xuất ra một dòng : document.Write("text");

document.WriteLn("text");

-Xuất ra một cữa sổ :

alert("text");

prompt("text");

-Nhập dữ liệu và Hiện lên trình duyệt:

Var name=window.prompt("Nhap So vao ","2");

document.writeLn("Ban da nhap so : "+name+" ;");

Biến va phân loại biến

Biến toàn cục : x=0;

Biến cục bộ : var x=0;

Kiểu số nguyên : (interger)

hệ số 8 ,10,16;

Kiểu dấu phẩy động :(Floating Point)

gồm 4 phần:

-Phần nguyên thập phân

-Phần dấu chấm thập phân

-Phần dư

-Phần mũ

VD: 12.034E2

Kiểu Logic (Boolean)

True

False

Kiểu chuỗi : (String)

Được đặt trong dấu nháy kép : "..........." hoặc '............';

Nếu muốn hiện thị được dấu nháy kép thì bấm : \"

Các Biểu Thức Trong JavaScript

Số học : + , - , * , /

Chuỗi : "....."+".........."

Logic :

Biểu thức điều kiện : (điều kiện)? ValTrue : ValFalse ;

Các Toán tử

Gán :

So Sánh :

Số Học :

+, - , * , / , % , -- , ++ , Toán tử phủ định

Chuỗi :

"abc"+"def"="abcdef"

Logic :

&& ,||, !

C¸c c©u lÖnh thao t¸c trªn ®èi tưîng

1.1.1. for...in

Có ph¸p

for (<variable> in <object>)

{

//C¸c c©u lÖnh

}

C©u lÖnh nµy ®îc sö dông ®Ó lÆp tÊt c¶ c¸c thuéc tÝnh (properties) cña mét ®èi tîng. Tªn biÕn cã thÓ lµ mét gi¸ trÞ bÊt kú, chØ cÇn thiÕt khi b¹n sö dông c¸c thuéc tÝnh trong vßng lÆp.

<SCRIPT LANGUAGE= "JavaScript">

document.write("The properties of the Window object are: <BR>");

for (var x in window)

document.write(" "+ x + ", ");

</SCRIPT>

1.1.1. new

biến new được thực hiện để tạo ra một thể hiện mới của 1 đối tượng

object var = new object_type(param1 [,param2].....[,param N])

<SCRIPT LANGUAGE= "JavaScript">

function person(first_name, last_name, age, sex){

this.first_name=first_name;

this.last_name=last_name;

this.age=age;

this.sex=sex;

}

person1= new person("Thuy", "Dau Bich", "23", "Female");

person2= new person("Chung", "Nguyen Bao", "24", "Male");

person3= new person("Binh", "Nguyen Nhat", "24", "Male");

person4= new person("Hoµn", "§ç V¨n", "24", "Male");

document.write ("1. "+person1.last_name+" " + person1.first_name + "<BR>" );

document.write("2. "+person2.last_name +" "+ person2.first_name + "<BR>");

document.write("3. "+ person3.last_name +" "+ person3.first_name + "<BR>");

document.write("4. "+ person4.last_name +" "+ person4.first_name+"<BR>");

</SCRIPT>

Ham Xoa Bai Viet

Dưới đây là 1 hàm JavaScript có tên delete :

function delete() {

// các câu lệnh xử lý

}

Ta có thể gọi hàm đó như thế này :

Khi người dùng nhấn vào chữ Xóa bài viết, hàm delete được gọi sẽ tiến hành việc xóa dữ liệu.

Nhưng việc này đòi hỏi 1 sự thận trọng và bạn muốn nó phải được xác nhận thêm 1 lần nữa. Vì thế chúng ta dùng lệnh confirm. Có nhiều cách, nhưng minh bạch nhất là tạo ra 1 hàm cho riêng công việc này. Có thể viết code như sau :

function doConfirm() {

var quest , cfm ;

quest="Bạn có thực sự muốn xóa bài viết này ?" ;

cfm=confirm(quest) ;

if(cfm) {

delete();

}

Cuối cùng, ta phải sửa lại 1 chút ở liên kết xóa bài, thay vì gọi hàm delete, chúng ta gọi hàm doConfirm

Thay doi mau nen trang web

1. <html>
2. <head>
3. <title>select color</title>
4. </head>
5. <body>
6. white<input type="radio" onclick="document.bgColor='white'" name="color"/>      
7. red<input type="radio" onclick="document.bgColor='red'"name="color"/>      
8. lavender<input type="radio" onclick="document.bgColor='lavender'"name="color" />      
9. hotpink<input type="radio" onclick="document.bgColor='hotpink'"name="color" />      
10. </body>
11. </html>

TẠO CHƯƠNG TRÌNH NGHE NHẠC BẰNG JAVA SCRIP

TẠO CHƯƠNG TRÌNH NGHE NHẠC BẰNG JAVA SCRIP

Nếu bạn có nhiều tệp âm thanh như MIDI, wave hoặc cả MP3 và muốn đưa chúng lên trang Web riêng của mình cho mọi người cùng thưởng thức, hoặc cũng có thể bạn không muốn sử dụng chương trình JetAudio cồng kềnh, chỉ với một đoạn trình JavaScript ngắn bạn có thể tạo ngay được một dàn âm thanh của mình.

Nhiều bài báo trước đây đã giới thiệu về cách viết chương trình bằng JavaScript - ngôn ngữ được viết trực tiếp trong tệp HTML và có thể thực hiện ngay với các trình duyệt Web hỗ trợ JavaScript. Cũng xin nói qua, JavaScript do hãng Netscape phát triển, do đó nó gắn liền với trình duyệt Netscape avigator/Communicator, còn Microsoft đưa ra JScript cho Internet Explorer (IE) - phần lớn hai ngôn ngữ này tương đương nhau, tuy vậy cũng có nhiều điểm không tương thích. Ðể có thể chạy được trên cả hai trình duyệt, ta phải viết chương trình tương thích với mỗi loại.Netscape sử dụng plug-in là LiveAudio để chạy các đối tượng âm thanh, còn IE sử dụng ActiveMovie để chạy các đối tượng âm thanh và hoạt hình. Dưới đây là một số phương thức mà ta sẽ sử dụng trong chương trình.

Khai báo đối tượng âm thanh và tạo danh sách bài hát

Khi tạo trang Web bằng ngôn ngữ HTML, sử dụng <EMBED> để khai báo một tệp đối tượng âm thanh. Dưới đây ta khai báo tệp âm thanh "nhacrung.mid" với tên NAME="mySound". Tên này sẽ được sử dụng trong suốt chương trình của ta.

Sử dụng một mảng "mySong" để lưu trữ danh sách bài hát. Mỗi phần tử của mySong là một đối tượng Song (tên bài, tên tệp). Tên bài này sẽ được thể hiện trên trang Web, tên tệp là file âm thanh trên đĩa, có thể là ".mid" hoặc ".wav" (với ActiveMovie đi kèm IE4/5.0, bạn có thể chơi được cả ".mp3").

Biến item chứa số lượng bài hát trong danh sách. Mỗi khi gọi setSong (), một bài hát được thêm vào danh sách. Dưới đây là đoạn mã chương trình:

<HTML>

<HEAD> <TITLE> Hifi Audio Player </TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript"><!-var BrowserID=DetectBrowser();//detect Netscape or Internet Explorer?

var mySong = new Array();

var item = 0;

var songPlaying = 0

var timeoutID = 0;

function Song (songName, fileName)

{this.songName = songName; this.fileName = fileName;}

function setSong (songName, {mySong[item++] = new Song(songName, fileName);}

setSong ("Nhac rung - Hoang Viet", "nhacrung.mid"); setSong ("Bien nho - Trinh Cong Son", "biennho.mid"); setSong ("Con kenh xanh xanh - Ngo Huynh", "conkenh.mid"); setSong ("Mat troi be tho - Tran Tien", "mattroi.mid"); setSong ("Xe dap oi - Ngoc Le", "xedap.mid");

Ðiều khiển

Hàm hifiPlay () sẽ gọi hifiState () để xác định chương trình có đang bận chơi hay tạm dừng không, khi đang tạm dừng bấm "Play" sẽ tiếp tục chơi. Nếu đang ở trạng thái không chơi, hifiPlay () sẽ chơi bài hát có thứ tự là tham số "num", biến toàn cục songPlaying lưu số thứ tự bài hát đang chơi. Nếu biến này lớn hơn tổng số bài hát, nó sẽ được đặt về 0 là bài đầu tiên trong danh sách. Với Netscape, gọi phương thức mySound.play () với tham số là tên tệp bài hát cần chơi - lấy từ danh sách mySong. Với IE, gán tên tệp cần chơi cho mySound.Run (). Tuy nhiên do IE cần khoảng thời gian để tải tệp về nên ta sử dụng setTimeout (): sau 1000 mili giây mới gọi mySound.Run ().

Ðối với các hàm hifiPause () và hifiStop (), các phương thức mySound.pause () và mySound.stop () tương ứng được sử dụng. Hàm hifiState () sử dụng các phương thức kiểm tra trạng thái nêu ở bảng trên để xác định chương trình đang bận chơi hay không

function hifiStop () {if(BrowserID==1)//Netscape? document.mySound.stop(); else//Internet Explorer? document.mySound.Stop(); clearTimeout (timeoutID);//clear timer

function hifiPause () {if (BrowserID==1)//Netscape?document.mySound.pause(); else//Internet Explorer?document.mySound.Pause();}

function hifiState() {if(BrowserID==1) // Netscape? return document.mySound.IsPlaying (); else//Internet Explorer? return document.mySound.CurrentState;}

Ðể chơi nhạc được liên tục

Như vậy chúng ta đã có các chức năng cơ bản của một trình chơi nhạc. Tuy nhiên mỗi khi nhấn Play chỉ chơi một bài rồi dừng. Muốn tự động chơi tiếp các bài tiếp theo, ta phải đặt đồng hồ theo dõi khi nào kết thúc một bản nhạc để chơi tiếp bản sau. Sử dụng setTimeout () với tham số (tên hàm theo dõi, khoảng

thời gian hiệu lực), tính theo mili giây. Khi hifiPlay () thực hiện, nó sẽ gọi setTimeout ().Sau khoảng thời gian hiệu lực là 1000 mili giây = 1 giây, hàm keepWatching () sẽ tự động được thực hiện. Nếu đang ở trạng thái nghỉ, hàm này sẽ không làm gì cả, còn không sẽ gọi hifiState () để kiểm tra chương trình có đang bận chơi hay không, nếu đang chơi nó sẽ đặt tiếp thời gian theo dõi để lặp lại kiểm tra này. Còn nếu vừa kết thúc chơi một bài, hifiPlay () sẽ được gọi để chơi bài tiếp theo.

Khi người dùng nhấn "Stop", hifiStop () sẽ gọi clearTimeout () để xoá thiết lập theo dõi thời gian đặt bởi setTimeout ().

function keepWatching () {if (hifiState ()==0) hifiPlay (++songPlaying);

else

timeoutID=setTimeout ('keepWatching ()', 1000);}

Xác định tên trình duyệt

Sử dụng phương thức window.navigator.appName để lấy tên trình duyệt đang dùng. Hàm detectBrowser () sẽ cho giá trị 1 nếu trình duyệt là Netscape; 2 nếu là Internet Explorer; () là các trình duyệt khác.

function detectBrowser () {var app=navigator.appName; if

(app.index0f ("Netscape") >=0) return 1; if (app.index0f

("Explorer")>=0) return 2; return 0;}//-> </SCRIPT>

Giao diện

Ðoạn chương trình dưới đây sẽ tạo giao diện sử dụng các thể HTML, tên các bài hát được lấy từ array mySong và đưa vào danh sách combo-list. Phần sau là đoạn HTML thể hiện các nút nhấn như Play, Pause, Stop giống như một dàn âm thanh thường có.

< SCRIPT LANGUAGE="JavaScript"><!-document.write lt;CENTER><TABLE><FORM NAME="myForm" onSubmit="return false;">'); document.write ('<TR><TD ALIGN=CENTER><BIG>Web-style Audio Player</BIG></TD></TR>'); document.write ('<TR><TD ALIGN=CENTER><SELECT NAME="myList">'); document.write ('OPTION SELECTED> 1> ' +mySong [0] .songName);

for (i=1, i<item; i++) document.write ('<OPTION >' + (i+1) +'> '+ mySong .songName); document.wirte ('<SELECT></TD></TR>'); //-><SCRIPT> <TR><TD ALIGN=CENTER><INPUT TYPE="BUTTON" VALUE=" // " onClick="hifiPause ()"> <INPUT TYPE="BUTTON" VALUE=" > " onClick="hifiPlay (document.myForm.myList. selectedIndex)"> <INPUT TYPE="BUTTON" VALUE= " # " onClick="hifiStop()"></TD></TR><TR><TD

ALIGN=CENTER></TD></TR></FORM></TABLE></CENTER>

</BODY>

</HTML>

Khi Play (">") được nhấn, sự kiện onClick sẽ gọi hàm hifiPlay () với tham số là số thứ tự bài hát trong danh sách được lựa chọn. Tương tự, các phím Stop ("#"), Pause ("//")khi nhấn sẽ thực hiện các hàm hifiStop () và hifiPause ().

Các bước thực hiện chương trình

Ngôn ngữ C/C++ và Java, JavaScript có phân biệt chữ hoa/chữ thường, do đó khi gõ chương trình các bạn cần lưu ý.

1. Dùng trình soạn thảo text NotePad, nhập vào lần lượt các đoạn chương trình trên.

2. Chọn File/SaveAs, ở mục Save As Type chọn All Files (*.*), mục File name nhập với tên "hifiPlayer.html". Bấm Save.

3. Sử dụng Netscape Navigator/Communicator 2.0 trở lên, Microsoft Internet Explorer 4.0 trở lên để mở tệp trên.

Chú ý: Tệp âm nhạc trong <EMBED SRC="..."> buộc phải tồn tại trên đĩa. Các tệp âm nhạc khác nếu ở khác thư mục cần chỉ ra đường dẫn tương đối so với nơi đặt tệp html. Cũng có thể sử dụng các URL với các tệp được tải về từ Internet.

Bạn có thể thêm các tính năng khác như chế độ chơi ngẫu nhiên, chơi một số bài yêu thích hoặc theo dõi thời gian chơi của từng bài... Nếu bạn chưa có các tệp âm thanh .mid/.wav/.mp3, có thể lên Internet để lấy về. Các bạn có thể liên lạc qua email: để nhận được bản chương trình trên.

Tạo đồng hồ điện tử bằng JavaScript.

Tạo đồng hồ điện tử bằng JavaScript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

</form>

function HamThoiGian(){

// Khoi tao doi tuong thoi gian.

var ThoiGian = new Date(); // Kh?i t?o d?i tu?ng Date.

var Gio = ThoiGian.getHours(); // L?y gi? t? d?i tu?ng Date.

var Phut = ThoiGian.getMinutes(); // L?y phút t? d?i tu?ng Date.

var Giay = ThoiGian.getSeconds(); // L?y giây t? d?i tu?ng Date

// Thêm s? 0 vào tru?c s? ch? th?i gian n?u nhu nó nh? hon 10.

if(Gio<10){

Gio="0"+Gio;}

if(Phut<10){

Phut="0"+Phut;}

if(Giay<10){

Giay="0"+Giay;}

// Xu?t k? qu? ra m?c nh?p van b?n có tên MucVB

document.BM1.MucVB.value="Bay gio la: "+Gio+":"+Phut+":"+Giay;

// G?i l?i hàm HamThoiGian sau m?i m?t giây trôi qua.

}

setInterval("HamThoiGian()",1000); // S? d?ng setInterval d? g?i l?p di l?p l?i hàm HamThoiGian sau 1 giây.

</script>

</body>

</html>

Page updated

Google Sites

Report abuse