javascript cookie 背景顏色- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
1192

會員總數：246690
討論主題：190103

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> Java Script/ Node.js >> javascript cookie 背景顏色

[]

[我要回覆]

javascript cookie 背景顏色
價值 : 500 QP 點閱數:1682 回應數:8

樓主

愛情藥

0	95
1047	156

發送站內信

各位前輩好，

在網頁設計的時候，想要用Cookie去設定預設的背景顏色，
比如說預設背景為"紅色-Red" 但是如果他點選“黑色-Black"後，之後造訪後就直接顯示"黑色-黑色"。

但是我在寫的時候，才會直接顯示黑色，而不是預設紅色?
我該如何寫??要把程式寫在哪裡?

謝謝...

//點選顏色後 將資料存儲到Cookie
     $('.my_color').click(function(){
          ClearCookie('BG_Menu');
          SetCookie('BG_Menu','Red','1','','',''); 
          alert(GetCookie('BG_Menu'));
      })

//相關JS程式

function ClearCookie(name) {
	var ThreeDays=3*24*60*60*1000;
	var expDate = new Date();
	expDate.setTime(expDate.getTime()-ThreeDays);
	document.cookie=name+"=;expires="+expDate.toGMTString();
}

本篇文章發表於2014-05-02 09:52

1樓作者回應愛情藥	<body style="background:red;"> Test <div class="my_color" style="cursor:pointer;">change background color</div> </body> 本篇文章回覆於2014-05-02 10:27 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓不錯的參考 min	你都幾乎寫完了，只是在$(document).ready(..做點處理而已: <script src="jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascript"> function SetCookie(name, value, expires, path, domain, secure) { var expDays = expires * 24 * 60 * 60 * 1000; var expDate = new Date(); expDate.setTime(expDate.getTime() + expDays); var expString = ((expires == null) ? "" : (";expires=" + expDate.toGMTString())) var pathString = ((path == null) ? "" : (";path=" + path)) var domainString = ((domain == null) ? "" : (";domain=" + domain)) var secureString = ((secure == true) ? ";secure" : "") document.cookie = name + "=" + escape(value) + expString + pathString + domainString + secureString; } function GetCookie(name) { var result = null; var myCookie = document.cookie + ";"; var searchName = name + "="; var startOfCookie = myCookie.indexOf(searchName); var endOfCookie; if (startOfCookie != -1) { startOfCookie += searchName.length; endOfCookie = myCookie.indexOf(";", startOfCookie); result = unescape(myCookie.substring(startOfCookie, endOfCookie)); } return result; } function ClearCookie(name) { var ThreeDays = 3 * 24 * 60 * 60 * 1000; var expDate = new Date(); expDate.setTime(expDate.getTime() - ThreeDays); document.cookie = name + "=;expires=" + expDate.toGMTString(); } </script> <script type="text/javascript"> function SetColor(hex) { $('body').css('background-color', hex); } function rgb2hex(rgb) { rgb = rgb.match(/^rgb$(\d+),\s(\d+),\s(\d+)$$/); return "#" + ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2); } $(document).ready(function () { var hex = GetCookie('BG_Menu'); SetColor(hex); $('.my_color1').click(function () { ClearCookie('BG_Menu'); var c = $(this).css('background-color'); SetCookie('BG_Menu', rgb2hex(c), '1', '', '', ''); c = GetCookie('BG_Menu'); SetColor(c); }); $('.my_color2').click(function () { ClearCookie('BG_Menu'); var c = $(this).css('background-color'); SetCookie('BG_Menu', rgb2hex(c), '1', '', '', ''); c = GetCookie('BG_Menu'); SetColor(c); }); }); </script> <body > <div class="my_color1" style="cursor:pointer;color:White;background-color:Black">Black</div> <div class="my_color2" style="cursor:pointer;color:White; background-color:Red">Red</div> </body> 本篇文章回覆於2014-05-02 15:49 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓回應香帥	請參考如下程式碼 <body style="background:red;"> Test <div class="my_color" style="cursor:pointer;">change background to blue</div> </body> <script src="http://code.jquery.com/jquery-git.js"></script> //相關JS程式 <script> changeBG(GetCookie('BG_Menu')); //點選顏色後將資料存儲到Cookie $('.my_color').click(function(){ ClearCookie('BG_Menu'); SetCookie('BG_Menu','blue','1','','',''); alert(GetCookie('BG_Menu')); changeBG(GetCookie('BG_Menu')); }) function SetCookie(name,value,expires,path,domain,secure) { var expDays = expires2460601000; var expDate = new Date(); expDate.setTime(expDate.getTime()+expDays); var expString = ((expires==null) ? "" : (";expires="+expDate.toGMTString())); var pathString = ((path==null) ? "" : (";path="+path)); var domainString = ((domain=='') ? "" : (";domain="+domain)); var secureString = ((secure==true) ? ";secure" : "" ); document.cookie = name + "=" + escape(value) + expString + pathString + domainString + secureString; document.cookie = name + "=" + escape(value) + expString + pathString + domainString +secureString; } function GetCookie(name) { var result = null; var myCookie = document.cookie + ";"; var searchName = name + "="; var startOfCookie = myCookie.indexOf(searchName); var endOfCookie; if (startOfCookie != -1) { startOfCookie += searchName.length; endOfCookie = myCookie.indexOf(";",startOfCookie); result = unescape(myCookie.substring(startOfCookie, endOfCookie)); } return result; } function ClearCookie(name) { var ThreeDays=32460601000; var expDate = new Date(); expDate.setTime(expDate.getTime()-ThreeDays); document.cookie=name+"=;expires="+expDate.toGMTString(); } function changeBG(mycolor){ if (mycolor != null) document.body.style.backgroundColor=mycolor } </script> 測試網址在 http://ap.a168a.com/test/changebg.htm 本篇文章回覆於2014-05-02 15:53 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓回應香帥	補充您原來第15,16行因為有傳入'',用null判斷會無法設定cookie 本篇文章回覆於2014-05-02 15:58 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
5樓回應香帥	更正4樓16行那行判斷要改為 domain=='' 不然的話就要給真正的domain值,cookie設定才會成功本篇文章回覆於2014-05-02 16:40 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
6樓作者回應愛情藥	大大，背景的問題解決了，可否請教另一個問題: 假設==> (1)我的暫存 Cookie = ”red“ (2)網站載入順序為 <1>Header.php //預設背景為藍色"blue" 顏色寫在檔名為 style.css 的檔案裡例如:<div class="header">Header </div> <2>Content.php //預設背景為藍色"blue" 顏色寫在檔名為 style.css 的檔案裡例如:<div class="content">content </div> <3>Footer.php //預設背景為藍色"blue" 顏色寫在檔名為 style.css 的檔案裡例如:<div class="footer">footer </div> 那載入時有先後順序的問題，又要如何讓<1><2><3>載入時直接出現紅色"Red", 而非＿＿[先出現預設值藍色Blue，然後載入cookie =紅色Red'] 這樣感覺螢幕會有閃跳的情況。謝謝~ 本篇文章回覆於2014-05-05 15:09 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
7樓回應 min	在載好之前先把他藏起來 http://stackoverflow.com/questions/2951053/how-do-i-hide-an-html-element-before-the-page-loads 本篇文章回覆於2014-05-05 17:45 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
8樓最有價值解答香帥	請參考以下程式碼,將最大佔比的紅色用fadeIn方式會更漂亮 <script src="http://code.jquery.com/jquery-git.js"></script> <script> $(document).ready(function(){ $("#container").css('background-color','red'); }); </script> <head> <style type="text/css"> .nav-fade li { background: #fff; padding: 3px 8px; display: inline-block; transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out; } .nav-fade li:hover { background: #ddd; } #header { position:relative; width:100%; height:10%; background-color:blue; } #container { position:relative; width:100%; height:80%; background: #ffffff; padding: 3px 8px; display: inline-block; transition: background 1.2s ease-in-out; -moz-transition: background 1.2s ease-in-out; -webkit-transition: background 1.2s ease-in-out; } #footer { position:relative; height:10px; width:100%; background-color:green; } </style> </head> <body> <div id="header">foot</div> <div id="container"> <ul class="nav-fade"> <li>Home</li> <li>BlueShop</li> <li>About</li> </ul> content </div> <div id="footer">foot</div> </body> 測試網址在 http://ap.a168a.com/test/fade2.htm 本篇文章回覆於2014-05-05 23:22 == 簽名檔 == --未登入的會員無法查看對方簽名檔--

回覆

如要回應,請先登入.

1樓作者回應愛情藥	<body style="background:red;"> Test <div class="my_color" style="cursor:pointer;">change background color</div> </body> 本篇文章回覆於2014-05-02 10:27 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
2樓不錯的參考 min	你都幾乎寫完了，只是在$(document).ready(..做點處理而已: <script src="jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascript"> function SetCookie(name, value, expires, path, domain, secure) { var expDays = expires * 24 * 60 * 60 * 1000; var expDate = new Date(); expDate.setTime(expDate.getTime() + expDays); var expString = ((expires == null) ? "" : (";expires=" + expDate.toGMTString())) var pathString = ((path == null) ? "" : (";path=" + path)) var domainString = ((domain == null) ? "" : (";domain=" + domain)) var secureString = ((secure == true) ? ";secure" : "") document.cookie = name + "=" + escape(value) + expString + pathString + domainString + secureString; } function GetCookie(name) { var result = null; var myCookie = document.cookie + ";"; var searchName = name + "="; var startOfCookie = myCookie.indexOf(searchName); var endOfCookie; if (startOfCookie != -1) { startOfCookie += searchName.length; endOfCookie = myCookie.indexOf(";", startOfCookie); result = unescape(myCookie.substring(startOfCookie, endOfCookie)); } return result; } function ClearCookie(name) { var ThreeDays = 3 * 24 * 60 * 60 * 1000; var expDate = new Date(); expDate.setTime(expDate.getTime() - ThreeDays); document.cookie = name + "=;expires=" + expDate.toGMTString(); } </script> <script type="text/javascript"> function SetColor(hex) { $('body').css('background-color', hex); } function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s(\d+),\s(\d+)\)$/); return "#" + ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2); } $(document).ready(function () { var hex = GetCookie('BG_Menu'); SetColor(hex); $('.my_color1').click(function () { ClearCookie('BG_Menu'); var c = $(this).css('background-color'); SetCookie('BG_Menu', rgb2hex(c), '1', '', '', ''); c = GetCookie('BG_Menu'); SetColor(c); }); $('.my_color2').click(function () { ClearCookie('BG_Menu'); var c = $(this).css('background-color'); SetCookie('BG_Menu', rgb2hex(c), '1', '', '', ''); c = GetCookie('BG_Menu'); SetColor(c); }); }); </script> <body > <div class="my_color1" style="cursor:pointer;color:White;background-color:Black">Black</div> <div class="my_color2" style="cursor:pointer;color:White; background-color:Red">Red</div> </body> 本篇文章回覆於2014-05-02 15:49 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
3樓回應香帥	請參考如下程式碼 <body style="background:red;"> Test <div class="my_color" style="cursor:pointer;">change background to blue</div> </body> <script src="http://code.jquery.com/jquery-git.js"></script> //相關JS程式 <script> changeBG(GetCookie('BG_Menu')); //點選顏色後將資料存儲到Cookie $('.my_color').click(function(){ ClearCookie('BG_Menu'); SetCookie('BG_Menu','blue','1','','',''); alert(GetCookie('BG_Menu')); changeBG(GetCookie('BG_Menu')); }) function SetCookie(name,value,expires,path,domain,secure) { var expDays = expires2460601000; var expDate = new Date(); expDate.setTime(expDate.getTime()+expDays); var expString = ((expires==null) ? "" : (";expires="+expDate.toGMTString())); var pathString = ((path==null) ? "" : (";path="+path)); var domainString = ((domain=='') ? "" : (";domain="+domain)); var secureString = ((secure==true) ? ";secure" : "" ); document.cookie = name + "=" + escape(value) + expString + pathString + domainString + secureString; document.cookie = name + "=" + escape(value) + expString + pathString + domainString +secureString; } function GetCookie(name) { var result = null; var myCookie = document.cookie + ";"; var searchName = name + "="; var startOfCookie = myCookie.indexOf(searchName); var endOfCookie; if (startOfCookie != -1) { startOfCookie += searchName.length; endOfCookie = myCookie.indexOf(";",startOfCookie); result = unescape(myCookie.substring(startOfCookie, endOfCookie)); } return result; } function ClearCookie(name) { var ThreeDays=32460601000; var expDate = new Date(); expDate.setTime(expDate.getTime()-ThreeDays); document.cookie=name+"=;expires="+expDate.toGMTString(); } function changeBG(mycolor){ if (mycolor != null) document.body.style.backgroundColor=mycolor } </script> 測試網址在 http://ap.a168a.com/test/changebg.htm 本篇文章回覆於2014-05-02 15:53 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
4樓回應香帥	補充您原來第15,16行因為有傳入'',用null判斷會無法設定cookie 本篇文章回覆於2014-05-02 15:58 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
5樓回應香帥	更正4樓16行那行判斷要改為 domain=='' 不然的話就要給真正的domain值,cookie設定才會成功本篇文章回覆於2014-05-02 16:40 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
6樓作者回應愛情藥	大大，背景的問題解決了，可否請教另一個問題: 假設==> (1)我的暫存 Cookie = ”red“ (2)網站載入順序為 <1>Header.php //預設背景為藍色"blue" 顏色寫在檔名為 style.css 的檔案裡例如:<div class="header">Header </div> <2>Content.php //預設背景為藍色"blue" 顏色寫在檔名為 style.css 的檔案裡例如:<div class="content">content </div> <3>Footer.php //預設背景為藍色"blue" 顏色寫在檔名為 style.css 的檔案裡例如:<div class="footer">footer </div> 那載入時有先後順序的問題，又要如何讓<1><2><3>載入時直接出現紅色"Red", 而非＿＿[先出現預設值藍色Blue，然後載入cookie =紅色Red'] 這樣感覺螢幕會有閃跳的情況。謝謝~ 本篇文章回覆於2014-05-05 15:09 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
7樓回應 min	在載好之前先把他藏起來 http://stackoverflow.com/questions/2951053/how-do-i-hide-an-html-element-before-the-page-loads 本篇文章回覆於2014-05-05 17:45 == 簽名檔 == --未登入的會員無法查看對方簽名檔--
8樓最有價值解答香帥	請參考以下程式碼,將最大佔比的紅色用fadeIn方式會更漂亮 <script src="http://code.jquery.com/jquery-git.js"></script> <script> $(document).ready(function(){ $("#container").css('background-color','red'); }); </script> <head> <style type="text/css"> .nav-fade li { background: #fff; padding: 3px 8px; display: inline-block; transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out; } .nav-fade li:hover { background: #ddd; } #header { position:relative; width:100%; height:10%; background-color:blue; } #container { position:relative; width:100%; height:80%; background: #ffffff; padding: 3px 8px; display: inline-block; transition: background 1.2s ease-in-out; -moz-transition: background 1.2s ease-in-out; -webkit-transition: background 1.2s ease-in-out; } #footer { position:relative; height:10px; width:100%; background-color:green; } </style> </head> <body> <div id="header">foot</div> <div id="container"> <ul class="nav-fade"> <li>Home</li> <li>BlueShop</li> <li>About</li> </ul> content </div> <div id="footer">foot</div> </body> 測試網址在 http://ap.a168a.com/test/fade2.htm 本篇文章回覆於2014-05-05 23:22 == 簽名檔 == --未登入的會員無法查看對方簽名檔--