计数器的点击事件

今天我们来学习以秒计数的计数器,点击开始计数按钮后input标签会开始计数,然后点击停止计数则会停止计数。

  • 代码

1.HTML:设置一个input标签使显示的数字在input标签里面显示,两个button按钮用于开始与停止计数。

<body>

 <input type="text" value="0" id="number">

    <button id="start">开始计数</button>

    <button id="stop">停止计数</button>

</body>

  1. 2.JavaScript:我们先给button按钮一个“id”,然后获取到元素,然后绑定这个按钮的点击事件(onclick)
  2. 然后获取input标签,我们注意在后面要加上.value属性,这个获取的是文本框里的内容属性。接着就是把数值设为“0”,然后让代码带动数值变化,然后设置每次计数的时间点。
  3. 最后设置 clearInterval()停止计数。

<script>

          window.onload=function(){

            var timer=0;

            var num=0;

            var numbers=document.getElementById("number");

            document.getElementById("start").onclick=function(){

                timer=setInterval(function(){

                    num++;

                    numbers.value=num;

               },1000)

           }

            document.getElementById("stop").onclick=function(){

                clearInterval(timer);

           }

       }

</script>

总结:此案例所用到的关键技术为JavaScript,我把这个案例归类为点击事件,主要是获取ID名以及利用获取到的元素带入点击事件中,实现数字的自增效果以及停止计数效果。

这是我所学到的JavaScript案例,所以我要分享给你们,希望可以帮助到你们。

以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!

 


版权声明:本文为Rowse原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。