Question

在我尝试过的任何网络项目中使用代码时，我有点像菜鸟和喜鹊。我现在还是新手。

目前我正在为我的办公室网络建立一个信息面板，它将位于Active桌面上（我们仍然与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，将值设置为背景，如果存在，则不使用输入的文本。

感激不尽的任何帮助。

Answer 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;
}

检索cookie以设置背景图像

1 个答案: