2014-06-05 3 views
0

HTML과 쿠키로 드롭 다운 메뉴 선택을 저장 :기본 CSS 디자인, 자바 스크립트

<select name="change" id="change"> 

    <option value="1">Design 1</option> 
    <option value="2">Design 2</option> 
    <option value="3">Design 3</option> 
    <option value="4">Design 4</option> 

    </select> 

JS : 나는 당신이 네 가지를 선택할 수있는 사이트를 만들려고 노력했습니다

function createCookie(name,value,days) { 

    var expires = ""; 
     if (days) { 
      var date = new Date(); 
      date.setTime(date.getTime()+(days*24*60*60*1000)); 
      expires = "; expires="+date.toGMTString(); 
     } 
     document.cookie = name+"="+value+expires+"; path=/"; 
    } 

function readCookie(name) { 

    var nameEQ = name + "="; 
    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(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
      } 
      return null; 
    } 

function chooseStyle() { 

    var title = document.getElementById("change").value; 
    var links = document.getElementsByTagName("link"); 
     createCookie("style", title, 30); 

    for(i = 0; i < links.length; i++) { 
    var a = links[i]; 
      if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { 
       a.disabled = true; 
      if(a.getAttribute("title") == title) a.disabled = false; 
       } 
      } 
    } 


function init() 
{ 
var styleCookie = document.getElementById("change"); 
     styleCookie.onchange = chooseStyle; 

    var style = readCookie("style"); 

    if (style !== null){ 
      document.getElementById("change").value = style; 
     } 
     chooseStyle(); 

} 
window.onload = init; 

드롭 다운 메뉴를 통해 다른 CSS 디자인을 선택한 다음 쿠키 또는 로컬 저장소로 저장되므로 사이트를 다시 방문 할 때 디자인이 동일하게 유지됩니다.

내가 처음에는 페이지를 방문했을 때 기본 디자인 (디자인 1)을로드 할 것을 제안했지만 도움이되지 않는다고 생각합니다. 정말 조언을 좀 주셔서 감사합니다! 당신의 초기화에

답변

0

당신은 단지 다른 추가 할 수 있습니다

if (style !== null){ 
    document.getElementById("change").value = style; 
} else { 
    document.getElementById("change").value = "1"; 
}