1. 首頁
  2. 問答
  3. 有人可以給我這個答案：

有人可以給我這個答案：

2016-05-22 72 views
0

我想知道：a。如何使用jQuery在選擇後使用cookie保存背景圖像，非常詳細地介紹如何使用jQuery，因爲我從來沒有這樣做過，或者b。如何使用普通的javascript爲它設置一個cookie，我已經有提示和文本的cookie，但圖像變得太複雜了。任何幫助將不勝感激！有人可以給我這個答案：

<script> 
 
    //alert(document.cookie); 
 
    function setCookie(cname, cvalue, exdays) { 
 
    var d = new Date(); 
 
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); 
 
    var expires = "expires=" + d.toGMTString(); 
 
    document.cookie = cname + "=" + cvalue + "; " + expires; 
 
    } 
 

 
function getCookie(cname) { 
 
    var name = cname + "="; 
 
    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); 
 
    } 
 
    if (c.indexOf(name) == 0) { 
 
     return c.substring(name.length, c.length); 
 
    } 
 
    } 
 
    return ""; 
 
} 
 

 
function checkCookie() { 
 
    var period_one = getCookie("period1"); 
 
    var period_two = getCookie("period2"); 
 
    var period_three = getCookie("period3"); 
 
    var period_four = getCookie("period4"); 
 
    var period_five = getCookie("period5"); 
 
    var period_six = getCookie("period6"); 
 
    var period_seven = getCookie("period7"); 
 
    var period_eight = getCookie("period8"); 
 
    var period_nine = getCookie("period9"); 
 
    if (period_one != "") { 
 
    document.getElementById('period1a').innerHTML = period_one; 
 
    document.getElementById('period1b').innerHTML = period_one; 
 
    //document.getElementById('period1c').innerHTML=period_one; 
 
    document.getElementById('period1d').innerHTML = period_one; 
 
    document.getElementById('period1e').innerHTML = period_one; 
 
    document.getElementById('period1f').innerHTML = period_seven; 
 
    document.getElementById('period1g').innerHTML = period_seven; 
 
    document.getElementById('period1h').innerHTML = period_seven; 
 
    document.getElementById('period1i').innerHTML = period_seven; 
 
    document.getElementById('period1j').innerHTML = period_seven; 
 
    document.getElementById('period1k').innerHTML = period_seven; 
 
    } 
 
    //alert("period one done"); 
 
    if (period_two != "") { 
 
    //alert("period 2 cookie"); 
 
    document.getElementById('period2a').innerHTML = period_two; 
 
    //document.getElementById('period2b').innerHTML=period_two; 
 
    document.getElementById('period2c').innerHTML = period_two; 
 
    document.getElementById('period2d').innerHTML = period_two; 
 
    document.getElementById('period2e').innerHTML = period_two; 
 
    document.getElementById('period2f').innerHTML = period_seven; 
 
    document.getElementById('period2g').innerHTML = period_seven; 
 
    document.getElementById('period2h').innerHTML = period_seven; 
 
    document.getElementById('period2i').innerHTML = period_seven; 
 
    document.getElementById('period2j').innerHTML = period_seven; 
 
    document.getElementById('period2k').innerHTML = period_seven; 
 
    } 
 
    if (period_three != "") { 
 
    document.getElementById('period3a').innerHTML = period_three; 
 
    document.getElementById('period3b').innerHTML = period_three; 
 
    document.getElementById('period3c').innerHTML = period_three; 
 
    //document.getElementById('period3d').innerHTML=period_three; \t 
 
    document.getElementById('period3e').innerHTML = period_three; 
 
    document.getElementById('period3f').innerHTML = period_seven; 
 
    document.getElementById('period3g').innerHTML = period_seven; 
 
    document.getElementById('period3h').innerHTML = period_seven; 
 
    document.getElementById('period3i').innerHTML = period_seven; 
 
    document.getElementById('period3j').innerHTML = period_seven; 
 
    document.getElementById('period3k').innerHTML = period_seven; 
 
    } 
 
    if (period_four != "") { 
 
    //document.getElementById('period4a').innerHTML=period_four; 
 
    document.getElementById('period5b').innerHTML = period_four; 
 
    document.getElementById('period5c').innerHTML = period_four; 
 
    document.getElementById('period5d').innerHTML = period_four; 
 
    document.getElementById('period5e').innerHTML = period_four; 
 
    } 
 
    if (period_five != "") { 
 
    //document.getElementById('period5a').innerHTML=period_five; 
 
    document.getElementById('period5b').innerHTML = period_five; 
 
    //document.getElementById('period5c').innerHTML=period_five; 
 
    document.getElementById('period5d').innerHTML = period_five; 
 
    document.getElementById('period5e').innerHTML = period_five; 
 
    document.getElementById('period5f').innerHTML = period_seven; 
 
    document.getElementById('period5g').innerHTML = period_seven; 
 
    document.getElementById('period5h').innerHTML = period_seven; 
 
    document.getElementById('period5i').innerHTML = period_seven; 
 
    //document.getElementById('period5j').innerHTML=period_seven; \t 
 
    document.getElementById('period5k').innerHTML = period_seven; 
 
    } 
 
    if (period_six != "") { 
 
    document.getElementById('period6a').innerHTML = period_six; 
 
    //document.getElementById('period6b').innerHTML=period_six; 
 
    document.getElementById('period6c').innerHTML = period_six; 
 
    //document.getElementById('period6d').innerHTML=period_six; \t \t 
 
    document.getElementById('period6e').innerHTML = period_six; 
 
    document.getElementById('period6f').innerHTML = period_seven; 
 
    document.getElementById('period6g').innerHTML = period_seven; 
 
    document.getElementById('period6h').innerHTML = period_seven; 
 
    document.getElementById('period6i').innerHTML = period_seven; 
 
    //document.getElementById('period6j').innerHTML=period_seven; \t 
 
    document.getElementById('period6k').innerHTML = period_seven; 
 
    } 
 
    if (period_seven != "") { 
 
    //document.getElementById('period7a').innerHTML=period_seven; 
 
    document.getElementById('period7b').innerHTML = period_seven; 
 
    document.getElementById('period7c').innerHTML = period_seven; 
 
    //document.getElementById('period7d').innerHTML=period_seven; \t 
 
    document.getElementById('period7e').innerHTML = period_seven; 
 
    document.getElementById('period7f').innerHTML = period_seven; 
 
    document.getElementById('period7g').innerHTML = period_seven; 
 
    document.getElementById('period7h').innerHTML = period_seven; 
 
    document.getElementById('period7i').innerHTML = period_seven; 
 
    //document.getElementById('period7j').innerHTML=period_seven; \t 
 
    document.getElementById('period7k').innerHTML = period_seven; 
 
    } 
 
    if (period_eight != "") { 
 
    document.getElementById('period8a').innerHTML = period_eight; 
 
    document.getElementById('period8b').innerHTML = period_eight; 
 
    //document.getElementById('period8c').innerHTML=period_eight; 
 
    document.getElementById('period8d').innerHTML = period_eight; 
 
    document.getElementById('period8e').innerHTML = period_eight; 
 
    document.getElementById('period8f').innerHTML = period_eight; 
 
    document.getElementById('period8g').innerHTML = period_eight; 
 
    document.getElementById('period8h').innerHTML = period_eight; 
 
    document.getElementById('period8i').innerHTML = period_eight; 
 
    document.getElementById('period8j').innerHTML = period_eight; 
 
    document.getElementById('period8k').innerHTML = period_eight; 
 
    } 
 
    if (period_nine != "") { 
 
    document.getElementById('period9a').innerHTML = period_nine; 
 
    //document.getElementById('period9b').innerHTML=period_nine; 
 
    document.getElementById('period9c').innerHTML = period_nine; 
 
    document.getElementById('period9d').innerHTML = period_nine; 
 
    document.getElementById('period9e').innerHTML = period_nine; 
 
    document.getElementById('period9f').innerHTML = period_nine; 
 
    document.getElementById('period9g').innerHTML = period_nine; 
 
    document.getElementById('period9h').innerHTML = period_nine; 
 
    document.getElementById('period9i').innerHTML = period_nine; 
 
    document.getElementById('period9j').innerHTML = period_nine; 
 
    document.getElementById('period9k').innerHTML = period_nine; 
 
    } 
 
} 
 

 
function setClass(class_period) { 
 
    var class_period = class_period; 
 

 
    dialog(); 
 

 
    function dialog() { 
 
     var class_name = prompt('Which class do you have period ' + class_period + '?'); 
 
     if (class_name.length > 15) { 
 
     alert("Please limit the length to 15 characters") 
 
     dialog(); 
 
     } else 
 
     var new_class = "period" + class_period; 
 

 
     //alert(new_class+' '+class_name); 
 
     setCookie(new_class, class_name, 30); 
 
     document.getElementById(new_class + 'a').innerHTML = class_name; 
 
     document.getElementById(new_class + 'b').innerHTML = class_name; 
 
     document.getElementById(new_class + 'c').innerHTML = class_name; 
 
     document.getElementById(new_class + 'd').innerHTML = class_name; 
 
     document.getElementById(new_class + 'e').innerHTML = class_name; 
 
     document.getElementById(new_class + 'f').innerHTML = class_name; 
 
     document.getElementById(new_class + 'g').innerHTML = class_name; 
 
     document.getElementById(new_class + 'h').innerHTML = class_name; 
 
     document.getElementById(new_class + 'i').innerHTML = class_name; 
 
     document.getElementById(new_class + 'j').innerHTML = class_name; 
 
     document.getElementById(new_class + 'k').innerHTML = class_name; 
 
    } 
 
    } 
 
    //function Close1(){ 
 
    // document.getElementById('CA').style.display = "none"; 
 
    // document.getElementById('CB').style.display = "none"; 
 
    // document.getElementById('CC').style.display = "none"; 
 
    // document.getElementById('CD').style.display = "none"; 
 
    // document.getElementById('CE').style.display = "none"; 
 
    // document.getElementById('CF').style.display = "none"; 
 
    // document.getElementById('CG').style.display = "none"; 
 
    //} 
 
    < /script> 
 
<script type="text/javascript 
 
"> 
 
function B1(){ 
 
\t document.body.style = " 
 
background - color: #ccc; 
 
" 
 
} 
 
function P1(){ 
 
\t document.body.style = " 
 
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/light-tile.gif'); 
 
" 
 
} 
 
function P2(){ 
 
\t document.body.style = " 
 
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/charcoal.gif'); 
 
" 
 
} 
 
function P3(){ 
 
\t document.body.style = " 
 
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/foundation.gif'); 
 
" 
 
} 
 
function P4(){ 
 
\t document.body.style = " 
 
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/presence.png'); 
 
" 
 
} 
 
function P5(){ 
 
\t document.body.style = " 
 
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/images/skulls.png'); 
 
" 
 
} 
 
function P6(){ 
 
\t document.body.style = " 
 
background - image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/images/grey_wash_wall.png'); 
 
" < /script>
@charset "utf-8"; 
 
.textures1 { 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    width: 35%; 
 
    height: 10%; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    font-size: 35px; 
 
} 
 
#PairOne { 
 
    border: 2px solid gray; 
 
    float: left; 
 
    background-color: #FFF; 
 
    padding: 15px; 
 
    margin-bottom: 25px; 
 
    box-shadow: 5px 5px 5px #888888; 
 
    height: 300px; 
 
    width: 25%; 
 
    margin-left: 5%; 
 
    margin-right: 0%; 
 
    border-radius: 50px; 
 
    background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/light-tile.gif'); 
 
} 
 
