แสดงข้อความวิ่งที่ Status Bar จัดทำโดย : เว็บไทยดีดี พิมพ์
 แสดงข้อความวิ่งที่ Status Bar

บทความนี้ผมจะมาแนะนำการ Java Script ที่ทำให้ Status Bar มีข้อความวิ่งครับคิดว่าหลายๆ คนคงอยากรู้ว่าทำกันอย่างไร ไม่ยากครับ มาลองดูกันเลยนะครับ

ขั้นตอนการทำ

1. สร้างไฟล์ demo.html เพื่อใช้ในการทดสอบ Script นะครับ แล้ว copy code ด้านล่างนี้ เอาไว้ที่ tag <head> นะครับ

<script language="JavaScript" type="text/javascript">
<!-- Beginning of JavaScript Code--------->
function scroll_status (seed)
{
var msg = "พิมพ์ข้อความที่ต้องการให้แสดงที่นี่ครับ";
var out = " ";
var c = 1;
if (150 < seed) {
seed--;
var cmd="scroll_status(" + seed + ")";
timerTwo = window.setTimeout(cmd, 100);
}
else if (seed <= 150 && 0 < seed) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
var cmd="scroll_status(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scroll_status(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scroll_status(150)",100);
}
}
}
// -- End of JavaScript code -------------- -->
</SCRIPT>

หลังจาก copy code มาวางไว้ที่ tag <head> แล้วนะครับ จะต้องเหมือนกับ code ด้านล่างนะครับ

<html>
<head>

<script language="JavaScript" type="text/javascript">
<!-- Beginning of JavaScript Code--------->
function scroll_status (seed)
{
var msg = "^_^ ข้อความที่ต้องการให้แสดงที่นี่ครับ ขอให้สนุกกับการทำนะครับ^_^"; //ส่วนนี้จะเป็นข้อความที่คุณจะต้องให้แสดงผลที่ Status Bar นะครับ
var out = " ";
var c = 1;
if (150 < seed) {
seed--;
var cmd="scroll_status(" + seed + ")";
timerTwo = window.setTimeout(cmd, 100);
}
else if (seed <= 150 && 0 < seed) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
var cmd="scroll_status(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scroll_status(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scroll_status(150)",100);
}
}
}
// -- End of JavaScript code -------------- -->
</SCRIPT>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HV menu</title>
</head>

<body>
</body>
</html>

2. แล้ว Copy code นี้เอาไปไว้ใน tag <body> นะครับ

onLoad="timerONE=window.setTimeout('scroll_status(100)',50);"

หลังจาก copy code มาวางไว้ใน tag <body> แล้วนะครับ จะต้องเหมือนกับ code ด้านล่างนะครับ

<body onLoad="timerONE=window.setTimeout('scroll_status(100)',50);">

3. นี้ครับตัวอย่างที่สมบูรณ์ครับ

<html>
<head>

<script language="JavaScript" type="text/javascript">
<!-- Beginning of JavaScript Code--------->
function scroll_status (seed)
{
var msg = "^_^ ข้อความที่ต้องการให้แสดงที่นี่ครับ ขอให้สนุกกับการทำนะครับ^_^";
var out = " ";
var c = 1;
if (150 < seed) {
seed--;
var cmd="scroll_status(" + seed + ")";
timerTwo = window.setTimeout(cmd, 100);
}
else if (seed <= 150 && 0 < seed) {
for (c=0 ; c < seed ; c++) {
out+=" ";
}
out+=msg;
seed--;
var cmd="scroll_status(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
out+=msg.substring(-seed,msg.length);
seed--;
var cmd="scroll_status(" + seed + ")";
window.status=out;
timerTwo=window.setTimeout(cmd,100);
}
else {
window.status=" ";
timerTwo=window.setTimeout("scroll_status(150)",100);
}
}
}
// -- End of JavaScript code -------------- -->
</SCRIPT>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HV menu</title>
</head>

<body onLoad="timerONE=window.setTimeout('scroll_status(100)',50);">
</body>
</html>

คลิกดูตัวอย่าง

ข้อมูลจาก : http://www.codetukyang.com/java/

คุณอาจสนใจ
การกำหนดวัตถุหมุนรอบตัวเอง
Webmaster (79,350 - 04 มิ.ย. 49)
การสร้างแบบสอบถามโดยใช้ตัวช่วยสร้าง
Mr.N (29,495 - 02 มิ.ย. 50)
สแปมเมอร์รู้ว่าเปิดเมล์แล้ว
เว็บไทยดีดี (15,501 - 01 มี.ค. 51)
การสร้างพื้นผิวของลูกโลก (ตอนที่ 2)
อ.เล็ก (43,851 - 04 มิ.ย. 49)
การทำตาราง Rollover Table
Baddevil (28,223 - 26 พ.ย. 50)
การใช้งานคำสั่ง switch
Mr.GuruZ (27,725 - 03 มิ.ย. 49)
การใช้งานคำสั่ง Break
Mr.GuruZ (24,783 - 03 มิ.ย. 49)
สร้างหนังสือแบบ 3D ใน Photoshop
langjuko (123,549 - 26 ส.ค. 51)