javascript - 如何使用JS使HTML内容随机变化

Question

如何让JS随机改变网站的内容(HTML/CSS)并存储在缓存中？

假设我有两个 HTML block 想要在页面中显示。一种是红色，里面有数字1，另一种是绿色，里面有数字0。我想让它在页面加载时随机显示，一次显示绿色，另一次显示红色。

我刚开始接触JavaScript，知识还很浅

提前致谢

Answer 1

让我们从要显示的 HTML 元素开始:

<div id="result"></div>

还有一些 CSS 使其成为正方形:

#result {
  width: 10em;
  height: 10em;
}

要在 JavaScript 中操作 this，我们可以:

var myValue = localStorage['myKey'] // try to access our stored value

if (!myValue) { // our stored value did not exist
  myValue = Math.random(); // get a number in the range [0, 1)
  localStorage['myKey'] = myValue; // save our value to storage
}

display(myValue);

function display(v) {
  var color;
  var num;
  if (v > 0.5) {
    color = 'red';
    num = 1;
  }
  else {
    color = 'green';
    num = 0;
  }  
  var myDiv = document.getElementById('result') // get our div
  myDiv.innerText = num; // set the text to 1 or 0
  myDiv.style.backgroundColor = color; // full list of properties here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
}