本计数器没有存储功能,网页刷新会恢复到初始数值。用处不大,但我觉得总会有用到它的朋友。
- 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 -->
效果图:
个人原创,自留查底。水平有限,错误百出,恳请指正。