Question

我的意思是＆＃39;一直在改变＆＃39;？好吧，例如，在Windows 8安装屏幕上，您会看到中间的文字显示：＆＃39;您可以从商店获得新的应用程序，背景正在从红色变为橙色，从黄色变为绿色从青色到蓝色到紫色再到红色。我的意思是，我如何使用JavaScript对我的HTML背景做到这一点？

Answer 1

最简单，最有效和最短的代码量是使用一些CSS和JS

来完成的

CSS：

function randomColor() {
    return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6)
}

然后你可以在数组中设置一些颜色并在需要时调用它们，或者经常使用，或使用下面的函数生成随机颜色。

JS：

function randomColor() {
    return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6)
}

function setColor(){
    document.getElementById('myDiv').style.backgroundColor = randomColor();
    setTimeout(setColor, 2000);
}
setColor();

这是一个每2秒生成随机颜色的小提琴

https://jsfiddle.net/mLyyxmr1/2/

    #myDiv {
        background-color: red;
        transition: background-color 2s;
    }

<div id='myDiv' style='width:200px;height:200px;'>
    
</div>

  public Card(int rank, int suit)
  {
     super(50,70,TYPE_INT_ARGB);
     this.rank = rank;
     this.suit = suit;
     try{bi = ImageIO.read(getClass().getResource(toString()+".png"));
     back = ImageIO.read(getClass().getResource("back.png"));}
     catch(IOException e){e.printStackTrace();}
     Graphics2D g = createGraphics();
     g.drawImage(back,0,0,null);
     g.dispose();
  }

  public void flip(boolean faceup)
  {
     this.faceup = faceup;
     Graphics2D g = createGraphics();
     if(faceup)g.drawImage(bi,0,0,null);
     else g.drawImage(back,0,0,null);
     g.dispose();
  }

Answer 2

您可以制作一个图像数组，并使用此

选择一个随机图像

var images = ['Imag1','Imag2','Imag3','Imag4',];
var random = images[Math.floor(Math.random() * randomarray.length)];

然后使用SetInterval并根据您的需要每10秒或20秒再次完成整个过程。

Answer 3

我建议学习HTML5 Canvas吗？您将能够完成所需的一切+更多。

Answer 4

如果你想改变颜色，这里是我写的一个脚本，用于使用CSS过渡产生天空效果。

它确实在目标元素上创建了一个新的div并应用于径向渐变。然后将上面一个的不透明度更改为0，显示背景一，而前景一个更改值。它确实产生平滑的过渡效果。

您可以以数组的形式传递限制颜色，以数字的形式传递速度变量，以及传递目标元素的ID。
您也可以省略所有这些参数。

我很久以前写过它，它可能需要很多改进，但我希望你可以对它进行修改并使它对你有用：

