Tạo thông báo đơn hàng
Đầu tiên mình cài sweetalert2 https://sweetalert2.github.io/
Tiếp theo mình code phần thông báo
<div id="thongbao" class="swal2-container swal2-bottom-start hienthi" style="overflow-y: auto;display: none">
<div aria-labelledby="swal2-title" aria-describedby="swal2-html-container"
class="swal2-popup swal2-toast swal2-icon-success swal2-show" tabindex="-1" role="alert" aria-live="polite"
style="width: fit-content; display: grid;bottom: 20px; position: absolute; margin: 10px;">
<h2 class="swal2-title" id="swal2-title" style="display: block;">Heheh</h2>
<div class="swal2-html-container" id="swal2-html-container" style="display: block;">Xin chúc mừng chị Hoa đã trúng giải 3
</div>
</div>
</div>'
Phần javascript
<?php
$keys = ['sky', 'grass', 'orange'];
$values = ['blue', 'green', 'orange'];
?>
<script>
var myVar = setInterval(function (){
notification1();
document.getElementById("thongbao").style.display = "block";
setTimeout(ab,3000)
console.log('123');
},5000);
const ab = function displaynone(){
document.getElementById("thongbao").style.display = "none";
}
var phones = [];
<?php
foreach ($keys as $phonevnf){
//$sdt = explode('|', $phonevnf);
?>
phones.push("<?php echo $phonevnf; ?>");
<?php } ?>
const notification1 = function messagess(){
var tieude = phones[Math.floor(Math.random()*phones.length)];
document.getElementById("swal2-title").innerHTML = tieude;
document.getElementById("swal2-html-container").innerHTML = tieude;
}
</script>