怎么使用js实现简易计数器功能
导读：本文共3982字符，通常情况下阅读需要13分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：接下来，请跟着小编一起来学习吧！实现简易计数器可进行三个操作,开始计数,暂停计数,复位操作(使用计时函数事件)<html><head><metacharset="utf-8"><title>简易计数练习</title><styletype="text/css">/取消浏览器默认... ...
目录
(为您整理了一些要点),点击可以直达。接下来，请跟着小编一起来学习吧！
实现简易计数器
可进行三个操作,开始计数,暂停计数,复位操作
(使用计时函数事件)
<html>
<head>
<metacharset="utf-8">
<title>简易计数练习</title>
<styletype="text/css">
/取消浏览器默认属性/
{
margin:0px;
padding:0px;
}
/设置span标签位置*/inputID{
width:300px;
height:60px;
/字体居中/
text-align:center;
/字体大小/
font-size:50px;
/字体颜色/
color:coral;
}
</style>
<scripttype="text/javascript">
//计数;
varnum=0;
functioncount(){
//获取输入框对象;
varinputobj=document.getElementById("inputID");
inputobj.value=num;
num++;
}
//计时器变量;
vartiming;
//开始计数;
functionstart(){
//设置计时器,1秒执行一次计数函数count();
timing=setInterval("count()",1000);
}
//停止计数;
functionstop(){
//停止执行计时器;
clearInterval(timing);
}
//复位(即将输入框的内容值变为原来的数值);
functionrestoration(){
//停止执行计时器;
clearInterval(timing);
varinputobj=document.getElementById("inputID");
//将输入框的值复位为0;
inputobj.value=0;
//将计数的num值也复位;
num=0
}
</script>
</head>
<body>
<!--使用只读的输入框显示计数-->
<h4>简易计数器</h4>
<inputtype="text"id="inputID"value="0"readonly="readonly"/><hr/>
<inputtype="button"value="开始计数"onclick="start()"/>
<inputtype="button"value="停止计时"onclick="stop()"/>
<inputtype="button"value="复位"onclick="restoration()"/>
</body>
</html>
效果：
优化计数练习
为了防止重复点击开始按钮;而造成计数器重复操作,出现时间间隔问题;在点击开始按钮后,就禁用开始按钮组件;当点击停止按钮或者复位按钮时,恢复开始按钮组件.
<html>
<head>
<metacharset="utf-8">
<title>简易计数练习</title>
<styletype="text/css">
/取消浏览器默认属性/
{
margin:0px;
padding:0px;
}
/设置span标签位置*/inputID{
width:300px;
height:60px;
/字体居中/
text-align:center;
/字体大小/
font-size:50px;
color:coral;
}
</style>
<scripttype="text/javascript">
//计数;
varnum=0;
functioncount(){
//获取输入框对象;
varinputobj=document.getElementById("inputID");
inputobj.value=num;
num++;
}
//计时器变量;
vartiming;
//开始计数;
functionstart(){
//设置计时器,1秒执行一次计数函数count();
timing=setInterval("count()",1000);
//点击开始后,禁用开始按钮;
document.getElementById("startbtn").disabled=true;
}
//停止计数;
functionstop(){
//停止执行计时器;
clearInterval(timing);
//点击停止时;恢复开始按钮的使用;
document.getElementById("startbtn").disabled=false;
}
//复位(即将输入框的内容值变为原来的数值);
functionrestoration(){
//停止执行计时器;
clearInterval(timing);
varinputobj=document.getElementById("inputID");
//将输入框的值复位为0;
inputobj.value=0;
//将计数的num值也复位;
num=0
//点击复位按钮后,同时也恢复开始按钮的使用;
document.getElementById("startbtn").disabled=false;
}
</script>
</head>
<body>
<!--使用只读的输入框显示计数-->
<h4>简易计数器</h4>
<inputtype="text"id="inputID"value="0"readonly="readonly"/><hr/>
<inputtype="button"id="startbtn"value="开始计数"onclick="start()"/>
<inputtype="button"value="停止计数"onclick="stop()"/>
<inputtype="button"value="复位"onclick="restoration()"/>
</body>
</html>
效果：
将开始按钮与停止按钮布局在同一个位置
<html>
<head>
<metacharset="utf-8">
<title>简易计数练习</title>
<styletype="text/css">
/取消浏览器默认属性/
{
margin:0px;
padding:0px;
}
/设置span标签位置*/inputID{
width:300px;
height:60px;
/字体居中/
text-align:center;
/字体大小/
font-size:50px;
color:coral;
}
</style>
<scripttype="text/javascript">
//计时器变量;
vartiming;
//开始计数;
functionstart(){
//获取开始按钮的对象;
varstartobj=document.getElementById("startbtn");
//对按钮的内容进行判断;
if(startobj.value=="开始计数"){
//设置计时器,1秒执行一次计数函数count();
timing=setInterval("count()",1000);
//将按钮值变为停止;
startobj.value="暂停计数";
}else{
//当按钮值为暂停时;停止计数;
clearInterval(timing);
//将按钮值变为开始;
startobj.value="开始计数";
}
}
//计数;
varnum=0;
functioncount(){
//获取输入框对象;
varinputobj=document.getElementById("inputID");
inputobj.value=num;
num++;
}//复位(即将输入框的内容值变为原来的数值);
functionrestoration(){
varinputobj=document.getElementById("inputID");
//将输入框的值复位为0;
inputobj.value=0;
//将计数的num值也复位;
num=0
}
</script>
</head>
<body>
<!--使用只读的输入框显示计数-->
<h4>简易计数器</h4>
<inputtype="text"id="inputID"value="0"readonly="readonly"/><hr/>
<inputtype="button"value="开始计数"id="startbtn"onclick="start()"/>
<inputtype="button"value="复位"onclick="restoration()"/>
</body>
</html>
效果：
怎么使用js实现简易计数器功能的详细内容，希望对您有所帮助，信息来源于网络。