function Sky() {
  var sky = {};

  function rand(x) {
    if (!x) x = 1;
    return Math.round(Math.random() * x);
  }

  var isArray = function(arr) {
    if (isArray in Array) return Array.isArray(arr);
    else return arr instanceof Array;
  }

  var Chuck = function(arr) {
    var total = 0;
    arr.forEach(function(e) {
      total += e
    })
    return (total / arr.length == 0 || total / arr.length == 255);
  }

  function nightDay() {
    var RGB = sky.RGB;
    var shouldChange = Chuck(RGB);
    if (shouldChange) sky.toNight = !sky.toNight;
    for (var i = 0; i < RGB.length; i++) {
      RGB[i] += (sky.toNight) ? 10 : -10;
      if (RGB[i] < 0) {
        RGB[i] = 0;
      }
      if (RGB[i] > 255) {
        RGB[i] = 255;
      }
    }

    return "radial-gradient( " +
      "rgba(" + (rand(RGB[0]) + RGB[1]) + " ," + (rand(RGB[2]) + RGB[3]) + " ," + rand(RGB[4] + RGB[5]) + ", 0.9) " + rand(25) + "%, " +
      "rgba(" + (rand(RGB[6]) + RGB[7]) + " ," + (rand(RGB[8]) + RGB[9]) + " ," + (rand(RGB[10]) + RGB[11]) + ", 0.9) " + (rand(25) + 500) + "%) " +
      "rgba(0, 0, 0, 0) repeat scroll " + rand(50) + "px " + rand(50) + "px / cover";
  }


  function changeOp(e) {
    var val = nightDay();
    var op = +sky.over.style.opacity;
    if (op > 0) {
      // First div is opaque
      if (!sky.isWebkit) {
        sky.el.style.background = val;
        if (!sky.el.style.background)
          sky.isWebkit = true;
      }
      if (sky.isWebkit)
        sky.el.style.background = "-webkit-" + val;
    } else {
      //first div is transparent
      if (!sky.isWebkit)
        sky.over.style.background = val;
      else
        sky.over.style.background = "-webkit-" + val;
    };
    sky.over.style.opacity = +!op;
  };

  function setCSS() {
    if (sky.el.parentNode) sky.el.parentNode.style.position = 'relative';
    var hasHeight = parseInt(getComputedStyle(sky.el.parentNode).height) > 0;
    sky.el.style.height = hasHeight ? "100%" : "100vh";
    sky.el.style.overflow = 'auto';
    sky.el.style.width = hasHeight ? "100%" : "100vh";
    sky.el.style.margin = "0";
    sky.el.style.zIndex = -2;
    sky.el.webkitTransform = 'translate3d(0,0,0);'
    sky.el.transform = 'translate3d(0,0,0);'
    sky.over = document.createElement('div');
    sky.el.insertBefore(sky.over, sky.el.firstChild);
    sky.over.setAttribute('style', 'z-index: -1; position: absolute; pointer-events:none; height:100%; width:100%; opacity:1; -webkit-transition : opacity linear ' + sky.speed / 1000 + 's; transition : opacity linear ' + sky.speed / 1000 + 's;');
    if (sky.el === document.body) {
      sky.over.style.position = 'fixed';
      sky.over.style.top = 0;
    }
  }

  sky.stop = function() {
    sky.over.removeEventListener('transitionend', changeOp, false);
  }

  sky.start = function() {
    sky.over.addEventListener('transitionend', changeOp, false);
    changeOp();
  }

  function checkLength(arr) {
    if (arr.length < 13) {
      for (var i = arr.length - 1; i < 13; i++) arr[i] = 0;
    };
  }

  function init(args) {
    for (var a = 0; a < args.length; a++) {
      switch (typeof(args[a])) {
        case "string":
          var getEl = document.getElementById(args[a]);
          sky.el = getEl || document.body;
        case "number":
          sky.speed = args[a];
        case "object":
          if (isArray(args[a])) {
            sky.RGB = args[a];
            checkLength(sky.RGB);
          };
        case "boolean":
          sky.auto = args[a];
      }
    }
    if (!sky.el) sky.el = document.body;
    if (!sky.speed) sky.speed = 9000;
    if (!sky.RGB) sky.RGB = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    if (sky.auto === undefined) sky.auto = true;
    if (sky.el.style.opacity === undefined) {
      var RGB = sky.RGB;
      sky.el.style.backgroundColor = "rgb(" + (rand(RGB[0]) + RGB[1]) + " ," + (rand(RGB[2]) + RGB[3]) + " ," + rand(RGB[4] + RGB[5]) + ")";
      return;
    }
    setCSS();
    if (sky.auto)
      sky.start();
    setTimeout(changeOp, 200);
  }
  init(arguments);
  return sky;
}

new Sky([255, 120, 255, 120, 255, 120, 255, 120, 255, 120, 255, 120], 5000);

#content{width:100vw; height: 100vh}

<div id="content">Here is some content</div>

Answer 5

在这里，您可以根据需要使用和自定义代码。

 <html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js">       </script>

    <script type="text/javascript">
       var num;
       var temp=0;
       var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */
       var preloads=[];

    /* add any number of images here */

    preload(
            'uploads/bg1.jpg',
            'uploads/bg2.jpg',
            'uploads/bg3.jpg'
           );

    function preload(){

    for(var c=0;c<arguments.length;c++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[c];
      }
     }

    function rotateImages() {
       num=Math.floor(Math.random()*preloads.length);
    if(num==temp){
       rotateImages();
     }
    else {
       document.body.style.backgroundImage='url('+preloads[num].src+')';
       temp=num;

    setTimeout(function(){rotateImages()},speed);
      }
     }

    if(window.addEventListener){
       window.addEventListener('load',rotateImages,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',rotateImages);
      }
     }
    </script>

</head>
<body>

<div>
</div>

</body>
</html>

将预加载中的图像路径更改为图像。

使HTML背景始终在变化

5 个答案: