Các đoạn mã JavaScript hay

JavaScriptBank.com · 3/12/09

Tự động tải lại trang web

Đoạn mã này sử dụng JavaScript để làm cho trình duyệt tự động tải lại nội dung của trang web sau mỗi 5 phú... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: Tự động tải lại trang web
| Refresh Page - Automatic

Cách cài đặt

Bước 1: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript

Mã:

<script type="text/javascript">
<!-- Begin
// Created by: Lee Underwood
function reFresh() {
  window.open(location.reload(true))
}
/* Set the number below to the amount of delay, in milliseconds,
you want between page reloads: 1 minute = 60000 milliseconds. */
window.setInterval("reFresh()",300000);
// End -->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Các hiệu ứng tương tự
- Điền dữ liệu tự động
- Cửa sổ popup tự động trượt
- Lấy địa chỉ của trang web refer
Bạn có thể xem thêm nhiều JavaScript khác về Trình duyệt và Cửa sổ

Code trình diễn ảnh - Các hiệu ứng chuột trong JavaScipt - Game tìm 2 hình giống nhau

JavaScriptBank.com · 8/12/09

Kiểm tra Email

Hiệu ứng sẽ kiểm tra xem chuỗi do người dùng nhập vào có đúng là một dạng thư điện tử hợp lệ kh... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Kiểm tra Email
| JavaScript Validate E-Mail

Cách cài đặt

Bước 1: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript

Mã:

<script language="javascript">
// Created by: Francis Cocharrua :: http://scripts.franciscocharrua.com/

function Validate_String(string, return_invalid_chars) {
  valid_chars = '1234567890-_.^~abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  invalid_chars = '';
  if(string == null || string == '')
     return(true);

  //For every character on the string.   
  for(index = 0; index < string.length; index++) {
    char = string.substr(index, 1);                        
     
    //Is it a valid character?
    if(valid_chars.indexOf(char) == -1) {
      //If not, is it already on the list of invalid characters?
      if(invalid_chars.indexOf(char) == -1) {
        //If it's not, add it.
        if(invalid_chars == '')
          invalid_chars += char;
        else
          invalid_chars += ', ' + char;
      }
    }
  }
            
  //If the string does not contain invalid characters, the function will return true.
  //If it does, it will either return false or a list of the invalid characters used
  //in the string, depending on the value of the second parameter.
  if(return_invalid_chars == true && invalid_chars != '') {
    last_comma = invalid_chars.lastIndexOf(',');
    if(last_comma != -1)
      invalid_chars = invalid_chars.substr(0, $last_comma) + 
      ' and ' + invalid_chars.substr(last_comma + 1, invalid_chars.length);
    return(invalid_chars);
    }
  else
    return(invalid_chars == ''); 
}


function Validate_Email_Address(email_address){
  // Modified and tested by Thai Cao Phong, JavaScriptBank.com
  //Assumes that valid email addresses consist of user_name@domain.tld
  
  at = email_address.indexOf('@');
  dot = email_address.indexOf('.');

  if(at == -1 || 
    dot == -1 || 
    dot <= at + 1 ||
    dot == 0 || 
    dot == email_address.length - 1)
  {
  	alert("Invalid email");
    return(false);
  }
     
  user_name = email_address.substr(0, at);
  domain_name = email_address.substr(at + 1, email_address.length);                  

  if(Validate_String(user_name) === false || Validate_String(domain_name) === false)
  {
  	alert("Invalid email");
    return(false);
  }

  alert("Valid email");//return(true);
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Bước 2: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML

Mã:

<form name=f>
<input type=text name=mail value="">
<input type=button value=Check onclick="Validate_Email_Address(document.f.mail.value)">
</form>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Đoạn mã tương tự
- 9 trình đơn định hướng dạng cây thư mục hữu ích
- Các trình biên tập web miễn phí và tốt nhất trên Linux
- Các trình đơn định hướng tốt nhất cho thiết kế dùng jQuery
Bạn có thể xem thêm nhiều JavaScript khác về Email

Tạo hiệu ứng ma trận - Hiệu ứng kéo thả trong javascript - Máy tính online

JavaScriptBank.com · 10/12/09

10 bộ đếm đến ngày Giáng sinh đẹp nhất

Chỉ còn vài ngày nữa là Nô-en sẽ đến, và nếu bạn vẫn còn đang tìm kiếm một bộ đếm cho ngày Giáng sinh trên trang web của mình thì tôi nghĩ đây là bài vi... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript 10 bộ đếm đến ngày Giáng sinh đẹp nhất
| JavaScript Top 10 Beautiful Christmas Countdown Timers

Cách cài đặt

Một vài nhãn tương tự: 10, bộ đếm, ngày Giáng sinh, đẹp nhất, Giáng sinh, Nô-en, hữu ích, danh sách, hiệu ứng bộ đếm, Flash, HTML + JavaScript, phiên bản thương mại
Bạn có thể xem thêm nhiều JavaScript khác về Bi vi?t

Trình chơi nhạc giao diện iPod
- JavaSript kiểm tra số điện thoại hợp lệ -

JavaScriptBank.com · 14/12/09

Biểu đồ đoạn thẳng

Hiệu ứng sẽ vẽ một biểu đồ đoạn thẳng với các số liệu do bạn qui định trước.... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Biểu đồ đoạn thẳng
| JavaScript Line Graph script

Cách cài đặt

Bước 1: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript

Mã:

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="line.js"></script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Bước 2: Đặt mã HTML bên dưới vào phần BODY
HTML

Mã:

<div id="lineCanvas" style="overflow: auto; position:relative;height:300px;width:400px;"></div>

<script type="text/javascript">
var g = new line_graph();
g.add('1', 145);
g.add('2', 0);
g.add('3', 175);
g.add('4', 130);
g.add('5', 150);
g.add('6', 175);
g.add('7', 205);
g.add('8', 125);
g.add('9', 125);
g.add('10', 135);
g.add('11', 125);

g.render("lineCanvas", "Line Graph");
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Bước 3: tải các file
Files
line.js
wz_jsgraphics.js

Hiệu ứng cùng chức năng
- Biểu đồ hình tròn
- Đồng hồ biểu đồ
- Cột biểu đồ
Bạn có thể xem thêm nhiều JavaScript khác về Đồ họa

Tìm các cặp hình giống nhau
- CD-Rom giáo trình SSDG về Web & Lập trình - Hiệu ứng di chuyển div bằng javascript

JavaScriptBank.com · 17/12/09

Tuyết rơi dùng hình ảnh

Đây là một đoạn mã khác để tạo cảnh tuyết rơi trên trang web bằng cách sử dụng hình ảnh làm các bông tuyết.... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Tuyết rơi dùng hình ảnh
| JavaScript Falling Snowflakes with images

Cách cài đặt

Bước 1: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript

Mã:

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
******************************************/
  
  //Configure below to change URL path to the snow image
  var snowsrc="snow3.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

	function iecompattest(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	}

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  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 (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"></a></div>");
      } else {
        document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
		doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    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();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

	function hidesnow(){
		if (window.snowtimer) clearTimeout(snowtimer)
		for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
	}
		

if (ie4up||ns6up){
    snowIE_NS6();
		if (hidesnowtime>0)
		setTimeout("hidesnow()", hidesnowtime*1000)
		}

</script>

Bước 2: các file cần tải
Files
snow3.gif

Đoạn mã tương tự
- Đồng hồ số dùng hình ảnh
- Tuyết rơi
- Tuyết rơi

Một vài nhãn tương tự: tuyết rơi, hình ảnh, bông tuyết
Bạn có thể xem thêm nhiều JavaScript khác về Multimedia và Sự kiện

Menu trượt ở đầu trang web - Code tuyết rơi - Hiệu ứng ảnh mờ ảo bằng JavaScript

JavaScriptBank.com · 24/12/09

Thời gian của thế giới

Hiệu ứng sẽ hiển thị thời gian của một số thành phố trên thế giới với cách thức khá lạ mắt. Hiệu ứng sẽ hiển thị giây ch... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Thời gian của thế giới
| JavaScript World clock with unique display

Cách cài đặt

Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS

Mã:

<STYLE>
.topcoverlay {
	BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 1000px
}
.bottomcoverlay {
	BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 1000px; LEFT: 0px; POSITION: absolute; TOP: 253px; WIDTH: 1000px
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Bước 2: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript

Mã:

<SCRIPT language=JavaScript>
<!-- Beginning of JavaScript -


var startpos=240
var bildhoehe=720
var step=3
var makepause=200
var difference=0
var local=1
var timer

function showtimelocal() {
	if (local==1) {
		var  thistime= new Date()
		var seconds=thistime.getSeconds()
		var minutes=thistime.getMinutes()
		var hours=thistime.getHours()
		if (hours>=24) {hours=hours-24}
		var secondspos=Math.floor(bildhoehe/60*seconds)
		var minutespos=Math.floor(bildhoehe/60*minutes)
		var hourspos=Math.floor(bildhoehe/60*hours)
		
		if(document.all) {
			document.all.secondsdiv.style.posTop=startpos-secondspos
			document.all.minutesdiv.style.posTop=startpos-minutespos
			document.all.hoursdiv.style.posTop=startpos-hourspos
		}
		
		if(document.layers) {
			document.secondsdiv.top=startpos-secondspos
			document.minutesdiv.top=startpos-minutespos
			document.hoursdiv.top=startpos-hourspos
		}
		var timer=setTimeout("showtimelocal()",makepause)
	}
	else {
		clearTimeout(timer)
	}
}

function preUTC(thisdifference) {
	clearTimeout(timer)
	difference=eval(thisdifference)
	local=0
	showtimeUTC()
}

function inititate() {
	if (document.layers) {
		document.markernetscape1.visibility="VISIBLE"
		document.markernetscape2.visibility="VISIBLE"
	}
	showtimelocal()
}

function prelocal() {
	if (document.layers) {document.markernetscape.visibility="VISIBLE"}
	clearTimeout(timer)
	local=1
	showtimelocal()
}

function showtimeUTC() {
	if (local==0) {
		var  thistime= new Date()
		var seconds=thistime.getSeconds()
		var minutes=thistime.getMinutes()
		var hours=thistime.getUTCHours()
		hours+=difference
		if (hours>=24) {hours=hours-24}
		var secondspos=Math.floor(bildhoehe/60*seconds)
		var minutespos=Math.floor(bildhoehe/60*minutes)
		var hourspos=Math.floor(bildhoehe/60*hours)
		
		if(document.all) {
			document.all.secondsdiv.style.posTop=startpos-secondspos
			document.all.minutesdiv.style.posTop=startpos-minutespos
			document.all.hoursdiv.style.posTop=startpos-hourspos
		}
		
		if(document.layers) {
			document.secondsdiv.top=startpos-secondspos
			document.minutesdiv.top=startpos-minutespos
			document.hoursdiv.top=startpos-hourspos
		}
		var timer=setTimeout("showtimeUTC()",makepause)
	}
	else {
		clearTimeout(timer)
	}
}

window.onload=inititate
// - End of JavaScript - -->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Bước 3: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML

Mã:

<DIV id=secondsdiv style="LEFT: 200px; POSITION: absolute; TOP: 240px">
  <IMG 
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=minutesdiv style="LEFT: 180px; POSITION: absolute">
  <IMG 
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=hoursdiv style="LEFT: 160px; POSITION: absolute; TOP: 240px">
  <IMG 
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV class=topcoverlay id=topcover></DIV>
<DIV class=bottomcoverlay id=bottomcover></DIV>
<DIV id=limiter1 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 176px; POSITION: absolute; TOP: 241px">
	:</DIV>
<DIV id=limiter2 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 196px; POSITION: absolute; TOP: 241px">
	:</DIV>
<DIV id=markernetscape1 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 122px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG 
height=1 src="line2930.gif" width=20></DIV>
<DIV id=markernetscape2 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 230px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG 
height=1 src="js 46_files/line2930.gif" width=20></DIV>
<DIV id=timezones 
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 5px"><A 
href="#" 
onmouseover=prelocal()>&gt;&gt; local time</A><BR><A 
href="#" 
onmouseover="preUTC('-8')">Anchorage</A><BR><A 
href="#" 
onmouseover="preUTC('-11')">Auckland</A><BR><A 
href="#" 
onmouseover="preUTC('3')">Baghdad</A><BR><A 
href="#" 
onmouseover="preUTC('8')">Bejing</A><BR><A 
href="#" 
onmouseover="preUTC('-3')">Buenos Aires</A><BR><A 
href="#" 
onmouseover="preUTC('-6')">Denver</A><BR><A 
href="#" 
onmouseover="preUTC('8')">Hongkong</A><BR><A 
href="#" 
onmouseover="preUTC('-9')">Honolulu</A><BR><A 
href="#" 
onmouseover="preUTC('8')">Jakarta</A><BR><A 
href="#" 
onmouseover="preUTC('2')">Johannesburg</A><BR><A 
href="#" 
onmouseover="preUTC('2')">Kairo</A><BR><A 
href="#" 
onmouseover="preUTC('-5')">Lima</A><BR><A 
href="#" 
onmouseover="preUTC('1')">London</A><BR><A 
href="#" 
onmouseover="preUTC('-7')">Los Angeles</A><BR><A 
href="#" 
onmouseover="preUTC('4')">Moscow</A><BR><A 
href="#" 
onmouseover="preUTC('3')">Nairobi</A><BR><A 
href="#" 
onmouseover="preUTC('-4')">New York</A><BR><A 
href="#" 
onmouseover="preUTC('2')">Paris</A><BR><A 
href="#" 
onmouseover="preUTC('-2')">Rio</A><BR><A 
href="#" 
onmouseover="preUTC('10')">Sydney</A><BR><A 
href="#" 
onmouseover="preUTC('9')">Tokyo</A><BR></DIV>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Bước 4: tải các file
Files
rotaclock2930.gif

Các hiệu ứng tương tự
- Thời gian các nơi (so với Nhật)
- Chuyển trang với khoảng thời gian
- Thời gian ở trên trang web
Bạn có thể xem thêm nhiều JavaScript khác về Thời gian và Đồng hồ

Bảng đăng nhập - Cách tạo id động - Hiệu ứng phóng to thu nhỏ ảnh với javascript

JavaScriptBank.com · 28/12/09

Phóng to ảnh

Hiệu ứng giúp người dùng phóng to ảnh bằng một cú nhấn trái chuột và làm cho ảnh có kích thước bình thường trở lại bằng một... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Phóng to ảnh
| JavaScript Enlarge Image 2

Cách cài đặt

Bước 1: Đặt mã HTML bên dưới vào phần BODY
HTML

Mã:

<b>Single-click the image to enlarge it; double-click to make it small again.</b><br>

<img src="gif_logojsb2.gif" onclick="this.src='gif_logojsb2.gif';this.height=180;this.width=480" ondblclick="this.src='gif_logojsb2.gif';this.height=60;this.width=150">
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Các hiệu ứng tương tự
- MooTools: Thư viện JavaScript nhỏ gọn
- Chọn thông tin muốn xem dùng ảnh
- Xác nhận/Cảnh báo giống nhau
Bạn có thể xem thêm nhiều JavaScript khác về Hình ảnh

Pop up luôn nổi - Phân trang cho website - Popup luôn ở phía trên

JavaScriptBank.com · 31/12/09

Tin tức RSS bằng AJAX

Đoạn code kết hợp JavaScript, RSS và AJAX để nạp các nội dung tin tức trên trang web từ các nguồn khác.... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Tin tức RSS bằng AJAX
| JavaScript RSS AJAX Newsticker

Cách cài đặt

Bước 1: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript

Mã:

<script type="text/javascript" src="rssticker.js"></script>

Bước 2: Đặt mã HTML bên dưới vào phần BODY
HTML

Mã:

CNN:
<DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;">
<script type="text/javascript">
//rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 200)

</script>
</DIV>
<br><br><br>
Each ticker on the page can be invoked independently, for example:
<DIV style="HEIGHT: 100px; border-style: dotted; border-width: 1px; background-color: silver; text-align: left;">
<PRE><script type="text/javascript">
//rss_ticker(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
new rss_ticker("CNN", 60, "cnnbox", "cnnclass", 2000)
</script></PRE>

</DIV>

Bước 3: Tải các file bên dưới về
Files
rssticker.js

Hiệu ứng cùng chức năng
- Tin tức cuộn[ngang]
- Đọc tin tức dạng RSS
- Đọc tin tức dạng OPML

Một vài nhãn tương tự: tin tức, RSS, AJAX, nguồn, nạp
Bạn có thể xem thêm nhiều JavaScript khác về Ajax

Pop up luôn nổi - Phân trang cho website - Popup luôn ở phía trên

JavaScriptBank.com · 11/1/10

Soi website

Hiệu ứng cho ta cảm giác như đang xem website qua một vòng tròn trắng.... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Soi website
| JavaScript Spotlight

Cách cài đặt

Bước 1: Copy mã CSS bên dưới và dán vào khu vực HEAD trên trang web của bạn
CSS

Mã:

<style type="text/css">
<!--
body{
background-image : url('none') !important; 
}

#content{
background-color : #ffffff;
position : absolute;
top : 0px;
left : 0px;
padding : 10px;
visibility : hidden;
}

#light{
position : absolute;
top : 0px;
left : 0px;
overflow : hidden;
}
//-->
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Bước 2: Đặt mã HTML bên dưới vào phần BODY
HTML

