Question

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

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

我从JavaScript开始，但我的知识仍然很浅

预先感谢

Answer 1

让我们从显示HTML元素开始：

var SelVal = $( "#idSelect option:selected" ).val();

和一些CSS使其成为正方形：

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

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

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

Answer 2

为此解决方案

<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>

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

2 个答案: