2

这是一个网页，您可以在其中从三个单选按钮中选择背景图片。我想将选择的一个保存在本地存储中，所以当页面刷新时，最后选择的背景图像会出现。事实并非如此，我不明白为什么，你呢？提前致谢 ：）

 <!DOCTYPE html>
    <html manifest="my.manifest">
    <head>
    <script src="modernizr.js"></script> 

    <script>
    function setBg() {
        myForm = document.getElementById("bgList");
        for (var i = 0; i < myForm.land.length; i++) {
            if (myForm.land[i].checked) {
                break
            }
        }
        document.body.style.backgroundImage="url('" + myForm.land[i].value + "')";

        if (Modernizr.localstorage) { 
            localStorage.setItem("background", i); 
            //alert(localStorage.getItem("background"));
        }
        else{
            alert("Can not be saved to localstorage!");
        }
    }
    </script>
    </head>

    <body>

    // Sørger for å velge et bakgrunnsbilde når siden lastes
    <script src="modernizr.js">
        window.onload = function(e){
            mittLand = 0;
            if (localStorage.getItem("background") != null) {
                mittLand = parseInt(localStorage.getItem("background")); 
                alert(mittLand); 
            }
            myForm = document.getElementById("bgList");
            myForm.land[mittLand].checked=true;
            setBg();
        }
    </script>

    <form id="bgList">
        <h1>Velg ditt favorittland</h1>
        <input type="radio" name="land" value="norge.png" onClick="setBg()">Norge</input>
        <input type="radio" name="land" value="sverige.png" onClick="setBg()">Sverige</input>
        <input type="radio" name="land" value="danmark.png" onClick="setBg()">Danmark</input>
    </form>

    </body>
    </html>
4

1 回答 1

1

I don't understand what part doesn't work? the alert display the selected option correctly, but since you are doing the alert before you set the background then the background is not style at the time of the alert, after you press the alert the image is set correctly.

<!DOCTYPE html>
<html>
<head>
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>

    <script>
        function setBg() {
            myForm = document.getElementById("bgList");
            for (var i = 0; i < myForm.land.length; i++) {
                if (myForm.land[i].checked) {
                    break
                }
            }
            document.body.style.backgroundImage="url('" + myForm.land[i].value + "')";

            if (Modernizr.localstorage) {
                localStorage.setItem("background", i);
                //alert(localStorage.getItem("background"));
            }
            else{
                alert("Can not be saved to localstorage!");
            }
        }
    </script>
</head>

<body>

// Sørger for å velge et bakgrunnsbilde når siden lastes
<script>
    window.onload = function(e){
        mittLand = 0;
        if (localStorage.getItem("background") != null) {
            mittLand = parseInt(localStorage.getItem("background"));
            alert(mittLand);
        }
        myForm = document.getElementById("bgList");
        myForm.land[mittLand].checked=true;
        setBg();
    }
</script>

<form id="bgList">
    <h1>Velg ditt favorittland</h1>
    <input type="radio" name="land" value="norge.png" onClick="setBg()">Norge</input>
    <input type="radio" name="land" value="sverige.png" onClick="setBg()">Sverige</input>
    <input type="radio" name="land" value="danmark.png" onClick="setBg()">Danmark</input>
</form>

</body>
</html>

Tried this code it works. Updated with modernizr

于 2013-03-26T23:50:47.927 回答