JS使用cookie實現(xiàn)DIV提示框只顯示一次的方法

更新時間：2015年11月05日 10:57:02 作者：企鵝

這篇文章主要介紹了JS使用cookie實現(xiàn)DIV提示框只顯示一次的方法,涉及JavaScript基于cookie標(biāo)記控制頁面元素樣式修改的技巧,需要的朋友可以參考下

本文實例講述了JS使用cookie實現(xiàn)DIV提示框只顯示一次的方法。分享給大家供大家參考，具體如下：

這里運(yùn)用JavaScript的cookie技術(shù)，控制網(wǎng)頁上的提示DIV只顯示一次，也就是當(dāng)用戶是第一次打開網(wǎng)頁的時候才顯示，第二次自動隱藏起來，很好的提升了用戶體驗，不會使用戶煩感；利用Cookies，我們還可做超多的事情，慢慢體會吧。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-cookie-div-dlg-show-once-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cookie，只顯示一次的DIV提示框</title>
<style>
.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;}
</style>
<script>
function cookiesave(n, v, mins, dn, path)
{
 if(n)
 {
  if(!mins) mins = 365 * 24 * 60;
  if(!path) path = "/";
  var date = new Date();
  date.setTime(date.getTime() + (mins * 60 * 1000));
  var expires = "; expires=" + date.toGMTString();
  if(dn) dn = "domain=" + dn + "; ";
  document.cookie = n + "=" + v + expires + "; " + dn + "path=" + path;
 }
}
function cookieget(n)
{
 var name = n + "=";
 var ca = document.cookie.split(';');
 for(var i=0;i<ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==' ') c = c.substring(1,c.length);
  if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
 }
 return "";
}
function closeclick(){
 document.getElementById('note').style.display='none';
 cookiesave('closeclick','closeclick','','','');
}
function clickclose(){
 if(cookieget('closeclick')=='closeclick'){
  document.getElementById('note').style.display='none';
 }else{
  document.getElementById('note').style.display='block';
 }
}
window.onload=clickclose;
</script>
</head>
<body>
<div id="note" class="note" style="display:none;">
 <div><a href="#" onclick="closeclick()" class="guanbi"><img src="images/close-note.gif" border="0" /></a></div>
</div>
</body>
</html>

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS實現(xiàn)PC手機(jī)端和嵌入式滑動拼圖驗證碼三種效果
這篇文章主要介紹了JS實現(xiàn)PC手機(jī)端和嵌入式滑動拼圖驗證碼三種效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
淺談TypeScript的類型保護(hù)機(jī)制
這篇文章主要介紹了淺談TypeScript的類型保護(hù)機(jī)制,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
js嵌套的數(shù)組扁平化:將多維數(shù)組變成一維數(shù)組以及push()與concat()區(qū)別的講解
今天小編就為大家分享一篇關(guān)于js嵌套的數(shù)組扁平化:將多維數(shù)組變成一維數(shù)組以及push()與concat()區(qū)別的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
javascript過濾危險腳本方法
腳本藏身之處不過有四： 1、<script>標(biāo)簽、<link>標(biāo)簽、<style>標(biāo)簽、iframe標(biāo)簽 2、on開頭的標(biāo)簽屬性 3、javascript(vbscript)偽協(xié)議 4、css的epression
2008-08-08
深入理解JavaScript系列(12) 變量對象（Variable Object）
JavaScript編程的時候總避免不了聲明函數(shù)和變量，以成功構(gòu)建我們的系統(tǒng)，但是解釋器是如何并且在什么地方去查找這些函數(shù)和變量呢
2012-01-01
用js統(tǒng)計用戶下載網(wǎng)頁所需時間的腳本
下面的方法是個不錯的思路，建議對于js感興趣的朋友，推薦看
2008-10-10
JS正則表達(dá)式驗證端口范圍(0-65535)
這篇文章主要介紹了JS正則表達(dá)式驗證端口范圍(0-65535),文中給大家提到了Js正則表達(dá)式驗證IP+端口號的代碼，需要的朋友可以參考下
2020-01-01
webpack 5 mode的作用和區(qū)別解析
Webpack 5 是一款強(qiáng)大的模塊打包工具,可用于將許多分散的模塊按照依賴關(guān)系打包成一個（或多個）bundle,這篇文章給大家介紹webpack 5 mode的作用和區(qū)別解析,感興趣的朋友跟隨小編一起看看吧
2024-01-01
javascript實現(xiàn)前端成語點(diǎn)擊驗證
這篇文章主要介紹了javascript實現(xiàn)前端成語點(diǎn)擊驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
JavaScript顯示表單內(nèi)元素數(shù)量的方法
這篇文章主要介紹了JavaScript顯示表單內(nèi)元素數(shù)量的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-04-04