#JS 分享 - 原生 Javascript 製作,仿 iOS 吐司訊息!

6月9日 04:42
imgur
-- 預計完成效果 -- 安安,斯咪搭! 今天要來分享的是使用原生 Javascript 製作仿 iOS 吐司訊息, 用簡單的 Js、Css 製作出訊息提示效果! ⚙️ 瀏覽器支援性:
imgur
* IE 10+、Edge、Chrome 8+、Safari 5.1+、FireFox 3.6+;IE 10 以下必須將 classList 更改成 className(或是使用 classList Polyfill )! -- 分隔線 -- Css 部分可根據個人喜好去做調整。 * 基本上只要吐司的背景設定: background-color :rgba( 顏色 , 透明度); 記得將透明度調整過即可(看起來比較不會那麼重)! * 在 偽元素 的部分可以加上: backdrop-filter、filter: blur、opacity 等屬性來調整,讓這一塊吐司有毛玻璃的感覺! * JS Function : function Toast( txt, type , duration ) { // 參數說明: // * txt → string [訊息內容] // * type → string [種類] // * duration → number [持續時間] } -- 分隔線 -- ⌨️ iCon 樣式表(引入 iCon Css 樣式表,可自行更換): cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css ⌨️ Html 代碼: <div class="toast toast--{ 訊息種類 - Type } fadeIn"> <i class=" { 圖標樣式 - iCon.class} "></i> <font> { 訊息內容 - Txt } </font> </div> ⌨️ Css 代碼(Scss): // 吐司的樣式 .toast { position: relative; border-radius: 20px; min-width: 10rem; margin: 1rem; padding: 1.5rem 2rem; text-align: center; user-select: none; transition: 0.125s; z-index: 1; &:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; background-color: inherit; background-attachment: fixed; backdrop-filter: blur(10px); filter: blur(10px); opacity: 0.88; z-index: -1; } // 將吐司定位在頁面正中央 &.float-toast { position: fixed; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); margin: 0; animation-duration: 500ms; z-index: 9999; } &.toast--success { background-color: rgba(darken($success, 20%), 0.48); } // .... 省略其他狀態 } // 隱藏物件 .t-invisible { visibility: hidden; } // 動畫樣式 @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { animation-name: fadeOut; } // Loading 載入動畫 @keyframes spinner { to { transform: rotate(1turn); } } .spinner { margin: 0 auto 0.75rem; width: 4.25rem; height: 4.25rem; border-radius: 50%; padding: 1.5px; background: conic-gradient(#0000 10%, #ffffff) content-box; mask-composite: intersect; animation: spinner 1s infinite steps(10); } ⌨️ Js 代碼(Javascript): function Toast(txt, type, duration) { // 持續時間如果沒有設定則為 3s(秒數) var duration = isNaN(duration) ? 3000 : duration; // 創建一個新的 div 容器 var toast = document.createElement("div"); // 給吐司一個 ID toast.id = "toast"; // 檢查頁面上有沒有吐司,如果有的話先移除(防止重複疊上去) var toast_id = document.getElementById("toast"); if (toast_id) { toast_id.remove(); } // 將吐司增加到 Body 後面 document.body.appendChild(toast); // 判斷 Type,給予不同樣式(Css) switch (type) { // 樣式 Success case "success": toast.className = "toast toast--success float-toast fadeIn"; toast.innerHTML = '<i class="fi fi-rr-time-check" aria-hidden="true"></i>' + '<font>' + txt + '</font>'; break; // 樣式 Error case "error": toast.className = "toast toast--error float-toast fadeIn"; toast.innerHTML = '<i class="fi fi-rr-cross-circle" aria-hidden="true"></i>' + '<font>' + txt + '</font>'; break; // 樣式 Info case "info": toast.className = "toast toast--info float-toast fadeIn"; toast.innerHTML = '<i class="fi fi-rr-info" aria-hidden="true"></i>' + '<font>' + txt + '</font>'; break; // 樣式 Warning case "warning": toast.className = "toast toast--warning float-toast fadeIn"; toast.innerHTML = '<i class="fi fi-rr-shield-exclamation" aria-hidden="true"></i>' + '<font>' + txt + '</font>'; break; // 樣式 Help case "help": toast.className = "toast toast--help float-toast fadeIn"; toast.innerHTML = '<i class="fi fi-rr-interrogation" aria-hidden="true"></i>' + '<font>' + txt + '</font>'; break; // 樣式 Default case "default": toast.className = "toast toast--default float-toast fadeIn"; toast.innerHTML = '<div class="spinner"></div>' + '<font>' + txt + '</font>'; break; } // 定時器:設定時間、添加移除動畫 setTimeout(function () { toast.classList.remove("fadeIn"); toast.classList.add("fadeOut", "t-invisible"); }, duration); } } ⌨️ Js 調用: // Toast( txt , type , duration ) Toast( "訊息內容" , "訊息種類" , "持續時間" ) 🔗 完整代碼 - 範例網址:
36
留言 17
文章資訊
4 篇文章34 人追蹤
共 17 則留言
長庚大學
感謝無私分享
國立臺北商業大學
謝謝分享
龍華科技大學
這是自己做的嗎 好厲害
國立高雄科技大學
還要再加油
淡江大學
菜機路過不會用 是貼到我的VS code就有嗎 bootstrap什麼的一直看到但不會 求高手說明
朝陽科技大學
蠻美的 不過code要再加強 謝謝分享
匿名
這則留言已被刪除
已經刪除的內容就像 Dcard 一樣,錯過是無法再相見的!
現實生活的苦悶,讓很多朋友想喝茶舒壓放鬆一下,+來98kppp TG:si1314 然而卻不得其門而入,沒人帶的話,很容易被不良論壇上的虛假訊息坑騙, 金錢損失事小,若不小心上了電視新聞,那就糗了,而小紅娘的出現讓我眼前一亮。 我也是四字開頭的年紀了,算起來吃魚喝茶也有十幾個年頭了,算得上是老司機 但是之前配合了很多茶莊也都不盡人意, 所以不建議大家吃魚,還不如直接找茶莊,省時省心又省力 偶然在論壇爬樓看到小紅娘的來98kppp好像還不錯,想着先加上她問問看, 當下跟小紅娘說今天并沒有要約 ,也跟她諮詢了很多,而且小紅娘也并沒有不耐煩 很耐心的回復我的每一個刁鑽的問題, 相反我還感覺自己有點像澳客,哈哈。之後 就挑了一天休假的時間跟小紅娘約了一個 本來是沒有抱太大的期望的,但是當我看到妹妹的那一刻,我整個呆住了,一整個美女呀 妹妹一進門先給我來了一個熱情的擁抱 隨後還親了親我的臉頰,當時我感覺自己一個四十幾的大叔又戀愛了一次, 之前都是洗澡愛愛感覺沒有 新鮮感 這次玩的超開心 小紅娘幫我安排的很好 推薦推薦不唬難 喜歡喝茶的朋友記得加她的來98kppp TG:si1314