نحوه ساخت یک افکت تایپ ساده در جاوا اسکریپت

خرداد ۳م, ۱۳۹۰

گاهی اوقات لازمه که بعضی اوقات در صفحات وب از برخی تکنیکهاب خاصی استفاده بشه. در این مواقع اولین راهی که به ذهن اکثر طراح ها میرسه اینه که از یک کتابخانه و کدهای آماده استفاده کنن. اما زمانیکه فقط به یک قسمت ساده از کار احتیاج داریم عملا بارگذاری کل اسکریپت کتابخانه مورد نظر مثل jQuery کاملا بی مورد به نظر میرسه. در این مواقع به نظر پیاده سازی عملیات به صورت مستقل عاقلانه تر خواهد بود.  برای مثال کتابخانه های معروف معمولا هر کدوم به طور متوسط 25 کیلوبایت حجم دارن در حالی که یک تکه کد حد اکثر چیزی بین 3 تا 5 کیلوبایت حجم خواهند داشت.

اما اصل مطلب… افکت تایپ یکی از افکتهای جذاب و پرکاربرد جاوا اسکریپت هستش که میشه با یک کد ساده اون رو پیاده سازی کرد که من در ادامه توضیحات لازم رو دادم.

مرحله اول: ساختار HTML

ابتدا لازمه که ساختار HTML لازم برای کار رو بنویسیم که به صورت زیر هستش.

1
2
<span id="text"></span>
<span id="cur">_</span>

تگ اول برای نوشتن خود متن به کار میره و تگ دوم برای اضافه کردن یک نشانگر برای واقعی تر شدن کار هستش.

مرحله دوم: پیاده سازی جاوا اسکریپت

کد زیر لازم و کافیه که افکت تایپ ما کامل بشه.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type=’text/javascript’>
window.onload = function(){
var text = 'این یک متن ساده است.' // این متنی هست که قراره تایپ بشه.

var i =0;

var textCon = document.getElementById(‘text’); // این قسمت برای ایجاد یک میانبر به تگهای html هستش که از DOM استفاده شده

var cur = document.getElementById(‘cur’);

var timer = setInterval(function(){ // اینجا از تابع setInterval استفاده میکنیم که هر 150 میلی ثانیه کد ما اجرا بشه

textCon.innerHTML = textCon.innerHTML+text[i]; // در اینجا با هر بار فراخوانی یک کاراکتر از متن اصلی به نوشته اضافه میشه

if(i%2 == 0) cur.style.display=’none’; //این خط و خط پایینش هم برای چشمک زدن نشانگرمون هستش

else cur.style.display=’inline’;

i++;

if(i==text.length) {clearInterval(timer);cur.style.display=’none’;} //و در اینجا با کامل شدن متنمون تایمر رو از کار میندازیم.

},150);
}
</script>

نکته مهم اینه که حتما کد بالا بعد از تگهای html قرار بگیره.

نمونه کار رو میتونید اینجا ببینید.

پ.ن: این یک آموزش خلاصه هست برای اونایی که حداقل از اصول جاوا اسکریپت سر در میارن و اینکه هر سوالی هست در خدمتم.

| توسط حامد
| ۲ نظر
| html, برنامه نویسی, طراحی وب

2 پاسخ به نحوه ساخت یک افکت تایپ ساده در جاوا اسکریپت

  1. a.t.world مرداد ۴, ۱۳۹۰ at ۶:۱۵ ب.ظ | Permalink | پاسخ دادن

    ba salam
    man kheyli donbale in code bodam.faghat ye soal chetori mishe chanta matn ro be in code ezafe kard ta be tartib neshon bede?
    ba tashakor

  2. Goback آبان ۳, ۱۳۹۰ at ۶:۴۸ ب.ظ | Permalink | پاسخ دادن

    هو،
    سلام علیکم،
    مفید بود دوست عزیز،احسنت.
    یا حق ج