To show either text or an image saying “Data Saved” for 2 seconds when the user clicks the “save” button, you can use JavaScript. Here’s how you can do it:
- First, add an element to your HTML where you want to display the message or image:
html<div id="feedback">div>
- Then, add some CSS to style the feedback message or image:
css#feedback {
display: none; /* Hide the feedback initially */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px 20px;
border-radius: 5px;
}
- Next, use the following JavaScript code to show the feedback message or image for 2 seconds when the “save” button is clicked:
javascriptdocument.getElementById('saveButton').addEventListener('click', function() {
document.getElementById('feedback').textContent = 'Data Saved'; // Change to an image tag if you want to display an image
document.getElementById('feedback').style.display = 'block'; // Show the feedback
setTimeout(function() {
document.getElementById('feedback').style.display = 'none'; // Hide the feedback after 2 seconds
}, 2000);
});
Make sure to replace 'saveButton'
with the actual ID of your “save” button.
مقالات ذات صلة
-
حل مشكلة ربط المصفوفة في Doctrine25/02/2024
-
مشكلات الحلقة التكرارية في كود R28/01/2024
-
الأعضاء المرنة في C: البنية والاستخدام18/03/2024
-
تحسين برنامج تحويل الدرجات في C++14/03/2024
This code will display the “Data Saved” message or image for 2 seconds when the “save” button is clicked.
المزيد من المعلومات
لإظهار رسالة أو صورة تقول “تم حفظ البيانات” لمدة 2 ثانية عندما ينقر المستخدم على زر “حفظ”، يمكنك استخدام Angular و CSS مع JavaScript. في Angular، يمكنك استخدام خدمة لإدارة حالة العرض والإخفاء، ومن ثم استدعاء هذه الخدمة عند الضغط على الزر. إليك كيفية القيام بذلك:
- أولاً، قم بإنشاء خدمة Angular لإدارة حالة العرض والإخفاء. يمكنك تسميتها
FeedbackService
، واجعلها تقوم بتخزين حالة العرض (مثلisShown
) وتقديم طريقة لتغيير حالة العرض:
typescript// feedback.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class FeedbackService {
isShown: boolean = false;
showFeedback() {
this.isShown = true;
setTimeout(() => {
this.isShown = false;
}, 2000);
}
}
- ثم، في مكون Angular الخاص بالزر “حفظ”، قم بحقن
FeedbackService
واستخدمه لتغيير حالة العرض عند الضغط على الزر:
typescript// save-button.component.ts
import { Component } from '@angular/core';
import { FeedbackService } from './feedback.service';
@Component({
selector: 'app-save-button',
template: '',
})
export class SaveButtonComponent {
constructor(private feedbackService: FeedbackService) {}
save() {
// Save the data here
// Show the feedback
this.feedbackService.showFeedback();
}
}
- في القالب الخاص بمكون الزر “حفظ”، استخدم توجيه
*ngIf
لعرض الرسالة أو الصورة إذا كانت حالة العرض صحيحة (true
):
html
<div *ngIf="feedbackService.isShown" class="feedback">تم حفظ البياناتdiv>
- أخيرًا، استخدم CSS لتنسيق الرسالة أو الصورة كما تريد:
css/* styles.css */
.feedback {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 10px 20px;
border-radius: 5px;
}
بهذا، عندما ينقر المستخدم على زر “حفظ”، ستظهر رسالة “تم حفظ البيانات” لمدة 2 ثانية ثم تختفي.