البرمجة

تحديث قيمة بشكل ديناميكي في JavaScript

08/03/2024
4 دقيقة واحدة

لحل هذه المشكلة بشكل ديناميكي على صفحة الويب الخاصة بك، يمكنك استخدام JavaScript مع setInterval() لتحقيق ذلك. هناك عدة خطوات يمكن اتباعها لتحقيق الهدف:

  1. أنشئ متغير لتخزين القيمة الحالية للرقم.
  2. استخدم setInterval() لتكرار دالة تقوم بإضافة القيمة إلى نفسها كل ثانية.
  3. قم بتحديث القيمة على صفحة الويب بواسطة العنصر الذي تريد عرض القيمة فيه.

إليك كيف يمكن تنفيذها:

html
html>
<html>
<head>
    <title>Summing a number recursively and displaying ittitle>
    <script>
        let number = 0.001; // القيمة الأساسية
        let displayElement = document.getElementById("display"); // العنصر الذي يعرض القيمة

        setInterval(function() {
            number += 0.001; // إضافة 0.001
            displayElement.innerText = number.toFixed(3); // تحديث القيمة على الصفحة
        }, 1000); // تكرار كل ثانية
    script>
head>
<body>
    <p>Current value: <span id="display">0.001span>p>
body>
html>

يمكنك استبدال القيمة 0.001 بأي قيمة تريدها، وكذلك يمكنك تغيير الزمن الذي يتم فيه تحديث القيمة (الثانية في هذا الحالة).

المزيد من المعلومات

لتحقيق الهدف المحدد، يجب أن نأخذ في الاعتبار بعض النقاط الإضافية:

  1. عرض القيمة بدقة ثابتة: يمكن استخدام toFixed() لضبط عدد الأرقام العشرية التي يتم عرضها.

  2. إيقاف تشغيل العملية بعد مرور ساعة كاملة: يمكن استخدام clearInterval() لإيقاف تشغيل تكرار setInterval() بعد مرور الوقت المحدد.

  3. تحسين الأداء وتجنب الزيادة الزائدة في العمليات: بدلاً من إضافة 0.001 في كل دورة، يمكننا تخزين الزمن المنقضي منذ بدء العملية واستخدامه لحساب القيمة الحالية بشكل دقيق.

اليك كود JavaScript محسن:

html
html>
<html>
<head>
    <title>Summing a number recursively and displaying ittitle>
    <script>
        let startTime = new Date().getTime(); // الوقت الحالي
        let displayElement = document.getElementById("display"); // العنصر الذي يعرض القيمة

        function updateValue() {
            let currentTime = new Date().getTime(); // الوقت الحالي
            let elapsedTime = (currentTime - startTime) / 1000; // الزمن المنقضي بالثواني
            let number = (elapsedTime * 0.001).toFixed(3); // حساب القيمة

            displayElement.innerText = number; // عرض القيمة

            if (elapsedTime >= 3600) { // إيقاف التحديث بعد مرور ساعة كاملة
                clearInterval(interval);
            }
        }

        updateValue(); // تحديث القيمة للمرة الأولى

        let interval = setInterval(updateValue, 1000); // تحديث القيمة كل ثانية
    script>
head>
<body>
    <p>Current value: <span id="display">0.001span>p>
body>
html>

باستخدام هذا الكود، سيتم عرض قيمة تزايدية للرقم 0.001 كل ثانية على صفحتك، وسيتم إيقاف التحديث بعد مرور ساعة كاملة.

الوسوم
08/03/2024
4 دقيقة واحدة
جميع الحقوق محفوظة مركز حلول تكنولوجيا المعلومات
زر الذهاب إلى الأعلى