零基礎建站培訓教程介紹

當前位置:

JS實現單頁站刷新隨機顯示二維碼

一些做單頁宣傳網站的學員,要實現每當用戶打開單頁網站時,隨機顯示多個二維碼中的一個,刷新一次就隨機更換一個。并且單頁內容中的微信號也跟著自動變化。效果如下圖:

那么在自己建網站過程中,怎么實現這種刷新隨機顯示二維碼效果呢?這也需要使用JS來實現。下面學做網站論壇介紹一下制作方法。

方法/步驟

  1. 首頁在頁面的</head> 標簽上方,放上以下的JS代碼,并且修改多個微信號;
    ?<script>
    // 代碼來源:學做網站論壇 http://www.gilqab.tw/  
        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>

發表評論

電子郵件地址不會被公開。 必填項已用*標注

學做網站論壇零基礎學建網站課程
新疆25选7基本走势图