#PairTwo { 
 
    border: 2px solid gray; 
 
    float: right; 
 
    background-color: #FFF; 
 
    padding: 15px; 
 
    margin-bottom: 25px; 
 
    box-shadow: 5px 5px 5px #888888; 
 
    height: 300px; 
 
    width: 25%; 
 
    margin-right: 5%; 
 
    border-radius: 50px; 
 
    background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/charcoal.gif'); 
 
} 
 
#PairThree { 
 
    border: 2px solid gray; 
 
    float: none; 
 
    background-color: #FFF; 
 
    padding: 15px; 
 
    margin-bottom: 25px; 
 
    box-shadow: 5px 5px 5px #888888; 
 
    height: 300px; 
 
    width: 25%; 
 
    border-radius: 50px; 
 
    background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/foundation.gif'); 
 
} 
 
#PairFour { 
 
    border: 2px solid gray; 
 
    float: left; 
 
    background-color: #FFF; 
 
    padding: 15px; 
 
    margin-top: auto; 
 
    margin-bottom: 25px; 
 
    box-shadow: 5px 5px 5px #888888; 
 
    height: 300px; 
 
    width: 25%; 
 
    margin-left: 5%; 
 
    border-radius: 50px; 
 
    background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/patterns/presence.png'); 
 
} 
 
#PairFive { 
 
    border: 2px solid gray; 
 
    float: right; 
 
    background-color: #FFF; 
 
    padding: 15px; 
 
    margin-top: auto; 
 
    margin-bottom: 25px; 
 
    box-shadow: 5px 5px 5px #888888; 
 
    height: 300px; 
 
    width: 25%; 
 
    margin-right: 5%; 
 
    border-radius: 50px; 
 
    background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/images/skulls.png'); 
 
} 
 
#PairSix { 
 
    border: 2px solid gray; 
 
    background-color: #FFF; 
 
    padding: 15px; 
 
    margin-top: auto; 
 
    margin-bottom: 25px; 
 
    box-shadow: 5px 5px 5px #888888; 
 
    height: 300px; 
 
    width: 25%; 
 
    border-radius: 50px; 
 
    background-image: url('https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/textures/images/grey_wash_wall.png'); 
 
} 
 
