页面加载时显示一个随机图标

Show one random icon on page load

本文关键字：一个 随机 图标 加载 显示      更新时间：2023-09-26

如何使用js在页面加载时显示一个随机图标？下面是我的HTML代码：

<span>
  <i class="fa fa-trash-o" id="icon-one"></i>
  <i class="fa fa-frown-o" id="icon-two"></i>
  <i class="fa fa-thumbs-o-down" id="icon-three"></i>
</span>

我只需要显示三个图标中的一个。

我的HTML应该是

<span id = "mySpan"></span>

您可以使用javascript 来完成此操作

var myRand = Math.floor(Math.random() * 3) + 1;
var randString = '';
if(myRand == 1) 
    randString = 'one';
else if(myRand == 2) 
    randString = 'two';
else if(myRand == 3) 
    randString = 'three';
var ele = document.createElement("div");
ele.setAttribute("id","icon-"+randString );
document.getElementById("mySpan").appendChild(ele);

好吧，这假设你的id有图标，而不是类

<span>
  <i class="fa fa-trash-o" style="display: none;" id="icon-one"></i>
  <i class="fa fa-frown-o" style="display: none;" id="icon-two"></i>
  <i class="fa fa-thumbs-o-down" style="display: none;" id="icon-three"></i>
</span>
var icons = [ 'icon-one', 'icon-two', 'icon-three' ],
    icon = icons[Math.floor(Math.random()*icons.length)];
$( '#' + icon ).show();

如果您使用的是jquery，这应该会起作用。

使用此函数获得范围（最小值，最大值）内的随机无

  function getRandomArbitary (min, max) {
        return Math.random() * (max - min) + min;
    }

并适当使用以显示标签隐藏其他方式的

例如js

var r =  function getRandomArbitary (1, 3);
var eleCategory = document.getElementById("main_div");
var eleChild = eleCategory.childNodes;
for( i = 0 , i<eleChild.length; i++ ){
    if(i==r){
        eleChild[ i ].style.display='block';
    }
    else
    {
        eleChild[ i ].style.display='none';
     }
}

html

<span id="main_div">
  <i class="fa fa-trash-o" id="icon-one"></i>
  <i class="fa fa-frown-o" id="icon-two"></i>
  <i class="fa fa-thumbs-o-down" id="icon-three"></i>
</span>

您可以在这里使用java脚本。所以，如果只有三个图标一、二和三。

使用随机函数生成一个介于一、二和三之间的

var x= Math.floor((Math.random()*3)+1); 
if (x==1)
{
//fetch the div id = "icon-one" and display
}
else if (x==2)
{
//fetch the div id = "icon-two" and display
}
else
{
//fetch the div id = "icon-three" and display
}

尽管如果您可以重命名id的两个icon1、icon2等，效果会更好那么它将是这样的：

var x= Math.floor((Math.random()*3)+1); 
var icon = "icon";
var id = icon.concat(x);

使用jQuery进行简单的工作

工作jsFiddle

相关文章：