javascript - 如何使用 HTML5 刮刮卡渲染随机背景

Question

我正在使用 HTML5 刮刮卡插件，但不知道如何使用 javascript 渲染随机背景。这是代码

window.onload = function() {
            createScratchCard({
                'container':document.getElementById('circle'),
                'background':'assets/images/demo2-circle-background.png',
                'foreground':'assets/images/demo2-circle-foreground.png',
                'percent':100,
                'coin':'assets/images/coin2.png',
                'thickness':18,
            });
        }

因此，使用这种默认结构，我如何渲染随机 2、3 个图像并每次显示一个，随机显示>

Answer 1

您可以将所有文件的名称设置为一个数组，然后每次随机选择一个。

为了确保您的用户每次访问您的页面时不会获得相同的值，唯一的解决方案是将其保存在他们身边的某个位置。为此，您可以使用 cookies ，或如上例中选择的 localStorage :

window.onload = function() {
  // declare your file names
  var theFiles = ["foo.png", "bar.png", "baz.png"];
  // get the saved number we got
  var previous = localStorage.getItem('rolledDices');
  if(previous){
     // parse them and remove them from our array
     var p = previous.split(' ');
     if(p.length-1<theFiles.length){
       p.forEach(function(i){if(i!=='')theFiles.splice(theFiles.indexOf(i),1)})
       }
     // clear the storage if we got all of them
     else{
        previous='';
        }
     }
  // get a new random value from our array
  var randomFn = theFiles[Math.floor(Math.random()*theFiles.length)];
  // add it to the list of saved ones
  localStorage.setItem('rolledDices', (previous||'')+' '+randomFn);

  createScratchCard({
    'container':document.getElementById('circle'),
    'background':'assets/images/'+randomFn,
    'foreground':'assets/images/demo2-circle-foreground.png',
    'percent':100,
    'coin':'assets/images/coin2.png',
    'thickness':18,
    });
  }