關於cookie的部分用法(頁面中新消息聲音提醒開關)

cookie即在瀏覽器中存放一個臨時文件來存取信息,當cookie保存某個值後,就算你關閉頁面重新打開或者刷新頁面,cookie依然保留;當然,也可以在瀏覽器中清除cookie,清楚後cookie值爲默認,下例默認即爲聲音打開

1.首先要引用cookie文件

<script type="text/javascript" src="/js/jquery.cookie.js"></script>


2.HTML頁面中含有控制聲音開關的圖標(點擊啓用/禁用)
<span id="voice_btn" style="display: inline-block;width: 30px;height: 20px;float: left;background: url(/images/voice_btn.png) no-repeat;"></span>

3.編寫js代碼
<script type="text/javascript">
        $(document).ready(function () {
            //設置提醒消息聲音開關圖標
            var voice = $.cookie("voice");//頁面加載完成時獲取最新voice的值,並控制聲音圖標與聲音開關一致,voice爲0時聲音關閉,非0時聲音開啓
            if (voice == 0) {
                $("#voice_btn").css("background-position", "2px 2px");//關閉圖標
            } else {
                $("#voice_btn").css("background-position", "2px -38px");//開啓圖標
            }
            $("#voice_btn").click(function () {//聲音圖標點擊事件:點擊時若voice值爲0,則把voice值改爲1,並把圖標改爲開啓時圖標;否則若值爲非0,把其改爲0,把圖標改爲關閉時圖標
                voice = $.cookie("voice");
                if (voice == 0) {
                    $.cookie("voice", "1");
                    $(this).css("background-position", "2px -38px");
                } else {
                    $.cookie("voice", "0");
                    $(this).css("background-position", "2px 2px");
                }
            });
        })
    </script>
<script type="text/javascript">//這裏只是部分相關代碼
        var setcookie = true;
        var s = 0;
        function loadInfo() {
            $.getJSON("/usercommondatahandler.ashx?action=getmessagelist",
                function (data) {
var voice = $.cookie("voice");
                        if (voice != 0) {
                            if (s == 0) {
                                var webpath = getRootPath(); //webpath就是目錄路徑變量 
                                s++;
                                if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
                                    $('audio').remove();
                                    $(body).append("<audio autoplay='autoplay'><source src='" + webpath + "/TishiMusic.wav' type='audio/wav'></audio >");
                                } else {
                                    $('embed').remove();
                                    $(body).append("<embed src='" + webpath + "/TishiMusic.wav' autostart='true' hidden='true' loop='false'></embed>");
                                }
                            }
                        }
//如果voice值非0,則開啓聲音
}
$(document).ready(function () {
            loadInfo();
            loadTaskTips51ifw();
            setInterval("loadInfo()", 30000);
            setInterval("loadTaskTips51ifw()", 30000);
        });
    </script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章