1. 程式人生 > >簡單方法實現"假的"網頁計數器,數字定時定值自動增長

簡單方法實現"假的"網頁計數器,數字定時定值自動增長

本計數器沒有儲存功能,網頁重新整理會恢復到初始數值。用處不大,但我覺得總會有用到它的朋友。

  • HTML部分:<p>標籤樣式部分可根據現場上下文自己定義,其他上下文程式碼,可以刪減忽略。
<!-- …… 網頁其他部分程式碼 -->

<!-- 計數器.START -->
<div class="container-fluid" align="center" style="width:80%;">
    <div class="row">
        <div class="col-sm-12">
            <div
class="col-sm-3" style="height: 150px;background-color:#DFFFDF">
<p style="font-size:18px;font-family:微軟雅黑 ;font-weight:bold">網站累計訪問</p> <p style="position: relative;left:10px"><input type="text" style="width:80px; border:none; outline: none; font-family:微軟雅黑 ;font-weight:bold; background-color:#DFFFDF"
id="count1"/>
<b></b></p> <p style="font-size:18px;font-family:微軟雅黑 ;font-weight:bold">累計註冊</p> <p style="position: relative;left:10px"><input type="text" style="width:60px; border:none; outline: none; font-family:微軟雅黑 ;font-weight:bold; background-color:#DFFFDF"
id="count2"/>
<b></b></p> </div> <div class="col-sm-9" style="height: 150px;margin-top: 0px;padding: 0px;"> <!-- …… --> </div> </div> </div> </div> <!-- 計數器.END --> <!-- …… 網頁其他部分程式碼 -->
  • JavaScript部分:
<!--計數器.START -->
<script type="text/javascript">
    setInterval(function(){
        var num1= parseInt(document.getElementById('count1').value);     
        document.getElementById('count1').value=num1+13;
    },3000);

    setInterval(function(){
        var num1= parseInt(document.getElementById('count2').value);
        document.getElementById('count2').value=num1+1;
    },10000);

    document.getElementById('count1').value=121866;
    document.getElementById('count2').value=4726;
</script>
<!-- 計數器.END -->

效果圖:

按照程式碼設定的初始值和增長值,自動計數

個人原創,自留查底。水平有限,錯誤百出,懇請指正。