Thu vien 1001 chieu Javascript

<span class='text_page_counter'>(1)</span><div class='page_container' data-page=1>

<b>Thư viện 1001 chiêu Javascript</b>

<b>Hướng dẫn: </b>

* Dùng phím Ctrl + chuột trái để xem, hoặc tải về

* Những liên kết tải về cứ nhấn” Save

* Những liên kết không phải tải về (SAVE) mà ở dạng html, bạn dùng menu: view -> Source để lấy code. Chúc
các bạn thành cơng. Phù...phù...phù.

HTTP://maithienchanh.violet.vn hân hạnh đón chào quý khách + thành viên.
<b>- Cây thư mục</b>

Đây là đoạn JavaScript nhỏ giúp bạn tạo một mục lục dạng "cây thư mục" đơn giản.
- <b>Hình ảnh 3D ảo</b>

Đoạn mã giúp tạo hiệu ứng 3D.
<b>- Bộ tìm kiếm đơn giản</b>

Bạn muốn tạo một trang tìm kiếm riêng cho website của mình mà khơng cần sự hỗ trợ của các website khác,
nhưng bạn chẳng biết tí chút gì về các ngơn ngữ lập trình web như: PHP, ASP, CGI... Vậy xin mời bạn hãy vào
website e-Chip để download bộ tìm kiếm viết bằng JavaScript này về, sau đó theo hướng dẫn bạn có thể tự tạo
cho mình một trang tìm kiếm theo phong cách riêng của bạn.

- <b>Background ấn tượng</b>

Bạn có thể làm trang Web của mình có ảnh nền thật ấn tượng với các bước: chọn một hình nền (chân trời) sẫm
màu, mơ phỏng thêm hiệu ứng mưa rơi, và cuối cùng là cho xuất hiện ngẫu nhiên hình tia sét. Chúc bạn thành
cơng!

<b>- Hiệu ứng Batman</b>

Mời bạn tải chương trình tạo hiệu ứng “batman” về dùng thử. Tương tự các hiệu ứng chuột khác, các chú dơi sẽ
bay lượn quanh vị trí trỏ chuột. Nếu muốn bạn có thể giữ nguyên mã nguồn và thay đổi hình ảnh cho hợp với
trang Web của mình.

- <b>Quay hình</b>

Với một số logo có sẵn, tơi xin giới thiệu đoạn mã xoay vịng các hình ảnh. Bạn thay vđo logo trang Web mnh rồi
đặt vị trí thể hiện ở góc trên trái, sẽ rất đẹp và “huyền bí”, chúc bạn thành cơng!

<b>- Trắc nghiệm trực tuyến</b>

Bạn cần làm một cuộc trắc nghiệm nho nhỏ để kiểm tra lại kiến thức của mnh ở một vđi lĩnh vực? Mời bạn dùng
thử chương trnh “Trắc nghiệm trực tuyến”. Bạn chỉ cần thay đổi nội dung câu hỏi, đáp án là có thể mời bạn bè
“thi đấu” tính điểm trên trang Web của mnh rồi.

<b>- Ngoài kia... lá rơi đầy</b>

Tương tự như hiệu ứng tuyết rơi, mưa rơi... bạn có thể tạo một hiệu ứng thật đẹp trên trang Web của mình với
những chiếc lá nhiều màu sắc, đủ các kích cỡ. Chương trình có trên Website eChíp mục Thư viện JavaScript cùng
với các file ảnh đi kèm, mời bạn tải về dùng thử.

</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>

Nếu bạn muốn xem bóng tối đang phủ trên vùng nào của Trái Đất ở thời điểm hiện tại, mời bạn tải chương trình
này về dùng thử. Bạn có thể thay đổi giờ hệ thống để kiểm tra độ chính xác vùng tối trên bản đồ của chưong
trình.

<b>- Các kiểu menu</b>

Bạn muốn tìm hiểu các kiểu xuất hiện thực đơn, bảng thông báo động khi rê chuột lên trên liên kết? Chương trình
tơi giới thiệu sẽ lướt qua hơn 10 kiểu menu động, trong đó có cả những menu xuất hiện kèm theo hiệu ứng ngẫu

nhiên. Tùy theo mục đích sử dụng và phần thiết kế trang trí của Website, bạn có thể tham khảo để chọn cho
mình hiệu ứng phù hợp.

<b>- Tạo mã HTML tự động</b>

Để thu hút nhiều khách tham quan vào web của bạn hơn thì bạn nên mở thêm một dịch vụ miễn phí nào đó, tơi
xin đề cử dịch vụ thiết kế web. Người lướt Web chỉ cần nhập một vài thơng tin là có thể tạo ra một trang Web đơn
giản rồi!

- <b>Hình chuyển động</b>

Có nhiều cách để chuyển động hình trong Website, cũng như với mỗi cách bạn có thể tạo nhiều đường chuyển
động khác nhau. Xin giới thiệu một đoạn Script ngắn tạo chuyển động hình ngẫu nhiên.

