4

私が試したWebプロジェクトでコードを使用することになると、私は少し初心者でカササギです。私はまだここでゲームを始めたばかりです。

現在、アクティブ デスクトップ上にあるオフィス ネットワーク用の情報パネルを作成しています (ここではまだ IE8 に接続しているため、使用できる最新のものは何もありません!)

私が望むのは、ユーザーがデスクトップに情報パネルを全画面表示し、タグの背景を目的の画像に設定できる機能です。

現在、私は（非常に生の形で）持っています

<script type="text/javascript">

function setBackgroundImage()
{
    var url = document.getElementById('bgchanger').value;
    document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";
    setCookie('userbg', url, 30);
}

</script>

<body onload="setBackgroundImage()" id="bg">

<input type="file" value ="Look" name="myFileSelect" input type="text" id="bgchanger" placeholder="Change Background Add URL" />
<input type="button" onclick="setBackgroundImage();" value="Change!" />

これにより、ユーザーの画像選択と Cookie の設定が可能になります。

私が知らないビットは、それを取得して設定する方法です。

明らかに、Cookie をチェックし、値を背景として設定し、入力されたテキストが存在する場合は使用しないようにするために、いくつかの論理的なものが必要です。

感謝して受け取った助け。

4

1 に答える 1

1

これがコードのjsfiddleです。ページを更新すると Cookie は削除されますが、[実行] を複数回クリックしても問題ありません。

ここにHTMLがあります

<div id="image-form">
  <label for="url">Image URL</label>
  <input type="text" id="url" value="http://stylegerms.com/wp-content/uploads/2013/06/Techno-Desktop-backgrounds-Desktop-Wallpaper.jpg" />
  <input type="button" value="Update" onclick="updateURL()" />
</div>
<!-- Place the JavaScript before </body> -->

必要な JavaScript は次のとおりです。

window.onload = function() {
  setBackground();
}

function updateURL() {
  var newURL = document.getElementById('url').value;
  setCookie('URL', newURL, 365);
  document.body.style.background = 'url('+newURL+') no-repeat';
  document.body.style.backgroundSize = 'cover';
  document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = newURL;
  document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
}

function setBackground() {
  var URL = getCookie('URL');
  document.body.style.background = 'url('+URL+') no-repeat';
  document.body.style.backgroundSize = 'cover';
  document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = URL;
  document.body.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
}

function setCookie(c_name, value, exdays) {
  var exdate=new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name) {
  var c_value = document.cookie;
  var c_start = c_value.indexOf(" " + c_name + "=");

  if (c_start == -1)
    c_start = c_value.indexOf(c_name + "=");

  if (c_start == -1) {
    c_value = null;
  } else {
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);

    if (c_end == -1)
      c_end = c_value.length;

    c_value = unescape(c_value.substring(c_start,c_end));
  }
  return c_value;
}

そして、ここにちょっとしたCSSがあります

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
    background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') no-repeat;
    background-size: cover;

    -ms-filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", sizingMethod="scale")';
}

#image-form {
  display: inline-block;
  background: #fff;
  padding: 10px;
}
于 2013-09-06T13:37:23.407 に答える