简单方法实现"假的"网页计数器,数字定时定值自动增长

本计数器没有存储功能,网页刷新会恢复到初始数值。用处不大,但我觉得总会有用到它的朋友。

  • 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 -->

效果图:

按照代码设定的初始值和增长值,自动计数


个人原创,自留查底。水平有限,错误百出,恳请指正。

猜你喜欢

转载自blog.csdn.net/weixin_42097173/article/details/80492662