<b>- Hiệu ứng chuyển ảnh</b>

Xin giới thiệu cùng các bạn hiệu ứng chuyển tiếp đơn giản mà thật đẹp mắt. Mỗi khi người dùng nhấp chuột vào
nút “Play” thì “Trang 1” và “Trang 2” sẽ được hốn đổi cho nhau. Bạn cũng có thể cài đặt thêm phần tự chuyển
đổi theo thời gian cho trước.

- <b>Màu và mã màu</b>

Đôi lúc bạn tự hỏi chọn màu background cho trang Web của mình như thế nào, và cần đối chiếu hiệu quả giữa
một số màu thơng dụng... Mời bạn vào Website e-Chíp tải chương trình về dùng thử. Khi bạn rê chuột lên ô màu
nào thì background sẽ được đổi ngay thành màu đó, đồng thời giá trị số biểu diễn cho màu vừa chọn sẽ hiện ra
bên dưới.

<b>- Đồng hồ theo chuột</b>

Có thể các bạn đã quen thuộc với những dòng chữ hoặc hiệu ứng theo chuột, tôi xin giới thiệu chương trình tạo

đồng hồ di chuyển theo chuột. Bạn có thể thay đổi tùy ý dịng chữ xoay bên ngồi ở phần đầu chương trình.
- <b>Chọn hình nền cho Website</b>

Nếu e ngại những vị khách khó tính khơng hài lịng với “skin” của trang Web mình, bạn có thể cho phép họ tự
chọn hình nền (background) tùy ý. Mời bạn tải chương trình về dùng thử, sau đó bạn sưu tầm thêm nhiều hình
nền đẹp để bổ sung cho chương trình.

<b>- Tạo bảng đổi đơn vị đo chiều dài</b>

Để có một bảng cho phép chuyển đổi giữa các đơn vị đo chiều dài, bạn chỉ cần vào Website e-CHÍP để tải đoạn
chương trình này về. Nếu cần bạn có thể chỉnh sửa mã nguồn để có nhiều loại đơn vị tính hơn.

- <b>Tạo hiệu ứng album ảnh</b>

Bạn có thể tạo một album ảnh “tự động” lật từng tờ, khi người lướt Web nhấp chuột vào hình ảnh sẽ dẫn đến một
liên kết cụ thể khác ( ở đây tôi đưa người lướt Web đến số báo tương ứng hình trong album).

<b>- Tạo trang giới thiệu ấn tượng</b>

</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>

- <b>Cẩm nang thời gian cho trang Web</b>

Xin giới thiệu cùng các bạn chương trình JavaScript cho phép tham khảo thời gian ở khắp năm châu. Bạn chỉ cần
chọn tên thành phố từ năm danh sách cho sẵn của chương trình, thời gian sẽ được hiển thị rất nhanh chóng và rõ
ràng.

<b>- Cuộn hình từ dưới lên</b>

Bạn có thể đưa file hình thích hợp vào đoạn mã JavaScript tơi giới thiệu để cuộn hình. Với cách thể hiện này bạn
có thể tự tạo một “banner” cho trang Web của mình.

- <b>Chú thích trên thanh trạng thái</b>

Có nhiều cách giới thiệu nội dung của một liên kết trên Web, mời bạn “xài” thử phương pháp tạo một dịng chú
thích trên thanh trạng thái (khi người lướt Web rê chuột lên trên liên kết).

<b>- Hình nền trên Website</b>

Khi bạn kéo thanh trượt, hình nền vẫn đứng yên tạo cảm giác chuyển động rất mượt và hấp dẫn. Bạn có thể
tham khảo mã nguồn để thay hình ảnh thích hợp hơn cho Website của mình.

- <b>Rung chuyển liên kết</b>

Các hình ảnh liên kết sẽ chuyển động liên hồi khi bạn rê chuột vào khung ảnh. Hiệu ứng này gây sự chú ý đặc
biệt đến người lướt Web và giúp trang Web bạn sinh động hơn.

<b>- Tùy biến màu sắc trang Web</b>

Cho phép người dùng tự chọn màu sắc thể hiện văn bản, màu nền cũng là một điều lý thú phải khơng bạn? Bạn
có thể thay đổi giao diện khác đi theo ý thích của mình và tăng thêm số màu thể hiện cho phong phú hơn.
- <b>Hồ cá trên Web</b>

Các bạn hẳn đã quen với các hiệu ứng nền động như mưa rơi... sao bạn khơng vào website e-CHÍP để tải chương
trình này về dùng thử? Chỉ cần kết hợp vài hiệu ứng là bạn có ngay một... hồ cá các loại trên Web rồi!

<b>- Liên kết trên Website</b>

Các liên kết “nóng” thường dùng được đưa vào một khung thể hiện rất tiện lợi và rõ ràng đối với người lướt Web.
Khi rê chuột đến liên kết nào đó, một mũi tên đỏ sẽ nhấp nháy ngay trước liên kết.

- <b>Chữ mờ ảo trên Web</b>

