jq/js新手引導，cookie

<!--**********************************製做新手引導的思路***********************-->
<!--1.絕對定位：
（1）有父節點，參照付節點
（2）沒有父節點，參照body的左上
2.html結構
 蒙版設置：設置html和body，蒙版的高度爲100%，爲了撐開蒙版（爲了解決兼容問題）

 注意內容：1.html和body都設置爲100%
 2.ie8如下都不支持opacity，能夠使用filter來解決這個問題。
 3.隱藏按鈕文字的小技巧,text-indent:-999px; overflow:hidden；這種方法是先使用text-indent:-999px;語句把被設置元素「擠出去」了，而後設置溢出的元素都隱藏起來，也就是被擠出去的元素隱藏起來。

document.cookie存在的狀況下，不會發生一些事件
重點是獲取和設置cookie
-->

<style>
    *{ margin:0; padding:0}
    html{ height:100%}
    body{ background:url(images/body.png) center top; height:100%}
    #mask{ height:100%; width:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0; display:none;position: fixed}
    #searchTip{ width:980px; height:800px; margin:0 auto; position:relative; }
    #searchTip div{ position:absolute; display: none }
    #searchTip div a{ position:absolute;width:96px; height:32px; cursor:pointer; text-indent:-999px; overflow:hidden}
    #searchTip div span{cursor:pointer; position:absolute; width:30px; height:30px;text-indent:-999px; overflow:hidden}
    .stepA{ background:url(images/guide11.png); height:329px; width:745px; top:130px; left:-9px; display:block}
    .stepA a{top:230px; left:490px; }
    .stepA span{ top:143px; right:32px; }
    .stepB{ background:url(images/guide21.png); width:647px; height:405px;top:2px; left:324px}
    .stepB a{top:308px; left:146px;}
    .stepB span{ top:196px; right:285px; }
    .stepC{ background:url(images/guide31.png); width:654px; height:257px;top:294px; left:318px}
    .stepC a{top:155px; left:400px; }
    .stepC span{ top:44px; right:35px; }
    .stepD{ background:url(images/guide41.png); width:558px; height:348px;top:78px; left:155px}
    .stepD a{top:246px; left:304px;}
    .stepD span{ top:135px; right:35px; }
    .stepE{ background:url(images/guide51.png); width:397px; height:342px;top:79px; left:250px}
    .stepE a{top:245px; left:153px;}
</style>

html

<div id="mask"></div>
<div id="searchTip">
    <div class="stepA"><a>下一步</a><span title="關閉">關閉</span></div>
    <div class="stepB"><a>下一步</a><span title="關閉">關閉</span></div>
    <div class="stepC"><a>下一步</a><span title="關閉">關閉</span></div>
    <div class="stepD"><a>下一步</a><span title="關閉">關閉</span></div>
    <div class="stepE"><a>下一步</a></div>
</div>

js

<script>
    window.onload=function(){
        var oMask=document.getElementById('mask')
        var oSearch=document.getElementById('searchTip')
        var aStep=oSearch.getElementsByTagName('div')
        var aA=oSearch.getElementsByTagName('a')
        var aClose=oSearch.getElementsByTagName('span')

        //讀取cookie
        var res=document.cookie.substring(5)
        console.log(res)
        //若是沒有cookie,執行如下動做
        if(res!='www.open.com.cn'){  //記得加引號
            //mask 父框 第一單元顯示出來
            oMask.style.display=oSearch.style.display=aStep[0].style.display='block'
        }
        //下一步按鈕
        for(var i=0;i<aStep.length;i++){
            aA[i].index=i;  //設置索引值
            aA[i].onclick=function(){
                this.parentNode.style.display='none'
                //經過判斷當前的索引值和最後一個的索引值，解決最後一個問題
                if(this.index<aStep.length-1){//解決最後一個的問題
                    aStep[this.index+1].style.display='block'
                }else if(this.index==aStep.length-1){  //若是是最後一個的話，就隱藏全部的
                    this.parentNode.style.display='none'
                }
            }
        }
        //關閉按鈕
        for(var i in aClose){
            aClose[i].onclick=function(){
                oMask.style.display=oSearch.style.display='none'
            }
        }
        //添加cookie
        //name能夠隨便命名
        var oDate=new Date()
        oDate.setDate(oDate.getDate()+30); //設置日期
        var oName='www.open.com.cn'
//        document.cookie="name=www.open.com.cn;expires=oDate"
        document.cookie="name="+oName+";expires="+oDate  //裏面的字符串必須爲雙引號
    }
</script>

jq

<script>
    $(function(){

        //讀取cookie
        var res=name.substring('5')
        if(res!='www.open.com.cn'){
            $('#mask,#searchTip,#searchTip div:eq(0)').show()
        }

        //點擊
        $('#searchTip div a').click(function(){
            $(this).parent().hide()
                    .next().show()
           /* if($(this).parent().is('.stepE')){
                $('#mask,#searchTip,#searchTip div:eq(0)').hide()
            }else{
                $(this).parent().hide()
                .next().show()
            }*/
        })
        //關閉,若是是最後一個的時候，不須要加判斷，直接把全部的都關閉便可
        $('#searchTip div span,#searchTip div a:last').click(function(){
            $(this).parent().hide()
            $('#mask,#searchTip').hide()
        })
        //設置cookie
        var day=new Date();
        day.setDate(day.getDate()+30)
        var newName='www.open.com.cn'
        document.cookie="name="+newName+";expires="+day
    })
</script>

　　

<!--*****************************總結**************************-->
<!--
js
1.循環判斷的時候，要加索引值，經過判斷索引值解決最後一個問題
2.設置日期，是setDate()
3.設置cookie，裏面若是是動態的數據，記得都是雙引號
4.讀取cookie
jq
1.最後一個圖片的時候，不須要判斷，直接和關閉按鈕一塊兒進行關閉功能
2.最後一個元素:last
-->