js中怎么让一个随机数在进入网页中只随机一次

Posted 2023-04-28

function didi()
var a=document.getElementById("t1").value;
var c=Math.floor(Math.random()*11);//我只想这个随机数在网页运行的时候运行一次；
if(a==c)
alert("恭喜你，答对了");
else if(a<c)
alert("太小了");
else if(a>c)
alert("太大了");

你好，

根据你的需求描述，我的理解是“当进入（刷新）页面时，如果随机数不存在，则创建随机数，否则使用已存在的数字”。

如果是这样，那可以考虑使用本地存储（localStorage）将随机数存储起来：

var randNum = localStorage.getItem('randNum'); // 从本地存储中获取数字
if (randNum === null || isNaN(randNum))  // 如果randNum不是一个数字
    randNum = Math.floor(Math.random() * 11); // 创建随机数
    localStorage.setItem('randNum', randNum); // 将数字存入本地存储

// 使用数字
console.log(randNum);
// 删除该数字可使用localStorage.removeItem('randNum')
// 也可以“开发者工具 -> Application -> Local Storage”手动删除

诚然，这样可以解决单一浏览器访问的问题。但是如果用户使用两个浏览器，还是会有问题。

所以，最好的方式是创建好随机数后存在服务端，页面刷新的时候先异步从服务端获取数字。这样可以解决跨浏览器的问题。

希望能解决你的问题，有疑问可追问。

参考技术A var c=Math.floor(Math.random()*11);定义到外部域吧，或者直接定义成全局变量 参考技术B let c 就好了

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

如何使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>