Khi bạn rê chuột lên liên kết, một số dòng chữ ( nội dung tùy ý như lời chú giải, thậm chí dịng quảng cáo,vv...)
sẽ hiện lên mờ ảo, rất nhẹ nhàng mà vẫn gây sự chú ý đối với người lướt Web.

<b>-Menu chuột phải</b>

Bạn đã bao giờ truy cập vào một menu của trang web bằng cách nhấp phải chuột chưa ? Đoạn mã JavaScript sau
đây ứng dụng định vị động của HTML đối với đối tượng lớp (ở đây là 1 menu).

- <b>Tạo lựa chọn dẫn đường cho các liên kết</b>

Có nhiều hình thức để tạo liên kết để dẫn đến các Website khác. Bạn có thể sử dụng menu chuột phải, các liên
kết trực tiếp, vv... Xin giới thiệu cùng các bạn một phương pháp rất dễ dàng và rõ ràng (về mặt giao diện đối với
người sử dụng): cho phép người lướt Web lựa chọn các liên kết, rồi sau đó nhấp chuột vào nút thực hiện.
- <b>Chữ quay nhiều hướng</b>

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>

- <b>Chữ nhảy múa</b>

Hiệu ứng này phù hợp cho việc thiết kế một trang giới thiệu cho website của bạn. Trước hết dòng chữ vừa uốn
lượn vừa di chuyển ngang màn hình, sau đó các ký tự sẽ lần lượt rơi xuống đáy màn hình như một cơn mưa ngập
tràn màu sắc vậy.

- <b>Các dạng Cursor</b>

Đây là một chương trình demo các hình dáng của trỏ chuột, từ đồng hồ cát, bàn tay, dấu hỏi, vv... Các bạn có
thể vào website e-Chíp mục Thư viện JavaScript để tải chuơng trình về dùng thử.

- <b>Hiệu ứng banh rơi</b>

Trái banh sẽ dội xuống đáy màn hình (điểm bắt đầu ở vị trí bạn nhấp chuột) và nảy lên, độ cao giảm dần cho

đến khi chuyển động dừng hẳn. Bạn có thể áp dụng hiệu ứng rất đẹp mắt này cho một dãy các ký tự.

- <b>Menu di chuyển được</b>

Giữa nhiều loại menu trên trang Web, menu di chuyển được có một vị trí “không đụng hàng”. Để bắt đầu di
chuyển menu, bạn nhấp chuột vào thanh tiêu đề, sau đó “thả” menu đến vị trí mới bằng cách nhấp đúp chuột.
- <b>Vẽ biểu đồ</b>

Biểu đồ trong Office thật đơn giản phải không bạn, tuy nhiên tôi muốn giới thiệu với các bạn một cách thể hiện
biểu đồ trên trang Web dùng JavaScript. Các bạn có thể nhập thẳng số liệu vào các ơ nhập liệu, sau đó nhấp
chuột vào nút “vẽ”, thế là xong!

- <b>Đồng hồ đeo tay</b>

Đồng hồ gắn trên các website thường là “điện tử” (khơng có kim) hoặc là dạng đồng hồ “treo tường”, tôi xin giới
thiệu với các bạn một chiếc đồng hồ đeo tay rất dễ thương, ngoài chức năng báo giờ (đương nhiên) nó cịn báo
ln thứ mấy trong tuần, ngày mấy trong tháng...

- <b>Cổ động viên Ai-Ti</b>

Còn đây là cổ động viên nhiệt tình và vơ tư nhất, bạn có thể gắn cổ động viên này lên bất kỳ trang web nào. Nếu
muốn cổ vũ lần nữa bạn chỉ cần nhấp chuột vào nút nhấn cạnh hình là xong, lúc này bạn có thể thưởng thức một
màn biểu diễn hoạt ảnh bằng các ký tự ráp lại.

- <b>Xem mã màu</b>

Đây là chương trình cho phép bạn có được mã RGB từ các màu thường gặp, bạn có thể thêm sáng, hoặc cho màu
gốc tối đi. Nếu muốn, bạn cũng có thể gõ trực tiếp các thơng số RGB (theo dec hoặc hex) để xem thử hiệu quả
màu mình chọn.

- <b>Đồng hồ JavaScript</b>

Xin giới thiệu cùng các bạn một chiếc đồng hồ có vẻ đẹp rất cổ điển. Bạn hồn tồn có thể "treo" chiếc đồng hồ
này lên trang Web của mình.

- <b>Ẩn - hiện logo</b>

Cho logo của mình xuất hiện cố định trên Website đơi lúc cũng nhàm chán, bạn có thể thử cho logo bay "lịng
vòng" trên trang quảng cáo. Logo sẽ chợt ẩn chợt hiện nên khơng làm "rối" tầm nhìn của người lướt Web.
- <b>Tạo hiệu ứng cho liên kết</b>