Mã:

<script type="text/javascript" src="spotlight_part_1.js"></script>
<script type="text/javascript" src="spotlight_part_2.js"></script>
<div style="z-index: 110;"></div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Bước 3: tải các file
Files
spotlight_part_1.js
spotlight_part_2.js

spotlight.gif

Hiệu ứng cùng chức năng
- Khung gõ địa chỉ website
- Template của cũ website Nirvana
- Thêm và xóa trên website
Bạn có thể xem thêm nhiều JavaScript khác về Màu nền

Code trình diễn ảnh - Các hiệu ứng chuột trong JavaScipt - Game tìm 2 hình giống nhau

JavaScriptBank.com · 15/1/10

Chuột có ngôi sao bay quanh

Hiệu ứng tạo ra các đốm vàng bay quanh con trỏ chuột sau đó hội tụ tại một điểm. Một hiệu ứng JavaScript rất đẹp và hữu ích ... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Chuột có ngôi sao bay quanh
| JavaScript Dancing Animation Stars Cursor

Cách cài đặt

Bước 1: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript

Mã:

<script language="JavaScript">
<!--
/*
Dancing Stars cursor (Submitted by Kurt at kurt.grigg@virgin.net)
Modified and permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

if (document.all){
document.write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
for (xy=0;xy<7;xy++)
document.write('<div style="position:relative;width:3px;height:3px;background:#FFFF00;font-size:2px;visibility:visible"></div>')
document.write('</div>')
}

if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;

if (document.all)
{
  function MoveHandler(){
  Xpos = document.body.scrollLeft+event.x;
  Ypos = document.body.scrollTop+event.y;
  }
  document.onmousemove = MoveHandler; 
}

else if (document.layers)
{
  function xMoveHandler(evnt){
  Xpos = evnt.pageX;
  Ypos = evnt.pageY;
  }
  window.onMouseMove = xMoveHandler;
}



function animateLogo() {
if (document.all)
{
 yBase = window.document.body.offsetHeight/4;
 xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
 yBase = window.innerHeight/4 ;
 xBase = window.innerWidth/4;
}

if (document.all)
{
var totaldivs=document.all.starsDiv.all.length
 for ( i = 0 ; i < totaldivs ; i++ )
 {
var tempdiv=document.all.starsDiv.all[i].style
  tempdiv.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
  tempdiv.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
 }
}

else if (document.layers)
{
 for ( j = 0 ; j < 7 ; j++ ) 
 {
var templayer="a"+j
  document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
  document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
 }
}
currStep += step;
setTimeout("animateLogo()", 15);
}
animateLogo();
// -->
</script>

Bước 2: Đặt mã HTML bên dưới vào phần BODY
HTML

Mã:

<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>
<LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,3,3"></LAYER>

Bạn có thể xem các mã tương tự bên dưới
- Hệ thống đánh giá bằng ngôi sao
- Ngôi sao nổ
- Các ngôi sao bay

Một vài nhãn tương tự: ngôi sao, bay quanh, đốm vàng, con trỏ chuột, hội tụ, hữu ích, trang trí, hiệu ứng
Bạn có thể xem thêm nhiều JavaScript khác về Con trỏ và Di chuyển theo chuột

Bảng đăng nhập - Cách tạo id động - Hiệu ứng phóng to thu nhỏ ảnh với javascript

JavaScriptBank.com · 26/1/10

Thời gian một số thành phố

Hiệu ứng hiển thị giờ của một số thành phố lớn trên thế giới so với giờ hiện tại trên máy tính. Thời gian này được hiển thị trong các thẻ input.... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Thời gian một số thành phố
| JavaScript World Clock script

Cách cài đặt

Bước 1: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript

Mã:

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Emanuel Gavrilv (eltal@sprint.ca) -->

<!-- Begin
function GetTime() { 
var dt = new Date();
var def = dt.getTimezoneOffset()/60;
var gmt = (dt.getHours() + def);
document.clock.local.value = (IfZero(dt.getHours()) + ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds()));
var ending = ":" + IfZero(dt.getMinutes()) + ":" +  IfZero(dt.getSeconds());
var rome =check24(((gmt + 1) > 24) ? ((gmt + 1) - 24) : (gmt + 1));
document.clock.rome.value = (IfZero(rome) + ending);
var isr =check24(((gmt + 2) > 24) ? ((gmt + 2) - 24) : (gmt + 2));
document.clock.Israel.value = (IfZero(isr) + ending);
var msw =check24(((gmt + 3) > 24) ? ((gmt + 3) - 24) : (gmt + 3));
document.clock.msw.value = (IfZero(msw) + ending);
var baku =check24(((gmt + 4) > 24) ? ((gmt + 4) - 24) : (gmt + 4));
document.clock.baku.value = (IfZero(baku) + ending);
var del =check24(((gmt + 5) > 24) ? ((gmt + 5) - 24) : (gmt + 5));
document.clock.del.value = (IfZero(del) + ending);
var dh =check24(((gmt + 6) > 24) ? ((gmt + 6) - 24) : (gmt + 6));
document.clock.dh.value = (IfZero(dh) + ending);
var kok =check24(((gmt +7 ) > 24) ? ((gmt +7 ) - 24) : (gmt + 7));
document.clock.kok.value = (IfZero(kok) + ending);
var ho =check24(((gmt + 8) > 24) ? ((gmt + 8) - 24) : (gmt + 8));
document.clock.ho.value = (IfZero(ho) + ending);
var tky =check24(((gmt + 9) > 24) ? ((gmt + 9) - 24) : (gmt + 9));
document.clock.tky.value = (IfZero(tky) + ending);
var sdn =check24(((gmt + 10) > 24) ? ((gmt + 10) - 24) : (gmt + 10));
document.clock.sdn.value = (IfZero(sdn) + ending);
var mag =check24(((gmt + 11) > 24) ? ((gmt + 11) - 24) : (gmt + 11));
document.clock.mag.value = (IfZero(mag) + ending);
var wll =check24(((gmt + 12) > 24) ? ((gmt + 12) - 24) : (gmt + 12));
document.clock.wll.value = (IfZero(wll) + ending);

var _GMT =check24(((gmt) > 24) ? ((gmt) - 24) : (gmt));

document.clock._GMT.value = (IfZero(_GMT) + ":" + IfZero(dt.getMinutes()) + ":" + IfZero(dt.getSeconds()));
var eniw =check24(((gmt + (24-12)) > 24) ? ((gmt + (24-12)) - 24) : (gmt + (24-12)));
document.clock.eniw.value = (IfZero(eniw) + ending);
var sam =check24(((gmt + (24-11)) > 24) ? ((gmt + (24-11)) - 24) : (gmt + (24-11)));
document.clock.sam.value = (IfZero(sam) + ending);
var haw =check24(((gmt + (24-10)) > 24) ? ((gmt + (24-10)) - 24) : (gmt + (24-10)));
document.clock.Hawaii.value = (IfZero(haw) + ending);
var ala =check24(((gmt + (24-9)) > 24) ? ((gmt + (24-9)) - 24) : (gmt + (24-9)));
document.clock.alaska.value = (IfZero(ala) + ending);
var pacif =check24(((gmt + (24-8)) >= 24) ? ((gmt + (24-8)) - 24) : (gmt + (24-8)));
document.clock.pacif.value = (IfZero(pacif) + ending);
var mount =check24(((gmt + (24-7)) > 24) ? ((gmt + (24-7)) - 24) : (gmt + (24-7)));
document.clock.mount.value = (IfZero(mount) + ending);
var center =check24(((gmt + (24-6)) > 24) ? ((gmt + (24-6)) - 24) : (gmt + (24-6)));
document.clock.center.value = (IfZero(center) + ending);
var east =check24(((gmt + (24-5)) > 24) ? ((gmt + (24-5)) - 24) : (gmt + (24-5)));
document.clock.east.value = (IfZero(east) + ending);
var atl =check24(((gmt + (24-4)) > 24) ? ((gmt + (24-4)) - 24) : (gmt + (24-4)));
document.clock.atl.value = (IfZero(atl) + ending);
var bra =check24(((gmt + (24-3)) > 24) ? ((gmt + (24-3)) - 24) : (gmt + (24-3)));
bra = (bra >= 24) ? bra - 24 : bra;
document.clock.bra.value = (IfZero(bra) + ending);
var mid =check24(((gmt + (24-2)) > 24) ? ((gmt + (24-2)) - 24) : (gmt + (24-2)));
mid = (mid >= 24) ? mid - 24 : mid;
document.clock.mid.value = (IfZero(mid) + ending);
var azo =check24(((gmt + (24-1)) > 24) ? ((gmt + (24-1)) - 24) : (gmt + (24-1)));
azo = (azo >= 24) ? azo - 24 : azo;
document.clock.azo.value = (IfZero(azo) + ending);
setTimeout("GetTime()", 1000);
}
function IfZero(num) {
return ((num <= 9) ? ("0" + num) : num);
}
function check24(hour) {
return (hour >= 24) ? hour - 24 : hour;
}
//  End -->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Bước 2: Đặt mã HTML bên dưới vào phần BODY
HTML

Mã:

<BODY onLoad="javascript:GetTime();">
<form name="clock">
<strong>Local Time <input type="text" size="8" name="local"></strong>
<p>
Eniwetok (GMT-12)  <input type="text" size="8" name="eniw"><br>
Samoa (GMT-11)  <input type="text" size="8" name="sam"><br>
Hawaii (GMT-10)  <input type="text" size="8" name="Hawaii">
<p>
Alaska (GMT-9)  <input type="text" size="8" name="alaska"><br>
Pacific Time (GMT-8)  <input type="text" size="8" name="pacif"><br>
Mountain Time (GMT-7)  <input type="text" size="8" name="mount">

<p>
Central Time (GMT-6)  <input type="text" size="8" name="center"><br>
Eastern Time (GMT-5)  <input type="text" size="8" name="east"><br>
Atlantic Time (GMT-4)  <input type="text" size="8" name="atl">
<p>
Brazilia (GMT-3)  <input type="text" size="8" name="bra"><br>
Mid-Atlantic (GMT-2)  <input type="text" size="8" name="mid"><br>
Azores (GMT-1)  <input type="text" size="8" name="azo">
<p>
<strong>Greenwich Mean Time (GMT)  <input type="text" size="8" name="_GMT"></strong>

<p>
Rome (GMT +1)  <input type="text" size="8" name="rome"><br>
Israel (GMT +2)  <input type="text" size="8" name="Israel"><br>
Moscow (GMT +3)  <input type="text" size="8" name="msw">
<p>
Baku (GMT +4)  <input type="text" size="8" name="baku"><br>
New Delhi (GMT +5)  <input type="text" size="8" name="del"><br>
Dhakar (GMT +6)  <input type="text" size="8" name="dh">
<p>
Bangkok (GMT +7)  <input type="text" size="8" name="kok"><br>

Hong Kong (GMT +8)  <input type="text" size="8" name="ho"><br>
Tokyo (GMT +9)  <input type="text" size="8" name="tky">
<p>
Sydney (GMT +10)  <input type="text" size="8" name="sdn"><br>
Magadan (GMT +11)  <input type="text" size="8" name="mag"><br>
Wellington (GMT +12)  <input type="text" size="8" name="wll">
</form>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Các hiệu ứng tương tự
- Thời gian các nơi (so với Nhật)
- Chuyển trang với khoảng thời gian
- Thời gian ở trên trang web
Bạn có thể xem thêm nhiều JavaScript khác về Thời gian và Đồng hồ

Tạo menu luôn ở đầu trang - Tạo trình đơn động - Cách loại bỏ dấu tiếng Việt với JavaScript

JavaScriptBank.com · 28/1/10

Cửa sổ popup tự động trượt

Đoạn mã JavaScript này sẽ tạo một cửa sổ popup ngay bên trong trang web bằng cách sử dụng mộ... chi tiết tại JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Cửa sổ popup tự động trượt
| JavaScript DIV Layer Popup onClick

Cách cài đặt

Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS

Mã:

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
.jsbank_sample_cont {margin: 20px; padding: 20px;}
.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}
/*
Created by: Jeroen Haan 
Web Site: http://www.haan.net/ 

*/
#layer1 {
	position: absolute;
	visibility: hidden;
	width: 400px;
	height: 300px;
	left: 20px;
	top: 300px;
	background-color: #ccc;
	border: 1px solid #000;
	padding: 10px;
}

