簡體   English   中英

限制警報次數和時間的方法有哪些?

[英]What are the methods to limit the number and time of alerts?

當我點擊“Todo Ekleyin”按鈕時,我會收到警告。 但是,我希望每次按下此警報僅出現一次,而不是多次,並且可以在警報消失后再次按下。 我怎樣才能做到這一點? 提前感謝您的回答,辛苦了。 (如果有你建議的方法以外的方法,如果你能寫下它的名字,我會很高興。)

 // Tüm Elementleri Seçme const form = document.querySelector("#todo-form"); const todoInput = document.querySelector("#todo"); const todoList = document.querySelector(".list-group"); const firstCardBody = document.querySelectorAll(".card-body")[0]; const secondCardBody = document.querySelectorAll(".card-body")[1]; const filter = document.querySelector("#filter"); const clearButton = document.querySelector("#clear-todos"); eventListeners(); function eventListeners() { // Tüm Event Listenerlar form.addEventListener("submit", addTodo); } function addTodo(e) { const newTodo = todoInput.value.trim(); if (newTodo === "") { // Alarm Verme showAlert("danger","Lütfen Bir Todo Giriniz"); } else { addTodoToUI(newTodo); } addTodoToUI(newTodo); e.preventDefault(); } function showAlert(type,message){ const alert = document.createElement("div"); alert.className = `alert alert-${type}`; alert.textContent = message; firstCardBody.appendChild(alert); //setTimeout setTimeout(function(){ alert.remove(); }, 1000); } function addTodoToUI(newTodo) { // String Değerini List Item olarak Ekleyecek. // List Item Oluşturma. const listItem = document.createElement("li"); // Link Oluşturma const link = document.createElement("a"); link.href = "#"; link.className = "delete-item"; link.innerHTML = "<i class = 'fa fa-remove'></i>"; listItem.className = "list-group-item d-flex justify-content-between"; // Text Node listItem.appendChild(document.createTextNode(newTodo)); listItem.appendChild(link); // Todo List'e List Item'ı Ekleme todoList.appendChild(listItem); // Ekleme Sonrası Input'tan yazı Silme todoInput.value = ""; } // Todo Ekleme Bilgi Mesajı
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min:css" /> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min:css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <title>Todo List</title> </head> <body> <div class="container" style="margin-top: 20px"> <div class="card row"> <div class="card-header">Todo List</div> <div class="card-body"> <form id="todo-form" name="form"> <div class="form-row"> <div class="form-group col-md-6"> <input class="form-control" type="text" name="todo" id="todo" placeholder="Bir Todo Girin" /> </div> </div> <button type="submit" class="btn btn-danger">Todo Ekleyin</button> </form> <hr /> <.-- <div class="alert alert-danger" role="alert"> This is a danger alert—check it out. </div> --> </div> <div class="card-body"> <hr /> <h5 class="card-title" id="tasks-title">Todolar</h5> <div class="form-row"> <div class="form-group col-md-6"> <input class="form-control" type="text" name="filter" id="filter" placeholder="Bir Todo Arayın" /> </div> </div> <hr /> <ul class="list-group"> <.-- <li class="list-group-item d-flex justify-content-between"> Todo 1 <a href = "#" class ="delete-item"> <i class = "fa fa-remove"></i> </a> </li>--> </ul> <hr /> <a id="clear-todos" class="btn btn-dark" href="#">Tüm Taskları Temizleyin</a> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.2:1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1:12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script> <script src="berkay.js"></script> </body> </html>

您可以將 integer 放入警報 function 中,並且每個使用數組都會增加一個。 例如,如果您想在 5 次后不顯示警報。

 var a = 0; var b = true; if (newTodo === "" || b) { // Alarm Verme showAlert("danger","Please Give me a Todo;"); a++; if(a == 5 ){ b = false; } }

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM