ایجاد پیام متحرک ۱
مقدمه
در این مقاله می خواهیم پیام متحرک ۱ را با جاوا اسکریپت بسازیم . فرض کنید که یک مستطیل داریم و یک پیام کلمه به کلمه یا حرف به حرف در آن نشان داده شود .
برای این که ببینید چه می خواهیم بسازیم مثال زیر را ببینید :
گام اول
در ایتدا تگ های اصلی html را می نویسیم :
کد 1.1
<html>
<head>
</head>
<body>
</body>
</html>
گام دوم
ابتدا درون قسمت body یک پاراگراف ایجاد می کنیم و id آن را برابر با para قرار می دهیم . و همچنین تگ <scrip> را در آنجا ایجاد کرده و می بندیم .
کد 2.1
<html>
<head>
</head>
<body>
<p id="para"></p>
<script>
</script>
</body>
</html>
گام سوم
در این گام می خواهیم برای پاراگراف ایجاد شده استایل تعریف کنیم تا بتوانیم به آن پاراگراف رنگ و لعاب بدهیم و خصوصیات ظاهری آن را با css تعیین کنیم .
پس یک تگ <style> را در قسمت head باز کرده و می بندیم و کدهای زیر را بین آنها اضاف می کنیم :
کد 3.1
<html>
<head>
<style>
1 #para{
2 position:absolute;
3 width:350px;
4 height:20px;
5 left:20px;
6 top:15px;
7 border:1px solid black;
8 direction:rtl;
}
</style>
</head>
<body>
<p id="para"></p>
<script>
</script>
</body>
</html>
تشریح کد ها : در خط ۱ پاراگراف را با آی دی آن گرفته ایم تا خصوصیات آن را تعیین کنیم .
در خط 2 خاصیت position را برابر با absolute قرار داده ایم . تا بتوانیم بدون توجه به هیچ شی دیگری مکان پاراگراف را تعیین کنیم .
در خط 3 عرض(width)پاراگراف را تعیین کرده ایم .
در خط ۴ ارتفاع(height) پاراگراف را تعیین کرده ایم .
در خط ۵ فاصله پاراگراف از سمت چپ صفحه (left) را تعیین کرده ایم .
در خط 6 فاصله از بالای صفحه را تعیین کرده ایم (top).
در خط ۷ خط دور مستطیل را تعیین کرده ایم . و مشخص کرده ایم که خط دور آن 1 پیکسل و از نوع ساده و با رنگ سیاه باشد .
در خط 8 تعیین کرده ایم که در پاراگراف ما متن ها راست چین باشند . rtl به معنی : right to left هست .
گام چهارم
در ادامه به سراغ کد های جاوا اسکریپت می رویم .تا کنون ما فقط یک مستطیل ساختیم که هیچ چیزی درون آن نیست . در ادامه می خواهیم بوسیله ی جاوا اسکریپت متن مورد نظر را درون آن پاراگراف نمایش بدهیم .
در ابتدا کدهای زیر را بین تگ <script> اضافه می کنیم :
کد 4.1
<html>
<head>
<style>
#para{
position:absolute;
width:350px;
height:20px;
left:20px;
top:15px;
border:1px solid black;
direction:rtl;
}
</style>
</head>
<body>
<p id="para"></p>
<script>
1 var text="بسم الله الرحمن الرحیم هست کلید در گنج حکیم"
2 var para=document.getElementById("para");
3 var b=text.split("");
4 var i=0;
5 var set=[];
6 set[0]="";
</script>
</body>
</html>
سیاست کلی ما برای نمایش متن درون این مستطیل این است که یک متن را به حروف آن تجزیه کنیم یا بشکنیم و سپس هر چند میلی ثانیه
یک بار یک حرف از متن را به یک عنصر یک آرایه اضاف کنیم و سپس آن متن درون آرایه را در پاراگراف نمایش دهیم .
بدین منظور : در خط یک یک متغیر به نام text را تعریف کرده ایم و متن مورد نظر را درون آن قرار داده ایم .
در خط ۲ یک متغیر دیگر به نام para ایجاد کرده ایم و به وسیله ی دستور getElementById پاراگراف مورد نظر که id آن برابر با para بود را گرفته ایم .
در خط ۳ یک متغیر دیگر به نام b ایجاد کرده ایم و آن را برابر با text.split("") قرار داده ایم . توجه کنید که دستور split("") در اینجا می آید و متن مورد نظر
را حرف به حرف تجزیه می کند و آنها را در یک آرایه قرار داده و برابر با b می کند . توجه کنید که اگر بین دبل کوتیشن ها یک فاصله قرار دهیم ،این دستور متن مورد نظر را کلمه به کلمه تجزیه می کند . پس b اکنون یک آرایه است یک تمام حروف متن مورد نظر ما را داراست . عنصر اول آن آرایه برابر با حرف اول متن ما است و در مورد دیگر عنصر ها نیز چنین ارتباطی هست .
در خط ۴ یک متغیر به نام i ایجاد کردیم و آن را برابر با صفر قرار دادیم . i شمارنده ی برنامه ما به حساب می آید .
در خط ۵ یک آرایه تعریف کرده ایم که نام آن set است . این آرایه همان آرایه ای است که قرار است متن مورد نطر را که می خواهیم نمایش دهیم در بر بگیرد .
در خط ۶ اندیس0 ام (اعنصر 1 ام) مجموعه set را برابر با یک متن خالی قرار دادیم . در اندیس 0ام این مجموعه متن مورد نظر ما قرار می گیرد .
گام پنجم
در این گام می خواهیم کدهای خود را کامل کنیم . پس در درون دستور setInterval ادامه کد ها را می نویسیم :
کد 5.1
<html>
<head>
<style>
#para{
position:absolute;
width:350px;
height:20px;
left:20px;
top:15px;
border:1px solid black;
direction:rtl;
}
</style>
</head>
<body>
<p id="para"></p>
<script>
var text="بسم الله الرحمن الرحیم هست کلید در گنج حکیم"
var para=document.getElementById("para");
var b=text.split("");
var i=0;
var set=[];
set[0]="";
1 setInterval(function(){
2 if(i<b.length){
3 set[0]+=b[i];
4 set[1]="_";
5 var c=set.join("");
6 para.innerHTML= c ;
7 i++;
8 }else{
9 i=0;
10 set[0]="";
11 }
12 },130);
</script>
</body>
</html>
تشریح کد ها : در خط ۱ از دستور setInterval استفاده کرده ایم . این دستور در درون خود یک تابع دارد که دستورات درون آن طی یک
زمان مشخص بر اساس میلی ثانیه اجرا می شوند . که در اینجا 130 میلی ثانیه است .
در خط ۳ تا 7 مجموعه دستورات اصلی ما وجود دارند . ما در خط ۲ یک دستور شرطی if قرار داده ایم دستور if مشخص می کند که
دستورات اصلی ما به تعداد اعضای مجموعه b اجرا شود . یعنی به تعداد حروف مورد نظر ما . b.lenght یعنی تعداد اعضای مجموعه b .
در خط ۳ به عنصر اول مجموعه set عنصر i ام مجموعه b را اضافه می کنیم . یعنی هر بار که این دستور اجرا شود حرف iام ما به
عنصر اول مجموعه set که یک رشته بود اضافه می شود .
در خط ۴ عنصر دوم مجموعه set را برابر با یک خط فاصله می کنیم . چون می خواهیم این خط فاصله در آخر جمله ی به نمایش در آمده
نشان داده شود .
در خط ۵ به وسیله ی دستور join("") عنصر اول و دوم مجموعه set را با هم الحاق می کنیم . یعنی جمله به دست آمده و همان خط فاصله را
و آن را در متغیری به نام c قرار می دهیم .
در خط 6 متن درون پاراگراف مورد نظر را برابر با c قرار می دهیم .
در خط ۷ به i یک واحد اضافه می کنیم . خب فرض کنید همین دستورات بار ها و بارها اجرا شوند آنوقت تمام حروف ما تمام می شود و i بزرگ
تر از تعداد حروف ما می شود . پس در این صورت (else) می خواهیم خطوط 9 و 10 اجرا شوند .
خط 9 و 10 در حقیقت جمله را صفر کرده و باعث می شوند جمله ی ما دوباره نوشته شود .
- نوشته شده توسط احسان عباسی
- بازدید: 16360
دیدگاه‌ها
این قسمت را میشه تشریح کنید
para.innerHTML= c ;
اگر هر دفعه که پارا برابر با c بشود و سی مقادیر مثلا(آ- ب - س - و...)را میگیرد باید اینا را نمایش بدهد
نباید بگیم که
para.innerHTML+ = c ;
یکم confuse شدم
با سلام.
در دستور اول مقدار c هر چی که باشه، جایگزین para میشه، ولی در دستور دوم مقدار c هر چی که باشه، به مقدار para اضافه میشه. تفاوت بین دو کمله‌ی «جایگزین» و «اضافه» هست.
ممنون؛کاملترشو با کمک و آموزش خوب شما ساختم و در سایت زیر ازش استفاده کردم
rondyab.ir