Bạn có thể thêm nhiều ý nghĩa hơn cho các liên kết bằng cách hiển thị thêm hình và/hoặc logo của Website được
liên kết. Hình ảnh sẽ được hiện ra khi người lướt Web trỏ chuột vào liên kết.

- <b>Dòng chữ xoay quanh con trỏ chuột</b>

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>

khác nhau).
- <b>Không gian ảo</b>

Tương tự hiệu ứng "mưa rơi". Tuy nhiên, bạn thay đổi hướng di chuyển thành trái-phải hoặc phải-trái, đồng thời
tạo ra các mức tốc độ di chuyển khác nhau (nhằm tạo chiều sâu như không gian 3 chiều, ở tốc độ bằng nhau vật
thể ở gần trông như chuyển động nhanh hơn). Như vậy là trang Web của bạn xem như được đặt vào một không
gian huyền ảo rồi đó.

- <b>Lịch để bàn kết hợp đồng hồ</b>

Nếu trên bàn làm việc có một bộ lịch “khuyến mãi” đồng hồ thì q thuận tiện phải khơng các bạn? Mời các bạn
vào website e-Chíp để tải chương trình về.

- <b>Menu động</b>

Menu cho trang web được thiết kế với màu sắc trang nhã, dễ theo dõi. Khi bạn di chuyển chuột đến một mục nào
trong menu, chú gà con - “linh vật” của e-Chíp sẽ bay theo. Bạn chỉ cần tìm một góc thích hợp để trình bày menu
này trên trang web của mình thơi.

- <b>Hồ cá “Java”</b>

Screensaver – trình bảo vệ màn hình đơi khi cịn giúp chúng ta có những giây phút thư giãn với các hình ảnh hết
sức tuyệt vời đi kèm. Xin giới thiệu cùng các bạn một “hồ cá” thật dễ thương mô phỏng các Screensaver để
“ngâm cứu”.

- <b>Khung hình di động</b>

Tương tự thủ thuật soi hình, tuy nhiên bạn phải làm cho khung hình trong suốt để tăng độ hấp dẫn. Khách thăm
website của bạn sẽ nhấp và giữ chuột trái, sau đó di chuyển chuột để xem hình ảnh (hay nội dung) bên dưới.
- <b>Đôi mắt lém lỉnh...</b>

Bạn hãy thử tải đoạn JavaScript này về rồi thử xem, khi bạn di chuyển chuột đến đâu, đôi mắt sẽ “liếc” theo đến
đó. Chỉ khi nào bạn di chuyển chuột ra ngồi vùng thể hiện của trang web thì đơi mắt này mới bị “ngồi vùng phủ
sóng” thơi.

- <b>Chữ quay chong chóng</b>

Xin giới thiệu cùng các bạn một hiệu ứng đơn giản: cho một dòng văn bản xoay tròn như chong chóng, với kích
thước to dần. Bạn chỉ nên dùng đoạn mã này khi website bạn có khơng gian trình bày và bạn muốn nó thêm
phần sinh động.

- <b>Rồng vàng</b>

Bạn có bao giờ thấy một đoạn text bay lượn trên trang web trông như chú “Rồng Vàng” chưa? Mời các bạn vào

website e-Chíp mục Thư viện JavaScript để lấy chương trình này về. Rất đẹp mắt đó bạn.

- Liên kết... đẹp như trong phim

Đoạn mã JavaScript được sử dụng để truyền các thông số cho một JavaApplet, các liên kết di chuyển trông như
đoạn phim đang chiếu. Hiệu quả thật tuyệt vời phải không các bạn? Mã nguồn ngắn gọn và rất đơn giản, bạn chỉ
cần thay đổi các liên kết cho phù hợp với website của mình.

- Tạo hiệu ứng cho liên kết

”Dân” làm web luôn cố gắng gây ấn tượng đối với khách tham quan “ngơi nhà” trên mạng của mình. Do đó các
hình ảnh và liên kết thường được chăm chút kỹ để tạo nét hấp dẫn riêng. Xin giới thiệu cùng bạn một chiêu: “nổ
tung” tên liên kết bay ra thành nhiều hướng khi trỏ chuột vào nó.

- Thế giới quay

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>

chuột vào hai nút tương ứng (nằm bên cạnh bản đồ). Các bạn có thể xem mã nguồn chương trình để tìm hiểu và
thay đổi tỷ lệ phóng, cũng như góc xoay theo ý muốn.

- Chữ ngược

Hiệu ứng chữ ngược (đổ bóng cho chữ) rất đơn giản mà thật hiệu quả. Nếu kết hợp cùng việc làm nhịe khung
hình, bạn sẽ có thêm hiệu ứng “soi mặt hồ” thật đẹp. Bạn có thể vào website eChíp mục “Thư viện JavaScript” để
tải mã nguồn về.

- Làm bảng quảng cáo

Với vài cách thể hiện (cuộn hình từ trái sang, từ trên xuống, đan lưới các ô vuông, vv...) và kết hợp chúng cùng
nhau, bạn đã có đoạn mã JavaScript ngắn nhưng “đủ xài” để làm “banner” quảng cáo. Những hình ảnh sinh động
này luôn tăng sự hấp dẫn cho trang web, đồng thời bạn cũng có thể gởi thêm thơng tin cho người lướt web.

