امروز: 1405/03/18 ساعت : 22:45
  • ابزار وبمستر
  • مجموعه‌ای از ۲۰ کد جاوا اسکریپت مفید و کاربردی مخصوص وبلاگ‌ها

    جاوا اسکریپت یکی از مهم‌ترین ابزارها برای افزایش تعامل، بهبود تجربه کاربری و حرفه‌ای‌تر کردن وبلاگ‌هاست. در این مقاله از سایت غلغله، مجموعه‌ای از ۲۰ کد جاوا اسکریپت مفید و کاربردی مخصوص وبلاگ‌ها را معرفی می‌کنیم که می‌توانید به‌راحتی در وبلاگ‌های شخصی، خبری یا آموزشی استفاده کنید.

    1. دکمه بازگشت به بالای صفحه

    <button id=“topBtn”>▲</button>
    <script>
    const btn = document.getElementById(‘topBtn’);
    window.onscroll = () => {
    btn.style.display = window.scrollY > 200 ? ‘block’ : ‘none’;
    };
    btn.onclick = () => window.scrollTo({ top0behavior‘smooth’ });
    </script>

    2. نمایش سال جاری به‌صورت خودکار

    <span id=“year”></span>
    <script>
    document.getElementById(‘year’).textContent = new Date().getFullYear();
    </script>

    3. هشدار خوش‌آمدگویی

    <script>
    alert(‘به وبلاگ غلغله خوش آمدید 🌸’);
    </script>

    4. جلوگیری از کلیک راست

    <script>
    document.addEventListener(‘contextmenu’e => e.preventDefault());
    </script>

    5. شمارنده بازدید ساده (Local)

    <span id=“count”></span>
    <script>
    let c = localStorage.getItem(‘visit’) || 0;
    c++;
    localStorage.setItem(‘visit’c);
    document.getElementById(‘count’).textContent = c;
    </script>

    6. حالت تاریک (Dark Mode)

    <button onclick=dark()>🌙</button>
    <script>
    function dark(){
    document.body.classList.toggle(‘dark’);
    }
    </script>

    7. لود تنبل تصاویر (Lazy Load)

    <script>
    document.querySelectorAll(‘img’).forEach(img => {
    img.loading = ‘lazy’;
    });
    </script>

    8. کپی خودکار متن

    <script>
    function copyText(txt){
    navigator.clipboard.writeText(txt);
    alert(‘کپی شد’);
    }
    </script>

    9. شمارش تعداد کلمات متن

    <script>
    function countWords(text){
    return text.trim().split(/\s+/).length;
    }
    </script>

    10. جلوگیری از انتخاب متن

    <script>
    document.body.style.userSelect = ‘none’;
    </script>

    11. نمایش پیام بعد از چند ثانیه

    <script>
    setTimeout(() => {
    alert(‘مقاله رو تا آخر بخون 😊’);
    }, 5000);
    </script>

    12. تشخیص دستگاه موبایل

    <script>
    if (/Mobi|Android/i.test(navigator.userAgent)) {
    alert(‘شما با موبایل وارد شدید’);
    }
    </script>

    13. تغییر عنوان صفحه هنگام خروج

    <script>
    let title = document.title;
    window.onblur = () => document.title = ‘برگرد 😢’;
    window.onfocus = () => document.title = title;
    </script>

    14. نمایش درصد اسکرول صفحه

    <script>
    window.addEventListener(‘scroll’, () => {
    let h = document.documentElement;
    let percent = Math.round((h.scrollTop / (h.scrollHeight – h.clientHeight)) * 100);
    console.log(percent + ‘%’);
    });
    </script>

    15. تایمر شمارش معکوس

    <script>
    let time = 10;
    let timer = setInterval(() => {
    console.log(time–);
    if(time < 0clearInterval(timer);
    }, 1000);
    </script>

    16. نمایش پیام آنلاین / آفلاین

    <script>
    window.addEventListener(‘online’, () => alert(‘آنلاین شدید’));
    window.addEventListener(‘offline’, () => alert(‘اینترنت قطع شد’));
    </script>

    17. جلوگیری از ارسال فرم خالی

    <script>
    function check(){
    let i = document.querySelector(‘input’).value;
    if(i === ){
    alert(‘فیلد خالی است’);
    return false;
    }
    }
    </script>

    18. تغییر رنگ پس‌زمینه تصادفی

    <script>
    function randomBg(){
    document.body.style.background = `#${Math.floor(Math.random()*16777215).toString(16)}`;
    }
    </script>

    19. ذخیره تنظیمات کاربر

    <script>
    localStorage.setItem(‘theme’,‘dark’);
    </script>

    20. نمایش تاریخ شمسی (ساده)

    <script>
    document.write(new Date().toLocaleDateString(‘fa-IR’));
    </script>

     

    مطالعه کنید:  دانلود فونت لاتین evanescent با لینک مستقیم و رایگان

    ✨ جمع‌بندی غلغله

    این ۲۰ کد جاوا اسکریپت کاربردی می‌توانند وبلاگ شما را تعاملی‌تر، حرفه‌ای‌تر و جذاب‌تر کنند. بسته به نوع وبلاگ (خبری، آموزشی یا شخصی) می‌توانید از این کدها استفاده یا آن‌ها را توسعه دهید.

    برای آموزش‌ها و کدهای کاربردی بیشتر، همراه غلغله باشید 🚀

    اشکان صارمی

    زندگی کوتاه تر از اونه که غصه بخوری

    ثبت دیدگاه

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *