Question

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

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

Answer 1

我的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有图标而不是类

Answer 2

<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，这应该可以。

Answer 3

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

  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>

Answer 4

你可以在这里使用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);

Answer 5

使用jQuery的简单工作。

Working jsFiddle

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

5 个答案: