簡單方法實現"假的"網頁計數器,數字定時定值自動增長
阿新 • • 發佈:2019-02-16
本計數器沒有儲存功能,網頁重新整理會恢復到初始數值。用處不大,但我覺得總會有用到它的朋友。
- 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 -->
效果圖:
個人原創,自留查底。水平有限,錯誤百出,懇請指正。