Hướng dẫn dùng một số Javascript

Khái niệm: Javascript là ngôn ngữ lập trình web tương tác với trình duyệt. javascript không ảnh hưởng đến web server cũng như không kết nối cơ sở dữ liệu.

Để học và lập trình ra một script ngon lành thì mất khá nhiều thời gian và hiển nhiên là khi bạn sử dụng thì mọi người đều có thể lấy nó và sử dụng vì nó là ngôn ngữ trình duyệt. Nên khuyên là học cách sử dụng và download về xài vì tất cả đều public trên mạng.

Sau đây tôi muốn chia sẽ với các bạn cách sử dụng một số javascript thông dụng:

Script đồng hồ( IE FF nghĩa là sử dụng được IE&FF).
Bước 1: Chép đoạn code dưới đây vào nơi mà bạn muốn hiện đồng hồ.

<!--
<script>
var dayarray=new Array("Chủ nhật","Thứ hai","Thứ ba","Thứ tư","Thứ năm","Thứ sáu","Thứ bảy");
var montharray=new Array("Tháng giêng","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 mười một","Tháng mười hai");
function getthedate(){
var mydate=new Date(); var year=mydate.getYear();
if (year < 1000) year+=1900
var day=mydate.getDay(); var month=mydate.getMonth(); var daym=mydate.getDate();
if (daym<10) daym="0"+daym; var hours=mydate.getHours(); var minutes=mydate.getMinutes() var seconds=mydate.getSeconds(); var dn="Sáng" if (hours>=12) dn="Chiều"; if (hours>12){ hours=hours-12 }
if (hours==0) hours=12; if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var cdate=dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
if (document.all) document.all.clock.innerHTML=cdate
else if (document.getElementById) document.getElementById("clock").innerHTML=cdate
else document.write(cdate)}
if (!document.all&&!document.getElementById) getthedate()
function goforit(){if (document.all||document.getElementById) setInterval("getthedate()",1000)}
</script>
<span id="clock"></span>
-->

Bước 2: Vào tag, gõ thêm để được hư sau.


Hiện ngày hôm nay:
Paste đoạn code sau vào nơi bạn muốn hiện trong trang html:

<!--
<script>
var mydate=new Date(); var year=mydate.getYear();
if (year < 1000) year+=1900;
var day=mydate.getDay(); var month=mydate.getMonth(); var daym=mydate.getDate();
if (daym<10) daym="0"+daym;
var dayarray=new Array("Chủ nhật","Thứ Hai","Thứ Ba","Thứ Tư","Thứ Năm","Thứ Sáu","Thứ Bảy");
var montharray=new Array("-1","-2","-3","-4","-5","-6","-7","-8","-9","-10","-11","-12");
document.write(""+dayarray[day]+", Ngày "+daym+" "+montharray[month]+"-"+year+"");
</script>
-->

SD Menu FF1+ IE5+ Opr7:
Đây là javascript tạo dùng để tạo menu cho site của bạn. Đây là menu đứng, 2 cấp. Nhắp vào 1 menu cấp1 sẽ xổ ra các menu con (cấp 2). Menu này có khả năng nhớ trình trạng đóng mở của các mục mà user đã dùng trong lần vào site trước (ghi cookie).

Sd Menu bcdonline.net

Bước 1: Download các file cần thiết (mình để link down ở cuối bài).
Bước 2: Mở trang html bạn định đưa menu vào rồi vào tag head, attach file css sdmenu.css
Bước 3: Tiếp tục nhắp trong tag head, chèn file javascript sdmenu.js
Bước 4: Nhắp dưới tag script mới xuất hiện, và Paste đoạn code sau vào:

<!--
<script type="text/javascript">// <![CDATA[ var myMenu;window.onload = function() {myMenu = new SDMenu("my_menu");myMenu.init();}; // ]]></script>
-->

Bước 5: Chép đoạn code sau và Paste vào nơi bạn muốn hiện menu:

<!--
<div style="float: left" id="my_menu" class="sdmenu">
<div>
        <span>Online Tools</span>
        <a href="#">Image Optimizer</a>
        <a href="#">FavIcon Generator</a>
        <a href="#">Email Riddler</a>
        <a href="#">Button Maker</a></div>
<div>
        <span>Support Us</span>
        <a href="#">Recommend Us</a>
        <a href="#">Link to Us</a>
        <a href="#">Web Resources</a></div>
<div class="collapsed">
        <span>Partners</span>
        <a href="#">JavaScript Kit</a>
        <a href="#">CodingForums</a>
        <a href="#">CSS Examples</a></div>
</div>
-->

Featured Content Slider v2.4: FF1+ IE5+ Opr7
Đây là javascript tạo hiệu ứng SlideSlow (trình diễn) tự động các thông tin trong trang web của bạn (ảnh, tin tức, sản phẩm). User có thể chọn thành phần muốn xem hoặc script sẽ chuyển tự động. Có hiệu ứng chuyển giữa các thành phần.

Bước 1: Download file ở cuối bài.
Bước 2: Chép đoạn code sau vào tag head trong file html của bạn

<!--
		<link rel="stylesheet" type="text/css" href="contentslider.css" />
<script type="text/javascript" src="contentslider.js">
</script>
-->

Bước 3: Chép đoạn code sau vào trong tag body, nơi bạn muốn hiệu ứng xuất hiện

<!--
<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
Content 1 Here.

<a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></div>
<div class="contentdiv">
Content 2 Here.</div>
<div class="contentdiv">
Content 3 Here.</div>
</div>
<div id="paginate-slider1" class="pagination"></div>
<script type="text/javascript">
featuredcontentslider.init({
	id: "slider1",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [true, 0.2],  //[true/false, fadedegree]
	autorotate: [true, 3000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})
</script>
-->

Ghi chú:

  • Các div chứa nội dung bạn muốn cuộn có class là contentdiv. Nội dung cuộn là các chữ màu xanh Bạn có thể thay đổi nội dung tùy ý.
  • Có thể thêm div contendiv mới.
  • Có thể sửa Previous, Next thành tiếng việt.

Kết luận: Sau đây là file liên quan đến bài viết và một số file javascipt thông dụng khác. Goodluck.
Downloads: Javascript Data

VN:F [1.9.22_1171]
Rating: 6.7/10 (7 votes cast)
Hướng dẫn dùng một số Javascript, 6.7 out of 10 based on 7 ratings
Chuyên mục: JavaScript & jQuery, Lập Trình
Tagged: , .

Một Comment

  1. quang

    Co hieu ung phao hoa khong ban?, Cho minh xin duoc khong? Cảm ơn!

Để lại comment của bạn