javascript使用cookie实现DIV提示框只显示一次的方法

科技网编2023-09-01 17:291620

-//W3C//DTD XHTML 1.0 Transitional//EN&head&Meta http-equiv=&content=&DIV&right;padding;>path);date.setTime(date.getTime() + (mins * 60 * 1000));expires=&domain=&

本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法。分享给大家供大家参考，具体如下：

这里运用JavaScript的cookie技术，控制网页上的提示DIV只显示一次，也就是当用户是第一次打开网页的时候才显示，第二次自动隐藏起来，很好的提升了用户体验，不会使用户烦感；利用Cookies，我们还可做超多的事情，慢慢体会吧。

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;Meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;
&lt;title&gt;cookie&#xFF0C;&#x53EA;&#x663E;&#x793A;&#x4E00;&#x6B21;&#x7684;DIV&#x63D0;&#x793A;&#x6846;&lt;/title&gt;
&lt;style&gt;
.note {
    height: 100px;
    width: 600px;
    background: url(images/tishi.jpg) #FEFFCF 40px 0px no-repeat;
    border: #EDCE7B 1px solid;
}

.guanbi {
    float: right;
    font-size: 12px;
    padding: 6px;
}
&lt;/style&gt;
&lt;script&gt;
    function cookiesave(n, v, mins, dn, path) {
        if (n) {
            if (!mins)
                mins = 365 * 24 * 60;
            if (!path)
                path = &quot;/&quot;;
            var date = new Date();
            date.setTime(date.getTime() + (mins * 60 * 1000));
            var expires = &quot;; expires=&quot; + date.toGMTString();
            if (dn)
                dn = &quot;domain=&quot; + dn + &quot;; &quot;;
            document.cookie = n + &quot;=&quot; + v + expires + &quot;; &quot; + dn + &quot;path=&quot;
                    + path;
        }
    }
    function cookieget(n) {
        var name = n + &quot;=&quot;;
        var ca = document.cookie.split(&apos;;&apos;);
        for (var i = 0; i &lt; ca.length; i++) {
            var c = ca[i];
            while (c.charat(0) == &apos; &apos;)
                c = c.substring(1, c.length);
            if (c.indexOf(name) == 0)
                return c.substring(name.length, c.length);
        }
        return &quot;&quot;;
    }
    function closeclick() {
        document.getElementById(&apos;note&apos;).style.display = &apos;none&apos;;
        cookiesave(&apos;closeclick&apos;, &apos;closeclick&apos;, &apos;&apos;, &apos;&apos;, &apos;&apos;);
    }
    function clickclose() {
        if (cookieget(&apos;closeclick&apos;) == &apos;closeclick&apos;) {
            document.getElementById(&apos;note&apos;).style.display = &apos;none&apos;;
        } else {
            document.getElementById(&apos;note&apos;).style.display = &apos;block&apos;;
        }
    }
    window.onload = clickclose;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;note&quot; class=&quot;note&quot; style=&quot;display: none;&quot;&gt;
        &lt;div&gt;
            &lt;a href=&quot;#&quot; onclick=&quot;closeclick()&quot; class=&quot;guanbi&quot;&gt;&lt;img
                src=&quot;images/close-note.gif&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

原文地址：https://cloud.tencent.com/developer/article/2133650