#close {
	float: right;
}
</style>

Bước 2: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript

Mã:

<SCRIPT type=text/javascript>
<!--
// Created by: Jeroen Haan :: http://www.haan.net/

/* -----------------------------------------------
   Floating layer - v.1
   (c) 2006 www.haan.net
   contact: jeroen@haan.net
   You may use this script but please leave the credits on top intact.
   Please inform us of any improvements made.
   When usefull we will add your credits.
  ------------------------------------------------ */

x = 20;
y = 70;
function setVisible(obj)
{
	obj = document.getElementById(obj);
	obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
}
function placeIt(obj)
{
	obj = document.getElementById(obj);
	if (document.documentElement)
	{
		theLeft = document.documentElement.scrollLeft;
		theTop = document.documentElement.scrollTop;
	}
	else if (document.body)
	{
		theLeft = document.body.scrollLeft;
		theTop = document.body.scrollTop;
	}
	theLeft += x;
	theTop += y;
	obj.style.left = theLeft + 'px' ;
	obj.style.top = theTop + 'px' ;
	setTimeout("placeIt('layer1')",500);
}
window.onscroll = setTimeout("placeIt('layer1')",500);
//-->
</SCRIPT>

Bước 3: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML

Mã:

<DIV id=layer1><SPAN id=close><A style="TEXT-DECORATION: none" 
href="javascript:setVisible('layer1')"><STRONG>Hide</STRONG></A></SPAN> 
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci.</P><BR><BR><IMG height=65 
src="../image/logojs.gif" width=120 border=0> </DIV>
<p>This link uses the onclick event handler.<br>
<a href="#" onclick="setVisible('layer1');return false" target="_self">Open popup</a></p>

