Các đoạn mã JavaScript hay

Liên hệ QC
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


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ổ




 
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


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




 
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


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




 
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


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




 
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


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




 
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


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ồ




 
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


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




 
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


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




 
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


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




 
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


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




 
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


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ồ




 
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


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




 
Bạn phải đăng nhập hoặc đăng ký để trả lời bài viết tại đây.
Web KT

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

dung09031989
Xin giúp công thức tô màu các ô phía sau khi kế hoạch đặt hàng thiếu so với tồn kho.?
Trả lời
3
Đọc
112
hoangtuaotrang_hp_vn
H
kimtanmap
  • Question
Nhờ viết code VBA Macro lập lại.
Trả lời
6
Đọc
190
kimtanmap
kimtanmap
P
Nhờ giúp đỡ hàm lọc dữ liệu theo tỉnh
Trả lời
8
Đọc
97
Hoàng Tuấn 868
H
PhanTuHuong
Bàn về môn thể thao bóng bàn nào!
    • Thích
    • Yêu thích
    • Cười
2
Trả lời
34
Đọc
2K
PhanTuHuong
PhanTuHuong
C
Chia sẻ: Kết quả xổ số Keno
    • Cười
    • Thích
Trả lời
11
Đọc
304
SA_DQ
SA_DQ
20050911
File Excel lỗi ''The file could not be accessed. Try one of the following:.."
Trả lời
4
Đọc
161
VetMini
V
ongke0711
  • Question
Trộn dữ liệu từ Excel sang Word mở rộng (phiên bản ongke0711)
    • Thích
    • Yêu thích
    • Cảm ơn
11 12 13
Trả lời
257
Đọc
25K
Pham Ha 233
Pham Ha 233
C
Công thức tự nhập liệu số lượng nhập khi bị âm
Trả lời
2
Đọc
120
cherry0187
C
N
Vẽ biểu đồ kết hợp nhiều yếu tố trong excel
Trả lời
4
Đọc
125
Ny Ny 2024
N
P
Tổng hợp dữ liệu từ các sheet theo chọn lọc
Trả lời
17
Đọc
327
phutdm
P
ongke0711
  • Question
Tải hóa đơn điện tử (https://hoadondientu.gdt.gov.vn/) Excel Vba
    • Thích
    • Yêu thích
11 12 13
Trả lời
251
Đọc
13K
ongke0711
ongke0711
N
Định mức nguyên vật liệu
Trả lời
1
Đọc
166
yeudoi
yeudoi
GPE-Trợ Lý
KHÓA HỌC BỨT PHÁ KỸ NĂNG EXCEL
    • Thích
Trả lời
1
Đọc
308
PhanTuHuong
PhanTuHuong
B
Định dạng condition formatting, đếm hỗn hợp dữ liệu merge và không merge
Trả lời
17
Đọc
203
batista911
B
Tuấn Bụng Bự
  • Question
Tìm Bộ 8 số xuất hiện nhiều nhất trong random( 1 - 80)
2
Trả lời
30
Đọc
717
huuthang_bd
huuthang_bd
H
Tính và sắp xếp theo thư tự tăng dần có điều kiệu (có dữ liệu trùng nhau)
Trả lời
1
Đọc
41
bebo021999
B
V
  • Question
Lấy dữ liệu lãi suất từ website Sbv.gov.vn bằng Power Query
Trả lời
1
Đọc
523
Minhhanhsgu
M
Nguyễn Duy Tuân
  • Question
Chia sẻ ControlForOffice - Bộ công cụ điều khiển Office/Excel
    • Thích
6 7 8
Trả lời
149
Đọc
95K
Nguyễn Duy Tuân
Nguyễn Duy Tuân
B
Lọc dữ liệu trùng, đếm số lần, tự tô màu theo điều kiện.
Trả lời
5
Đọc
153
batista911
B
T
Tối ưu hóa hàm lấy dữ liệu từ bảng Tổng sang bảng chi tiết
Trả lời
7
Đọc
248
Hoàng Tuấn 868
H
Xem thêm…

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

Back
Top Bottom