- Thần tình yêu trên... trang web của bạn

Nhiều hình ảnh của vị thần tình yêu sẽ bay... lơ lửng trên trang web của bạn. Tuy nhiên bạn có thể thay đổi số
lượng hình ảnh, tốc độ di chuyển hình,vv... thật dễ dàng ( chương trình có chú thích chi tiết các thơng số ). Kỹ
thuật di chuyển ảnh dùng “layer” này cũng thường được sử dụng trong các minigame viết bằng Javascript trên
mạng, bạn thử tìm hiểu xem.

- Quảng cáo... mờ ảo

Bạn từng thấy các dòng quảng cáo khá bắt mắt trên những trang web? Thay vì phải dùng những phần mềm tạo
chữ “nhảy múa” 3D phức tạp (tất nhiên chất lượng hình ảnh cao hơn) và mất khá nhiều thời gian, bạn có thể sử
dụng những bộ lọc “có sẵn” trong Javascript. Đơn giản hơn nhiều mà hiệu quả cũng... được lắm!

- Ánh đèn sân khấu

Chú gà e-Chíp đang “hăm hở” dưới ánh đèn sân khấu... thật đẹp và hấp dẫn phải không bạn? Hiệu ứng đèn
“follow” chiếu theo từng vùng trên ảnh đích có thể sẽ làm ngạc nhiên và gây ấn tượng với những vị khách tham
quan website của bạn. Chương trình có thể tải về từ website e-Chíp mục “Thư viện Javascript”.

- Phóng to và thu nhỏ ảnh

Bạn chỉ cần rê chuột lên các mục “Phóng to”, “Bình thường”, hay “Thu nhỏ” để điều chỉnh kích cỡ ảnh. Thật thuận
tiện và đơn giản phải không bạn?

- Xoay hình

Nếu bạn đã thiết kế một logo cho mình và đặt lên trang web thì tại sao bạn khơng thử cho logo đó xoay ở một
góc màn hình nhỉ? Bạn có thể tải về và tìm hiểu đoạn chương trình tơi giới thiệu rồi cải tiến cho phù hợp với
trang web của bạn. Công đoạn sau cùng chỉ là... thay đổi logo mới thôi.

- Soi ảnh trên Web bằng... kính lúp

Xin giới thiệu với các bạn một “chiêu” hấp dẫn: dùng kính lúp soi ảnh trên web. Người lướt web dùng chuột để
“nắm” kính lúp và khi chuột di chuyển, kính lúp sẽ soi theo, phần ảnh phóng to tương ứng hiển thị gần bên. Đây
là một hiệu ứng rất độc đáo và công phu, mong là các bạn sẽ thích...

- Con trỏ chuột

Có rất nhiều các trang trí cho con trỏ chuột ( đồng hồ, chữ, hình ảnh xoay quanh, vv...) và độ sinh động của
chúng đối với người lướt web cũng rất khác nhau. Xin giới thiệu với các bạn một “chiêu” về con trỏ chuột khá hấp
dẫn: các quả bóng “dí” theo tọa độ chuột, đồng thời xoay vịng tạo ra những chuyển động rất đẹp mắt và hấp
dẫn.

- <b>Đổi màu cho thanh cuộn</b>

Bạn thích trang trí lại thanh cuộn với màu sắc bắt mắt hơn? Rất đơn giản, chỉ cần hơn 10 dịng lệnh JavaScript,
bạn có thể dễ dàng thay đổi màu sắc các thành phần trong thanh cuộn “made in tự tui” rồi.

</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>

Bạn đã biết cách gắn một dòng văn bản (text) vào “đi chuột”, bạn đã biết cách tạo dịng chữ chuyển động mô
phỏng không gian ba chiều (3D), sao bạn không thử kết hợp hai công đoạn này với nhau? Mời bạn ghé thăm
website e-Chíp mục “Thư viện JavaScript” để tải mã nguồn chương trình “Chữ xoay quanh chuột 3D” về xài thử.

- <b>Trang trí liên kết kiểu... Spider</b>

Xin giới thiệu cùng các bạn cách trang trí “kết hợp” giữa các liên kết và con trỏ chuột để tăng sự sinh động cho
website. Vị trí chuột sẽ là tâm điểm cho một loạt các đường kẻ tạo cảm giác lưới nhện, đồng thời khi bạn rê chuột
lên trên, “lưới nhện” và liên kết sẽ đổi màu giúp bạn dễ theo dõi. Bạn có thể tải chương trình nguồn từ website
e-Chíp mục thư viện JavaScript.

- <b>Máy tính nhiều chức năng</b>

