- Code:
-
Để sử dụng các đoạn mã dưới đây bạn hãy chuyển chế độ soạn thảo của FrontPage sang Code( Soạn thảo bằng mã HTML) . Sau đó Copy đoạn mã này và dán vào vị trí được hướng dẫn.
Hãy nhớ: Java Scrip thì đẹp nhưng thường làm chậm web của bạn. Trên trang này tôi đã áp dụng đoạn Java Scrip "Đồng hồ bay theo chuột"
Chú ý:
Nếu tôi không đề cập đến vị trí đặt mã thì tức là bạn có thể đặt bất cứ chỗ nào sau thẻ <body>.
Coi như các trang web bạn đã chọn bảng mã là UTF-8
Lên trên
Các mã JavaScript hay:
Nước chảy mây trôi
Thay thẻ <body> bằng đoạn mã sau. Với đoạn mã java scrip này nền web của bạn sẽ trôi từ trên xuống như mây bay, trông khá thú vị. Kết hợp với nền nhạc nữa là bạn đã có thể tạo ra cho mình một khung cảnh thiên nhiên kỳ thú rồi đấy!
<BODY background=http:/xaydungcauduong.net/xdcd3/bgmay.jpg>
<SCRIPT language=JavaScript>
<!--Background Scroller Script by http://web.good.to -->
<!-- Begin
var backgroundOffset = 0;
var bgObject = eval('document.body');
function scrollBG(maxSize) {
backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = "0 " + backgroundOffset;
}
var ScrollTimer = window.setInterval("scrollBG(307)", 64);
// End -->
</SCRIPT>
Đồng hồ bay theo chuột
<SCRIPT language=JavaScript>
//Đồng hồ bay theo chuột. Sưu tầm: http://you.good.to
dCol='red';//màu ngày.
fCol='#3333ff';//màu mặt.
sCol='Red';//màu kim giây.
mCol='#0033ff';//màu kim phút.
hCol='Black';//màu kim giờ.
ClockHeight=50; //chiều cao đồng hồ
ClockWidth=40; // chiều rộng đồng hồ
ClockFromMouseY=0;
ClockFromMouseX=100;
//Alter nothing below! Alignments will be lost!
d=new Array("CHỦ NHẬT","THỨ HAI","THỨ BA","THỨ TƯ","THỨ NĂM","THỨ SÁU","THỨ BẢY");
m=new Array( "THÁNG MỘT","THÁNG HAI ","THÁNG BA ","THÁNG TƯ ","THÁNG NĂM ","THÁNG SÁU ","THÁNG BẢY ","THÁNG TÁM ","THÁNG CHÍN","THÁNG MƯỜI ","THÁNG 11 ","THÁNG 12 ");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
</SCRIPT>
Hiệu ứng tuyết rơi
<SCRIPT language=JavaScript1.2>
<!-- Original: Altan (snow@altan.hr) -->
<!-- Web Site: http://www.altan.hr/snow -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin- hiệu ứng tuyết rơi - Sưu tầm và chỉnh sửa bởi http://xd603.good.to ; http://web.good.to
var no = 5; // Tốc độ tuyết rơi -
var speed = 50; // smaller number moves the snow faster
var snowflake = "http://xaydungcauduong.net/anh/sao.gif"; // tên file ảnh tuyết
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 200, doc_height = 800;
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[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
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() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End http://web.good.to-->
</SCRIPT>
[Cấm chuột phải:
Đoạn mã sau có tác dụng hiện lên hộp cảnh báo khi người khác click chuột phải lên web của bạn. Chèn trước thẻ </HEAD>
<SCRIPT language=JavaScript>
<!-- Original: MYsite (http://web.good.to) -->
<!-- Begin
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Welcome to my Web! Khong duoc Click chuot phai!");
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
// End -->
</SCRIPT>
Chữ chạy trong thanh trạng thái:
Xem mẫu tại Website http://xd603.good.to
<script language="JavaScript">
var speed = 10
var pause = 1500
var timerID = null
var bannerRunning = false
var ar = new Array()
ar[0] = "Chào mừng bạn đến với Website For You And For Me !"
ar[1] = "Chúng tôi là sinh viên XD Cầu đường - Trường ĐH DL HP"
ar[2] = "Bạn có thể truy cập vào hệ thống For You And For Me bằng nhiều địa chỉ hoặc từ các site thành viên. "
ar[3] = "Chúc các bạn một ngày vui vẻ!"
var message = 0
var state = ""
clearState()
function stopBanner() {
if (bannerRunning)
clearTimeout(timerID)
bannerRunning = false
}
function startBanner() {
stopBanner()
showBanner()
}
function clearState() {
state = ""
for (var i = 0; i < ar[message].length; ++i) {
state += "0"
}
}
function showBanner() {
if (getString()) {
message++
if (ar.length <= message)
message = 0
clearState()
timerID = setTimeout("showBanner()", pause)
bannerRunning = true
} else {
var str = ""
for (var j = 0; j < state.length; ++j) {
str += (state.charAt(j) == "1") ? ar[message].charAt(j) : " "
}
window.status = str
timerID = setTimeout("showBanner()", speed)
bannerRunning = true
}
}
function getString() {
var full = true
for (var j = 0; j < state.length; ++j) {
if (state.charAt(j) == 0)
full = false
}
if (full)
return true
while (1) {
var num = getRandom(ar[message].length)
if (state.charAt(num) == "0")
break
}
state = state.substring(0, num) + "1" + state.substring(num + 1, state.length)
return false
}
function getRandom(max) {
return Math.round((max - 1) * Math.random())
}
// ket thuc ma chu chay - http://you.good.to -->
</script>
ạo màu cho chuột:
Đoạn mã sau sẽ tạo 3 vệt màu chuyển động quanh chuột trông rất đẹp.
<script language="JavaScript">
//tao mau cho chuot --- http://web.good.to
var a_Colour="red";
var b_Colour="blue";
var c_Colour="green";
var Size=50;
var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0 ;step=0.03;
if (document.layers){
window.captureEvents(Event.MOUSEMOVE);
function nsMouse(evnt){
xpos = window.pageYOffset+evnt.pageX+6;
ypos = window.pageYOffset+evnt.pageY+16;
}
window.onMouseMove = nsMouse;
}
else if (document.all)
{
function ieMouse(){
xpos = document.body.scrollLeft+event.x+6;
ypos = document.body.scrollTop+event.y+16;
}
document.onmousemove = ieMouse;
}
function swirl(){
for (i = 0; i < 3; i++)
{
YDummy[i]=ypos+Size*Math.cos(ThisStep+i*2)*Math.sin((ThisStep)*6);
XDummy[i]=xpos+Size*Math.sin(ThisStep+i*2)*Math.sin((ThisStep)*6);
}
ThisStep+=step;
setTimeout('swirl()',10);
}
var amount=10;
if (document.layers){
for (i = 0; i < amount; i++)
{
document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2 +' bgcolor='+a_Colour+'></layer>');
document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2 +' bgcolor='+b_Colour+'></layer>');
document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2 +' bgcolor='+c_Colour+'></layer>');
}
}
else if (document.all){
document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'
+'<div id="IDiv" style="position:relative">');
for (i = 0; i < amount; i++)
{
document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2 +';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>');
document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2 +';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>');
document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2 +';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>');
}
document.write('</div></div>');
}
function prepos(){
var ntscp=document.layers;
var msie=document.all;
if (document.layers){
for (i = 0; i < amount; i++)
{
if (i < amount-1)
{
ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)]. left;
ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)]. left;
ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)]. left;
}
else
{
ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0];
ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1];
ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2];
}
}
}
else if (document.all){
for (i = 0; i < amount; i++)
{
if (i < amount-1)
{
msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style. left;
msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style. left;
msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style. left;
}
else
{
msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];
msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];
msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];
}
}
}
setTimeout("prepos()",10);
}
function Start(){
swirl(),prepos()
}
window.onload=Start;
</script>
Các mã HTML Hay:
Chiếu sáng liên kết:
Có mấy bạn gửi thư hỏi tôi về mã dùng để "làm đỏ" liên kết như trên trang chủ của For You And For Me . Câu trả lời như sau:
Đoạn mã sau sẽ cho bạn có một trang mà liên kết sẽ có mà đỏ khi chỉ chuột vào! [Ví dụ] . Bạn Đưa nó vào trong tag <head>:
<STYLE>A:link {
COLOR: blue; TEXT-DECORATION: none
}
A:visited {
COLOR: blue; TEXT-DECORATION: none
}
A:active {
COLOR: white; BACKGROUND-COLOR: red; TEXT-DECORATION: none
}
A:hover {
COLOR: white; TEXT-DECORATION: none
}
A:hover {
BACKGROUND-COLOR: red; TEXT-DECORATION: none
}
</STYLE>
Tạo ảnh nền dính:
Chữ sẽ dính vào nền. Ví dụ như ảnh nền cây tre trên trang này. Thay thẻ <body> bằng đoạn mã sau đây bạn sẽ có một nền web hoa đào tuyệt đẹp trong ngày xuân.
<body background=http://xaydungcauduong.net/anh/luoi.gif>
Lên trên
Tạo ảnh nền trượt:
Chữ sẽ trượt trên nền là hình ảnh của một vệ tinh bay trong vũ trụ trông rất ấn tượng. Nó hoạt động giống như ảnh nền trên trang chủ For You And For Me cũ
<BODY aLink=#339999 background=http://xaydungcauduong.net/anh/vetinh.jpg bgColor=black
bgProperties=fixed link=#3399cc text=#000000 vLink=#006699 >
Nhạc nền cho web.
Khi truy cập web mà nghe thấy nhạc quả thật là rất thú vị phải không? Nhiều bạn hỏi làm thế nào để trang chủ you.good.to và 12a7.good.to có thể đưa nhạc nền vào. Việc này rất đơn giản, bạn chỉ cần đặt thẻ sau vào trang web, sau tag <body>:
<bgsound src="http://xaydungcauduong.net/nhac/mattroibecon.mid" loop="1">
Trong đó loop="1" nghiã là chạy một lần. Bạn có thể cho chạy nhiều lần. Nếu muốn nhạc phát liên tục không dừng thì bạn cho "-1".
Lên trên
Thay đổi kiểu chuột:
Bạn có muốn thay đổi chuột của người truy cập Web theo ý bạn không? Hãy chèn đoạn mã sau vào trang web của bạn, con chuột của người truy cập sẽ biến thành con ngựa đang chạy, trông rất độc đáo! [Xem thêm các kiểu con trỏ chuột khác]
<STYLE>BODY { CURSOR: url('http://xaydungcauduong.net/anh/Cursor horse.ani') }
</STYLE>