[Bootstrape] click 跳出 dialog

[Chrome] Notification 通知視窗

window.addEventListener('load', function () {
            //確認使用者是否允許跳窗，如果沒有，就跳窗取權限
            if (window.Notification && Notification.permission !== "granted") {
                Notification.requestPermission(function (status) {
                    if (Notification.permission !== status) {
                        Notification.permission = status;
                    }
                });
                
            }
            function NotifyMsg() {
                var option = {
                    tag: 'Notification',
                    body: '測試測試測試',
                    data: 'I am a data',
                    icon: '' //可以自訂ICON
                }

                var n = new Notification("Title", option);
                setTimeout(n.close.bind(n), 5000);
                console.log(n.data);
               
                n.onclick = function (event) {
                    event.preventDefault(); // prevent the browser from focusing the Notification's tab
                    window.open('http://www.google.com.tw/', '_blank');
                }
            }

            var button = document.getElementsByTagName('button')[0];
            button.addEventListener('click', function () {
                // If the user agreed to get notified
                // Let's try to send ten notifications
                if (window.Notification && Notification.permission === "granted") {
                    NotifyMsg();                
                    }

                    // If the user hasn't told if he wants to be notified or not
                    // Note: because of Chrome, we are not sure the permission property
                    // is set, therefore it's unsafe to check for the "default" value.
                else if (window.Notification && Notification.permission !== "denied") {
                        Notification.requestPermission(function (status) {
                        if (status === "granted") {
                            NotifyMsg();
                        }
                         // Otherwise, we can fallback to a regular modal alert
                        else {
                            alert("Hi!");
                        }
                    });
                }
                    // If the user refuses to get notified
                else {
                    // We can fallback to a regular modal alert
                  alert("Hi!");
                }
            });
          
        });

參考資料: MDN

[JQuery] slideShow 輪播

記錄一下 好用的輪播套件 slick 連結

然後下面範例是拿其他教學範例多加的功能

在特定的高度上會停止撥放幻燈片

     $(document).ready(function (){
            //window.scroll 抓取使用者滾輪高度..這裡自訂600
            var stop = false;
            $(window).scroll(function () {
                var scrollTop = $(window).scrollTop();
                if (scrollTop >= 600 ) {
                    console.log("stop" + scrollTop);
                    stop = true;
                } else {
                    console.log("r" + scrollTop);
                    stop = false;
                }
            });

            var num = 1;
            var tNum = 5;
            var duration = 2000;
            console.log("A");

            run();
            
            $("#box").mouseover(function () { stopRun(); })
            .mouseout(function () { run();})
      
            for (var i = 1; i <= tNum; i++) {
                document.getElementById("tab" + i).onclick = show;
                document.getElementById("con" + i).style.display = "none";
            }
            document.getElementById("con1").style.display = "block";
            document.getElementById("tab1").className = "now-tab";

            //在 autoShow 判斷是否停止撥放
            function autoShow() {
                if (stop) return;

                for (var i = 1; i <= tNum; i++) {
                    document.getElementById("con" + i).style.display = "none";
                    document.getElementById("tab" + i).className = "";
                }
                if (num < tNum) { num++; } else { num = 1; }
                document.getElementById("con" + num).style.display = "block";
                document.getElementById("tab" + num).className = "now-tab";

            }

            function show() {
                num = this.id.substr(3) - 1;
                autoShow();
            }

            function stopRun() { clearInterval(myInterval); }

            function run() { myInterval = setInterval(autoShow, duration); }
          
        });

來源:Flycan-輪播廣告 教學