引导页单页站刷新随机显示二维码

一些个人单页网站制作的学员，要实现每当用户打开单页网站时，随机显示多个二维码中的一个，刷新一次就随机更换一个。并且单页内容中的微信号也跟着自动变化。效果如下图：

那么在学习如何自己建网站过程中，怎么实现这种刷新随机显示二维码效果呢？这也需要使用JS来实现。下面学做网站论坛介绍一下制作方法。

方法/步骤

1. 首页在页面的</head> 标签上方，放上以下的JS代码，并且修改多个微信号；

   
    <script>
   
   // 代码来源：学做网站论坛 http://ke.xuewangzhan.net/ 
   
       var msg = ["wx01","wx02","wx03","wx04","wx05"];
   
       var shu = Math.floor(Math.random() * msg.length)+1;
   
       var msgtp = msg[shu-1];     
   
       </script>
   
   

2. 使用以下的JS代码来调用随机的微信号；

   
   <script>document.write(msgtp)</script>
   
   

3. 使用以下的JS代码来调用随机的二维码图片；

   
   <script>document.write(' <img id="wx_pic" src="./images/wx0'+shu+'.jpg" alt="">')</script>
   
   

通过以上的方法就可以在自己建网站时，实现刷新随机显示二维码和微信号的效果了，每刷新一次就会自动更换一个二维码和微信号。

补充：

除了上面的写法之外，还可以按照下面的书写。

首先将几个微信号名称填入到代码中，注意微信图也用微信名进行命名，使用PNG格式。

<script>

    var arr_wx = ['wx01','wx02','wx03','wx04']

    var wx_index = Math.floor((Math.random() * arr_wx.length));

    stxlwx = arr_wx[wx_index];

    var wx = "<img src='images/"+stxlwx+".png'>";

</script>

微信名调用：

<script>document.write(stxlwx);</script>

微信图调用：

<script>document.write(wx);</script>