كود سكريبت

Ikram Ikram4 · 17 أغسطس 2023

سلام عليكم...أريد كود سكريبت لما يأتي الزائر للموقع يضغط على بانر اعلاني ثم يظهر بعدها box reward ليحصل على مكافأة.....اتمنى المساعدة منكم

عبدالباسط ابراهيم · 17 أغسطس 2023

يمكنك تنفيذ ذلك بالخطوات التالية:

إضافة بانر إعلاني في الصفحة مع إعطائه id مثلا banner-ad

<div id="banner-ad">
   <!-- محتوى الإعلان -->
</div>

ثم إضافة div مخفي للمكافأة مع إعطائه id مثلا reward-box

<div id="reward-box" style="display:none;">
  <!-- محتوى صندوق المكافأة -->  
</div>

إضافة الكود التالي في script tag:

<script>
  let banner = document.getElementById("banner-ad");
  let rewardBox = document.getElementById("reward-box");
  banner.addEventListener("click",function(){
    rewardBox.style.display = "block"; 
  });
</script>

بهذا عند النقر على البانر الإعلاني سيظهر الـ reward box.

يمكنك تعديل الكود ليتناسب مع إحتياجاتك.

Mustafa Suleiman · 17 أغسطس 2023

ستحتاج إلى الإعتماد على عناصر HTML ثم كتابة كود برمجي من خلال جافاسكريبت لتوفير المكافأة التي تريدها مثل كود خصم أو ما شابه أو حسب ما تريد أو نقاط تضاف للمستخدم في حسابه مثلاً ولكن ذلك يشترط كتابة كود في الواجهة الخلفية.

والمثال التالي خاص بالواجهة الأمامية فقط:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>Reward Box</title>
</head>
<body>
  <div class="banner-ad">
    <img src="banner.png" alt="Banner Ad">
  </div>

  <script>
  // هذه الدالة تُنشئ مربع مكافأة جديدًا عند النقر على إعلان البانر.
  function showRewardBox() {
    // ننشئ كائن مربع مكافأة جديدًا.
    const rewardBox = document.createElement('div');
    // نُعين اسم فئة مربع المكافأة.
    rewardBox.className = 'reward-box';

    // نضيف بعض النص إلى مربع المكافأة.
    rewardBox.innerHTML = 'تهانينا! لقد ربحت مكافأة.';

    // نضيف مربع المكافأة إلى الصفحة.
    document.body.appendChild(rewardBox);
  }

  // نضيف مستمعًا للحدث إلى إعلان البانر.
  document.querySelector('.banner-ad').addEventListener('click', showRewardBox);
  </script>
</body>
</html>

Thaer Alhabbash · 19 أغسطس 2023

يجب عليك بالبداية تصميم البانر الاعلاني , و تصميم المكافئة , ومن ثم من خلال ال css قم بإخفاء المكافئة.
يجب بعدها استخدام الجافا سكربت لاضافة حدث الضغط على البانر الاعلاني لاظهار المكافئة , الكود التالي يلبي طلبك:

<!DOCTYPE html>
 <html> 
 <head> 
   <title>مكافأة الزائر</title> 
   <style>
     .banner {
       width: 300px;
       height: 150px;
       background-color: #f2f2f2;
       text-align: center; 
       line-height: 150px; 
       cursor: pointer;
     } 
     .reward-box { 
       display: none; 
       width: 200px;
       height: 100px; 
       background-color: #e0ffe0;
       text-align: center;
       line-height: 100px; 
       position: absolute; 
       top: 50%; 
       left: 50%;
       transform: translate(-50%, -50%);
     }
   </style> 
   </head> 
   <body>
     <div class="banner" id="banner"> انقر هنا للحصول على مكافأة! </div> 
     <div class="reward-box" id="rewardBox"> تهانينا! لقد حصلت على مكافأة. </div>
     
     <script> 
       const banner = document.getElementById('banner');
       const rewardBox = document.getElementById('rewardBox'); 
       banner.addEventListener('click', () => {//هنا الحدث عند الضغط على البانر الاعلاني 
         rewardBox.style.display = 'block'; // /ظهور المكافئة 
         setTimeout(() => {
           rewardBox.style.display = 'none';
         }, 3000); // تعيين مدة ظهور مربع المكافأة بالمللي ثانية (هنا 3 ثواني) 
       });
     </script> 
   </body> 
</html>

Ikram Ikram4 · 19 أغسطس 2023

بتاريخ On 17‏/8‏/2023 at 22:27 قال عبدالباسط ابراهيم:
يمكنك تنفيذ ذلك بالخطوات التالية:

إضافة بانر إعلاني في الصفحة مع إعطائه id مثلا banner-ad
<div id="banner-ad">
   
</div>
ثم إضافة div مخفي للمكافأة مع إعطائه id مثلا reward-box
<div id="reward-box" style="display:none;">
    
</div>
إضافة الكود التالي في script tag:
<script>
  let banner = document.getElementById("banner-ad");
  let rewardBox = document.getElementById("reward-box");
  banner.addEventListener("click",function(){
    rewardBox.style.display = "block"; 
  });
</script>
بهذا عند النقر على البانر الإعلاني سيظهر الـ reward box.

يمكنك تعديل الكود ليتناسب مع إحتياجاتك.

قد نجح الامر..بارك الله فيك..فضلا اريد كود تغيير اعلانات تلقائيا (اعلانين او ثلاث ي نفس المكان) عند تحديث الصفحة

بتاريخ 1 ساعة قال Thaer Alhabbash:

يجب عليك بالبداية تصميم البانر الاعلاني , و تصميم المكافئة , ومن ثم من خلال ال css قم بإخفاء المكافئة.
يجب بعدها استخدام الجافا سكربت لاضافة حدث الضغط على البانر الاعلاني لاظهار المكافئة , الكود التالي يلبي طلبك:

<!DOCTYPE html>
 <html> 
 <head> 
   <title>مكافأة الزائر</title> 
   <style>
     .banner {
       width: 300px;
       height: 150px;
       background-color: #f2f2f2;
       text-align: center; 
       line-height: 150px; 
       cursor: pointer;
     } 
     .reward-box { 
       display: none; 
       width: 200px;
       height: 100px; 
       background-color: #e0ffe0;
       text-align: center;
       line-height: 100px; 
       position: absolute; 
       top: 50%; 
       left: 50%;
       transform: translate(-50%, -50%);
     }
   </style> 
   </head> 
   <body>
     <div class="banner" id="banner"> انقر هنا للحصول على مكافأة! </div> 
     <div class="reward-box" id="rewardBox"> تهانينا! لقد حصلت على مكافأة. </div>
     
     <script> 
       const banner = document.getElementById('banner');
       const rewardBox = document.getElementById('rewardBox'); 
       banner.addEventListener('click', () => {//هنا الحدث عند الضغط على البانر الاعلاني 
         rewardBox.style.display = 'block'; // /ظهور المكافئة 
         setTimeout(() => {
           rewardBox.style.display = 'none';
         }, 3000); // تعيين مدة ظهور مربع المكافأة بالمللي ثانية (هنا 3 ثواني) 
       });
     </script> 
   </body> 
</html>

شكرا جزيلا

بتاريخ On 17‏/8‏/2023 at 23:20 قال Mustafa Suleiman:
ستحتاج إلى الإعتماد على عناصر HTML ثم كتابة كود برمجي من خلال جافاسكريبت لتوفير المكافأة التي تريدها مثل كود خصم أو ما شابه أو حسب ما تريد أو نقاط تضاف للمستخدم في حسابه مثلاً ولكن ذلك يشترط كتابة كود في الواجهة الخلفية.

والمثال التالي خاص بالواجهة الأمامية فقط:
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>Reward Box</title>
</head>
<body>
  <div class="banner-ad">
    <img src="banner.png" alt="Banner Ad">
  </div>

  <script>
  // هذه الدالة تُنشئ مربع مكافأة جديدًا عند النقر على إعلان البانر.
  function showRewardBox() {
    // ننشئ كائن مربع مكافأة جديدًا.
    const rewardBox = document.createElement('div');
    // نُعين اسم فئة مربع المكافأة.
    rewardBox.className = 'reward-box';

    // نضيف بعض النص إلى مربع المكافأة.
    rewardBox.innerHTML = 'تهانينا! لقد ربحت مكافأة.';

    // نضيف مربع المكافأة إلى الصفحة.
    document.body.appendChild(rewardBox);
  }

  // نضيف مستمعًا للحدث إلى إعلان البانر.
  document.querySelector('.banner-ad').addEventListener('click', showRewardBox);
  </script>
</body>
</html>

شكرا جزيلا

بتاريخ On 17‏/8‏/2023 at 22:27 قال عبدالباسط ابراهيم:
يمكنك تنفيذ ذلك بالخطوات التالية:

إضافة بانر إعلاني في الصفحة مع إعطائه id مثلا banner-ad
<div id="banner-ad">
   
</div>
ثم إضافة div مخفي للمكافأة مع إعطائه id مثلا reward-box
<div id="reward-box" style="display:none;">
    
</div>
إضافة الكود التالي في script tag:
<script>
  let banner = document.getElementById("banner-ad");
  let rewardBox = document.getElementById("reward-box");
  banner.addEventListener("click",function(){
    rewardBox.style.display = "block"; 
  });
</script>
بهذا عند النقر على البانر الإعلاني سيظهر الـ reward box.

يمكنك تعديل الكود ليتناسب مع إحتياجاتك.

كود سكريبت

السؤال

Ikram Ikram4

4 أجوبة على هذا السؤال

Recommended Posts

عبدالباسط ابراهيم

Mustafa Suleiman

Thaer Alhabbash

Ikram Ikram4

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية