零基础建站培训教程介绍

当前位置:

JS实现单页站刷新随机显示二维码

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

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

方法/步骤

  1. 首页在页面的</head> 标签上方,放上以下的JS代码,并且修改多个微信号;
    
    
     <script>
    // 代码来源:学做网站论坛 https://www.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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

学做网站论坛零基础学建网站课程