JavaScript 系列三：練習2

toast 吐司元件

by applelily

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列三：練習2 ── toast 吐司元件</title>
    <link rel="stylesheet" href="./js_toast.css">
</head>
<body>
    <div class="success_container">
        <button class="success_btn" onclick="toastSuccess()">成功訂購商品</button>
        <div class="toast toast-success">
            ✅ 訂購成功！可以查看 Email 確認訂單細節！
        </div>
    </div>

    <hr>
    <div class="error_container">
        <button class="error_btn" onclick="toastError()">訂購商品失敗</button>

        <div class="toast toast-error">
            🚫 抱歉，訂購失敗！請稍後重新嘗試
        </div>
    </div>



    <script src="./js_toast.js"></script>
</body>
</html>

CSS

.success_container  ,.error_container{
    position: relative;  
}

.success_btn , .error_btn{
    min-width: 150px;
    background-color: #fff;
    border: 0;
    border-radius: 5px;
    border-bottom: 4px solid #d9d9d9;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;

    transition: all 0.3s;
    padding: 10px 20px;
}
.success_btn{
    margin-top: 100px;
    box-shadow: 0px 5px 10px #05901a;
}
.error_btn{
    margin-top: 100px;
    margin-left: 30px;
    box-shadow: 0px 5px 10px #902105;
}
.success_btn:hover  {
    box-shadow: 0px 15px 25px -5px #05901a ;
    transform: scale(1.03);
}
.success_btn:active{
    box-shadow: 0px 4px 8px #00c864;
    transform: scale(0.98);
}
.error_btn:hover  {
    box-shadow: 0px 15px 25px -5px #902105 ;
    transform: scale(1.03);
}
.error_btn:active{
    box-shadow: 0px 4px 8px #ab2706;
    transform: scale(0.98);
}


.toast{
    display:none;
    font-size:15px;
}
.toast-success{
    position: absolute;
    /* border: 1px solid #0f0; */
    background-color: #C6F6D5;
    color: #276749;
    border-radius: 15px;
    padding: 12px 15px;
    top:0;
    left:150px;

}
.toast-error{
    position: absolute;
    /* border: 1px solid #f00; */
    background-color: #EDCAC7;
    color: #902105;
    border-radius: 15px;
    padding: 12px 15px;
    top: 0;
    left:180px;
}
 .toast-success , .toast-error{
    animation: my_message 5s;
    opacity:0;
}

@keyframes my_message{
    /* from {
        left: 150px; opacity: 100;}
    to{ left: 200px;
        opacity: 0;} */
        from {
            top: 100px; opacity: 100;}
        to{ top: 20px;
            opacity: 0;}
    
}

JavaScript

function init_elem_toast(){
    let elem_toast= document.querySelectorAll('.toast');
    // 遍歷所有.toast元素，並將 display 設置為 none
    elem_toast.forEach(
        function(toast) {
        toast.style.display = "none";
        });

}
function set_display_timeout(in_elem){
    in_elem.style.display="block";
    setTimeout(function(){
        in_elem.style.display="none";
    },5000)

}
function toastSuccess(){
    init_elem_toast();
    let elem_toast_success= document.querySelector('.toast-success');
    set_display_timeout(elem_toast_success);
 }


function  toastError(){
    init_elem_toast();
    let elem_toast_error= document.querySelector('.toast-error');
    set_display_timeout(elem_toast_error);
}