Bạn có thể so sánh chức năng của chiếc máy tính JavaScript này với máy tính thơng thường và chắc hẳn bạn
sẽ ... hài lịng! Máy được thiết kế với nhiều “khuyến mãi” như: tính lũy thừa x^y, giai thừa, vv… Các chức năng
này được phân thành năm nhóm và thay đổi bằng cách nhấp chuột vào nút “More Options”.

- <b>Dịng chú thích cho các liên kết</b>

Các liên kết đôi khi không diễn tả được hết ý nghĩa và đôi khi người lướt web phải mất thời gian để tìm hiểu. Bạn
có thể “giải quyết” đơn giản bằng cách thêm dịng chú thích vào các liên kết, đoạn văn bản này chỉ hiện ra khi
người lướt web rê chuột lên bên trên. Trong dịng chú thích bạn mơ tả rõ hơn nội dung mà liên kết trỏ đến.

- <b>Con trỏ chuột... hình trái tim</b>

Ngày lễ Tình nhân 14-02 vừa qua rồi, nếu khơng bạn có thể làm một trang web để tỏ tình với nàng và chọn con
trỏ chuột hình trái tim này thì thật … là hết ý! Mời bạn vào website e-Chíp để tải về đoạn JavaScript cùng các
hình ảnh “minh họa”.

- <b>Cửa sổ sống động</b>

Thường trên các website ln có liên kết “Contact” để liên lạc với “chủ nhân” , xin giới thiệu cùng các bạn chiêu
“bung cửa sổ” để trang web có phần sinh động, lôi cuốn hơn. Khi bạn nhấp chuột vào liên kết “Contact”, một cửa
sổ mới sẽ hiện ra, mở rộng chiều dọc và sau đó là chiều ngang đến tối đa.

- <b>Đồng hồ 3D:</b>

Đồng hồ 3 chiều xoay "tá lả" trong website, thật ấn tượng phải không bạn! Thêm 1 kiểu thể hiện website của bạn
bằng cách kết hợp Applet vào trang web.

- <b>Chạy chữ Karaoke:</b>

Nếu đã từng vọc Web và JavaScript, có thể bạn đã từng nghe nhạc... online. Xin giới thiệu cùng các bạn một cách
chạy chữ trên Web trơng như Karaoke vậy, dù chỉ là phần hình ảnh! Sao các bạn không thử kết hợp phần tiếng
(nhạc) và phần hình (chạy chữ) ? biết đâu chúng ta lại có một bản Karaoke hồn chỉnh?

- <b>Menu... nhúc nhích:</b>

Trình đơn là phần khơng thể thiếu trong những website có thật nhiều các thơng tin. Đoạn JavaScript trên website
e-Chíp sẽ giới thiệu với các bạn trình đơn biết “nhúc nhích” liên tục, và đổi cách thể hiện liên kết khi bạn trỏ
chuột về phía nó.

- <b>Kết hợp các trang tìm kiếm:</b>

Đơi khi bạn muốn thêm phần tìm kiếm vào website của mình, nhưng thật khó khăn để có thể xây dựng một cơng
cụ tìm kiếm (search engine). Nếu muốn, bạn có thể “nhờ” các trang tìm kiếm nổi tiếng như Yahoo!, Infoseek,
vv... “ra tay nghĩa hiệp”. Để biết cách kết nối, mời bạn vào thăm website e-Chíp mục JavaScript để tải chương
trình về.

- <b>Bắn pháo hoa:</b>

“Bắn pháo hoa” là tiết mục rất hấp dẫn và đẹp mắt, sao bạn khơng thử lấy chương trình này về “vọc” thử. Bạn
có thể thay đổi các thơng số để có những tốc độ bắn, loại “pháo” khác nhau, v.v...

- <b>Menu đa tầng</b>

</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

trong trình đơn, vấn đề là phải sắp xếp cho hợp lý.

- <b>Menu xoay</b>

Xin giới thiệu cùng các bạn một “chiêu” khác cũng về cách trình bày menu trên trang web, đó là trình đơn xoay.
Người dùng có thể nhấp chuột vào hai nút mũi tên để thay đổi (xoay) trình đơn. Ưu điểm của loại trình đơn này là

tính hấp dẫn, lạ mắt. Bạn nên dùng loại trình đơn này nếu như website của bạn . . . còn dư chỗ.

- <b>“Hồi đó” mình sinh vào ngày thứ mấy nhỉ?</b>

Có bao giờ bạn “théc méc” rằng “hồi đó” mình sinh vào ngày thứ mấy trong tuần khơng? Có thể bạn sẽ dùng mợt
chương trình “lịch vạn niên” để xem lại chẳng hạn, nhưng xem ra chỉ cần một đoạn JavaScript nhỏ là bạn đã giải
quyết được vấn đề rồi. Mời bạn ghé thăm website e-chíp mục JavaScript để lấy chương trình về... xài thử.

- <b>Cḥt rượt... Gà</b>

Chụn chú mèo vờn chú cḥt chắc là ai cũng biết, cịn chụn chú cḥt “dí” gà con là chụn mới đây thơi.
Muốn tìm hiểu mời các bạn ghé thăm website e-Chíp mục JavaScript để tải về. Mỗi lần bạn di chuyển chuột đến
gần gà con là gà con “biến” ngay. Hiện tại chương trình chỉ xác định mợt cờ nhớ để điều khiển 3 vị trí cho gà con.
Nếu có thể bạn sửa chương trình để tọa đợ gà con là ngẫu nhiên sẽ hấp dẫn hơn.

- <b>Tô sáng liên kết và chú thích</b>

Trên trang web thơng thường có rất nhiều các liên kết đến những địa chỉ có nội dung liên quan, hỗ trơ... Việc tô
sáng các liên kết khi người duyệt web rê chuột bên trên trở nên phổ biến. Tuy nhiên có mợt số các liên kết cần
được chú thích cho rõ ràng hơn. Xin giới thiệu cùng các bạn một hiệu ứng: tô sáng hình ảnh (có gắn liên kết)
đồng thời hiện dịng chú thích kế bên khi người dụt web trỏ cḥt đến. Dịng chú thích sẽ hiện ra trong mợt
khoảng thời gian sau đó từ từ mất đi (fade out).

- <b>Lời chào hỏi thú vị</b>

Những dòng chữ sẽ bay ra màn hình như mợt màn trình diễn đồ họa tuyệt đẹp. Trên trang web có hướng dẫn chi
tiết và mã nguồn, bạn có thể tìm hiểu và thay đổi nợi dung cho thích hợp với website của mình hơn.

- <b>Bắn chữ</b>

Dòng chữ “Echip – Tin học như cơm bình dân” sẽ được “bắn xối xả” lên góc trên - trái màn hình. Chương trình
cũng đơn giản thơi, các bạn sẽ rất dễ dàng khi tìm hiểu mã nguồn để thay đổi các tham số.

- <b>Dòng chữ vui nhộn</b>

Một “banner” quảng cáo rất sống động và ấn tượng, bảo đảm trang Web của bạn sẽ làm các vị khách “hết hồn”
khi ghé thăm. Dòng chữ sẽ được xuất hiện theo hình làn sóng nhấp nhơ rất đẹp. Bạn có thể thay đổi nợi dung
phần văn bản thể hiện trong câu lệnh var theText = "Tin Hoc Nhu Com Binh Dan".

- <b>e-Chíp... bay vào khơng gian</b>

Những ký tự lần lượt bay vào mợt khơng gian bí ẩn và vô tận tương tự như một screen saver của Windows, một
hiệu ứng thật đẹp phải không bạn? Ở góc đợ lập trình, bạn cũng có thể xem đó là quá trình “vẽ nhỏ dần những ký
tự với tọa độ hướng tâm”. Các bạn tải mã nguồn từ Website của e-Chíp và chèn đoạn mã này sau thẻ :

- <b>Tơ sáng liên kết (bằng hình ảnh)</b>

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>

- <b>Chiếc đồng hồ thần kỳ</b>

Trong khi lướt Net, chat với bạn bè, nhiều lúc bạn cũng cần biết múi giờ các nước để cịn “tham khảo”. Trong
Windows cũng có một đồng hồ vạn năng như thế, thậm chí cịn “xịn” hơn nhiều. Tuy nhiên nếu trên Website của
mình bạn có cài đặt một chiếc đồng hồ tương tự kể ra cũng lý thú lắm. Tôi xin gởi đến các bạn chưong trình
JavaScript hiển thị múi giờ năm châu lục, chương trình khá dài, tuy nhiên bạn có thể tìm hiểu và thay đổi giao
diện khá dễ dàng.

- <b>Pháo hoa trên trang Web</b>

Năm hết Tết dến, xin giới thiệu cùng bà con cô bác “tiểu xảo” bắn pháo hoa trên trang Web cho “dzui”. Gọi là
“tiểu xảo” vì có nhiều thuật giải và kiểu bắn rất đẹp và phức tạp, tuy nhiên cách đơn giản và dễ thực hiện lại là
cách... “tui” trình bày trên Website e-Chíp, xin mời mọi người tải về xem thử.

- <b>Mã nguồn của trang Web</b>

Nhiều trang Web cho phép bạn “lấy” mã nguồn thoải mải (thông qua chức năng View | Source của trình duyệt),
tuy nhiên một số trang khác lại “bế quan tỏa cảng” với mọi người. Nếu muốn cung cấp luôn mã nguồn (đặc biệt
là trong lĩnh vực đào tạo, giảng dạy), bạn có thể tạo liên kết cho mở thêm một cửa sổ để người lướt Web xem
source.

- <b>Dòng chữ lung linh</b>

Bộ lọc (filter) cho rất nhiều hiệu ứng đẹp khi bạn dùng JavaScript để hiển thị các đối tượng. Đoạn chương trình tơi
giới thiệu với các bạn làm cho dòng chữ lung linh nhảy múa từ nhẹ đến mạnh... Bạn có thể tải chương trình từ
Website của e-Chíp, và hãy thử chỉnh sửa các thông số để xem hiệu ứng thay đổi như thế nào nhé...

- <b>Hiệu ứng “đánh máy” trong hộp văn bản</b>

Những thông tin bạn muốn gởi đến người lướt Web sẽ lần lượt xuất hiện trong một hộp văn bản (textbox) như là
đang được đánh máy từng ký tự một. Hiệu ứng này thật đơn giản nhưng lại tăng vẻ sinh động của trang Web.
Nếu điều chỉnh co chữ, thay đổi màu sắc “chút xíu”, biết đâu bạn lại có được mợt bảng quảng cáo điện tử?

- <b>Chơi game trên Web</b>

Trị chơi hứng bóng có ḷt chơi đơn giản thôi: bạn di chuyển chuột (tương ứng tọa độ chuột, bốn thanh đỡ cũng
di chuyển theo) để hứng bóng, nếu bóng chạm các cạnh là bạn mất mợt bóng. Sau mợt số lần chạm, các ơ vng
sẽ đổi màu và biến mất, khi đó bạn … chiến thắng. Tuy nhiên, nếu mất hết bóng bạn sẽ thua.

Muốn đặt game này vào một liên kết trong trang Web, bạn thêm dịng sau:
Games Hứng Bóng

Chúc bạn thành cơng!

- <b>Cửa sổ “biết bay”</b>

Một cửa sổ hiện ra và … bay “tùm lum” trên trang Web. Ồ, bạn đừng ngạc nhiên! Cửa sổ này bay theo “quy
hoạch” đấy nhé, bạn có thể lập trình chỉnh sửa quỹ đạo bay của nó, cũng đơn giản thơi. Tuy nhiên, cơng dụng lớn
nhất của “chiêu” này chính là thu hút sự chú ý của người lướt Web. Bạn đưa những thông tin thật hấp dẫn vào
trong cửa sổ này và thế là xong.

- <b>Sắc màu cho... chú chuột</b>

Để thêm phần sinh động cho Website, xin giới thiệu các bạn một chiêu: thêm màu sắc cho... chú chuột. Tiêu
điểm gặp nhau của ba dãy màu Red, Green, Blue chính là con trỏ cḥt. Bạn download chương trình từ Website
e-CHÍP, chọn View > Source (đối với trình duyệt Internet Explorer) để xem mã nguồn, sau đó chép đoạn mã này
rồi dán vào trang Web của mình. Bạn có thể tìm và thay thế màu sắc khác cho phù hợp với mình hơn, chúc các
bạn thành công!

- <b>Đồng hồ trên thanh tiêu đề</b>

</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

- <b>Đặt minigame vào trang Web</b>

Trên đường lướt Net, hẳn hơn một lần các bạn thấy những game nhỏ trên các Website rất hấp dẫn. Với “chút vốn
lận lưng” về JavaScript, bạn cũng có thể thực hiện khá nhiều việc, ngay cả xây dựng cho mình mợt trị chơi nho
nhỏ. Xin giới thiệu cùng các bạn ba trị chơi: đốn chữ (góp phần tăng cường khả năng tiếng Anh của bạn), máy
đo tình yêu (nhưng tui hổng dám đảm bảo nếu bạn bị người yêu “uýnh” đâu nghen?) và Carô 9 ô – tương tự trò
chơi TicTacToe.

- <b>Tạo chữ chạy trong nút lệnh</b>

Có nhiều cách để trang trí nút lệnh, mợt đối tượng xuất hiện rất nhiều trên các trang Web. Bạn có thể làm cho nó
đổ bóng, có hình dạng đặc biệt, vv.... Tôi xin giới thiệu với các bạn đoạn mã Java Script tạo mợt dịng chữ chạy

từ phải sang trái trong nút lệnh. Các bạn tải về ví dụ từ Website của e-Chíp. Để xem mã nguồn, các bạn chọn
trình đơn View > Source (đối với trình dụt Internet Explorer).

- <b>Tạo trình đơn cho cḥt phải</b>

Khi nhấp cḥt phải vào bất kỳ vị trí nào trong trang Web, bạn sẽ có ngay mợt trình đơn hiện ra chờ “phục vụ”.
Đoạn mã cần được dán vào sau thẻ , bạn có thể “thêm mắm dặm muối” để trình đơn thay đổi về màu sắc và
danh sách các liên kết.

- <b>"Nhấn nhá” các loại cho dòng văn bản</b>

Bạn hồn tồn có thể tạo “hào quang” các kiểu cho dịng văn bản thơng qua bợ lọc, các tham số được đưa vào
vịng lặp để có hiệu quả “đợng”. Ví dụ có thể tải về từ trang Web của e-CHÍP. Để xem mã nguồn, bạn chọn View
> Source từ trình đơn của Internet Explorer.

- <b>Tạo menu chuyển động</b>

</div>

<!--links-->
Ứng dụng công nghệ AJAx để xây dựng website thư viện điện tử trực tuyến

• 5
• 873
• 7