<p>This next one uses the javascript link inside the href tag.<br>
<a href="javascript:setVisible('layer1',true)">Open popup</a></p>

<form>
And this one uses the input button inside a form tag.<br>
  <input type="button" value="Open popup" onclick="setVisible('layer1')">
</form>

<p>It can also be used in an image map. Here, the word 'Webhost' contains the link<br>
<img src="../image/logojs.gif" width="120" height="65" border="0" usemap="#Map">
  <map name="Map" id="Map">
    <area shape="rect" coords="1,1,113,23" href="#" onclick="setVisible('layer1');return false" target="_self">
  </map>

Hiệu ứng cùng chức năng
- Bộ chọn ngày với cửa sổ phụ
- Mở liên kết trong cửa sổ mới
- Mở liên kết trong các cửa sổ mới

Một vài nhãn tương tự: cửa sổ popup, cửa sổ, popup, tự động, trượt, layer, thanh cuộn, trình duyệt
Bạn có thể xem thêm nhiều JavaScript khác về Trình duyệt và Popup

Tạo hiệu ứng ma trận - Hiệu ứng kéo thả trong javascript - Máy tính online

Các đoạn mã JavaScript hay

JavaScriptBank.com

Thành viên mới

JavaScriptBank.com

Thành viên mới

JavaScriptBank.com

Thành viên mới

JavaScriptBank.com

Thành viên mới

JavaScriptBank.com

Thành viên mới

JavaScriptBank.com

Thành viên mới

JavaScriptBank.com

Thành viên mới

JavaScriptBank.com

Thành viên mới

JavaScriptBank.com

Thành viên mới

JavaScriptBank.com

Thành viên mới

JavaScriptBank.com

Thành viên mới

JavaScriptBank.com

Thành viên mới

Bài viết mới nhất

Facebook

Group

Thành viên có số lượng bài viết cao nhất tháng

Thành viên có điểm tương tác cao nhất tháng