#PairSeven { 
 
    border: 2px solid gray; 
 
    background-color: #FFF; 
 
    padding: 15px; 
 
    margin-top: auto; 
 
    margin-bottom: 25px; 
 
    box-shadow: 5px 5px 5px #888888; 
 
    height: 300px; 
 
    width: 50%; 
 
    -webkit-border-top-left-radius: 2em; 
 
    -webkit-border-top-right-radius: 2em; 
 
    -webkit-border-bottom-right-radius: 5em; 
 
    -webkit-border-bottom-left-radius: 5em; 
 
    background-color: #ccc; 
 
}
<!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=UTF-8"> 
 

 
    <meta id="viewport" name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
 
    <title>HP Bells</title> 
 
    <link rel="icon" href="https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/Bell-icon.png"> 
 
    <link href="https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/large-device.css" rel="stylesheet" type="text/css"> 
 
    <link href="https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/small-device.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body onload="checkCookie()"> 
 
    <!--Form start--> 
 
    <div id="form" class="form"> 
 
    <div class="period"> 
 
     <p style="background-color: #ff0000;" class="button" id="period1e" onclick="setClass(&#39;1&#39;);">1</p> 
 
     <p style="background-color: #ff0000;" class="button" id="period2e" onclick="setClass(&#39;2&#39;);">2</p> 
 
     <p style="background-color: #ff0000;" class="button" id="period3e" onclick="setClass(&#39;3&#39;);">3</p> 
 
     <p style="background-color: #ff0000;" class="button" id="period4e" onclick="setClass(&#39;4&#39;);">4</p> 
 
     <p style="background-color: #ff0000;" class="button" id="period5e" onclick="setClass(&#39;5&#39;);">5</p> 
 
     <p style="background-color: #ff0000;" class="button" id="period6e" onclick="setClass(&#39;6&#39;);">6</p> 
 
     <p style="background-color: #ff0000;" class="button" id="period7e" onclick="setClass(&#39;7&#39;);">7</p> 
 
     <p style="background-color: #ff0000;" class="button" id="period8e" onclick="setClass(&#39;8&#39;);">8</p> 
 
     <p style="background-color: #ff0000;" class="button" id="period9e" onclick="setClass(&#39;9&#39;);">9</p> 
 
    </div> 
 
    </div> 
 
    <!--Form end--> 
 
    <!--End last day--> 
 
    <div id="footer"> 
 
    <h1>HP Bells</h1> 
 
    <div class="image-wrapper"> 
 
     <img src="https://cce833b91e811adae55f3df28bdf8619568433c8.googledrive.com/host/0BzMImB5PZZJHdGRDeS1rck5JQjg/logo.png" class="scale-image"> 
 
    </div> 
 
    <div> 
 
     <!--Textures--> 
 
     <h1>Click to change wallpaper</h1> 
 
     <link href="texture.css" rel="stylesheet" type="text/css" /> 
 
     <div id="container"> 
 
     <div class="textures1" id="PairOne" onclick="P1(); AB2();"> 
 
      <h1>&nbsp;</h1> 
 
     </div> 
 
     <div class="textures1" id="PairTwo" onclick="P2(); AB1();"> 
 
      <h1>&nbsp;</h1> 
 
     </div> 
 
     <div class="textures1" id="PairThree" onclick="P3(); AB2();"> 
 
      <h1>&nbsp;</h1> 
 
     </div> 
 
     <div class="textures1" id="PairFour" onclick="P4(); AB1();"> 
 
      <h1>&nbsp;</h1> 
 
     </div> 
 
     <div class="textures1" id="PairFive" onclick="P5(); AB2();"> 
 
      <h1>&nbsp;</h1> 
 
     </div> 
 
     <div class="textures1" id="PairSix" onclick="P6(); AB1();"> 
 
      <h1>&nbsp;</h1> 
 
     </div> 
 
     <div class="textures1" id="PairSeven" onclick="B1(); AB2();"> 
 
      <h1>&nbsp;</h1> 
 
     </div> 
 
     </div> 
 
     <a href="http://hpregional.org/">High Point's Website</a> 
 
     <!--End textures--> 
 
    </div> 
 
    <!--End footer--> 
 
    </div> 
 
    <!-- end container --> 
 
</body> 
 

 
</html>

來源

2016-05-22 acars123

回答

0

通過「保存背景圖像」，如果你的意思是你要存儲在用戶的檢索瀏覽器的圖像後，然後一個cookie不會做。每個域的cookie的最大大小是4093 bytes。你可以做的只是存儲對圖像的引用，而不是像圖像的URL或文件名那樣，以後可以用來確定用戶的選擇。

如果您堅持將圖像存儲在用戶的瀏覽器中，請改爲使用localStorage。您可以查看How to save an image to localStorage and display it on the next page?瞭解如何做到這一點的想法。雖然請記住localStorage的最大尺寸爲10mb。

來源

2016-05-22 14:22:58 kevinto

相關問題

 相關問題