1

ユーザーが自分の Web サイトの背景画像を変更できるようにしたいので、これを可能にするコードをいくつか見つけました。選択した画像の URL をテキストボックス (入力) に貼り付けることができます。

<script type="text/javascript">
function changebackground(){
    var url = document.getElementById('bgchanger').value;
    document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";
}
</script>

<input type="text" id="bgchanger" placeholder="Change Background Add URL" />
<input type="button" onclick="changebackground();" value="Change!" />

すべて機能しますが、ユーザーがサイトを離れるか、更新を押すと、背景画像が白に戻ります (デフォルト)

次回サイトにアクセスするときのために、ユーザーの背景画像を保存できないかと考えていました。

私はデモを作りました：

デモ: http://goo.gl/253IN

ユーザー名:デモ

パスワード: demo1

前もって感謝します！

PS 私は HTML と Javascript の専門家ではありません (まだ :D) ので、本当に複雑なコードを理解することはできません。

4

3 に答える 3

1

これを達成するには..ユーザーのコンピューターにCookieを配置し、Cookieが設定されているかどうかを確認して、その値を取得する必要があります...

これはクッキー用のjqueryプラグインです https://github.com/carhartl/jquery-cookie

まず、クッキーを作成します

$.cookie('background_image', url , { expires: 7 });// will expire in 7 days

次に、そのCookieが設定されているかどうかを確認します

if(typeof($.cookie('background_image')) != 'undefined'){
    var users_old_back_ground = $.cookie('background_image');
    $('body').css ({ "background-image" : "url('" + users_old_back_ground + "')"}); //jquery : selecting the body tag ... then using css() to set the bg
}else{
    // do something else because the user doesnt have the cookie 
}

以前のコードを強化し、プレーンな JavaScript の代わりに jquery を使用してみてください

于 2013-03-02T16:51:05.787 に答える
0

これを行う良い方法は、localStorage を使用することです。簡単に扱えるように jQuery プラグインを作成しました。例を見てみましょう。https://github.com/yckart/jquery.storage.js

于 2013-03-02T16:49:59.143 に答える
0

localStorage を試す

    var defaultImage = "http://...";
    document.getElementsByTagName('body')[0].style.backgroundImage = localStorage.getItem('back') ? "url('"+localStorage.getItem('back')+"')" : "url('"+defaultImage+"')";
  function changebackground(){
      var url =  document.getElementById('bgchanger').value;
      document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";
      localStorage.setItem('back',url);
    }
于 2013-03-02T16:54:58.747 に答える