如何使用JS随机更改HTML内容

Posted 2023-02-28

如何使JS随机更改网站的内容（html / CSS）并将其存储在缓存中？

假设我想在页面中显示两个HTML块。一个是内部编号为1的红色，另一个是内部编号为0的绿色。我想让它在页面加载时随机显示，一次是绿色，另一次是红色。

我从javascript开始，我的知识仍然很浅薄

提前致谢

答案

让我们从一个要显示的HTML元素开始：

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

还有一些CSS使它成为一个正方形：

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

要在JavaScript中操作它，我们可以：

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

另一答案

为您的解决方案这样做

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
    .page 
        width: 200px;
        height: 200px;
    
</style>
<div class="page"></div>


<script>
    var pageMeta =new Array([],[]);
    pageMeta[0]['data']='page 0';
    pageMeta[0]['color']='red';
    pageMeta[1]['data']='page 1';
    pageMeta[1]['color']='green';

    var curentPage = localStorage['curentPage'];
    if (!curentPage) 
        curentPage=Math.floor(Math.random() * 2);
        localStorage['curentPage'] = curentPage;
    

    page(curentPage);

    function page(a) 
        $(".page").html(pageMeta[a]['data']);
        $(".page").css('background-color',pageMeta[a]['color']);
    
</script>