js实现简易计数器功能
本文实例为大家分享了js实现简易计数器功能的具体代码，供大家参考，具体内容如下
实现简易计数器
可进行三个操作,开始计数,暂停计数,复位操作
(使用计时函数事件)
<html>
<head>
<meta charset="utf-8">
<title>简易计数练习</title>
<style type="text/css">
/* 取消浏览器默认属性 */
*{
margin: 0px;
padding: 0px;
}
/* 设置span标签位置 */
#inputID{
width: 300px;
height: 60px;
/* 字体居中 */
text-align: center;
/* 字体大小*/
font-size: 50px;
/*字体颜色*/
color: coral;
}
</style>
<script type="text/javascript">
//计数;
var num=0;
function count(){
//获取输入框对象;
var inputobj=document.getElementById("inputID");
inputobj.value=num;
num++;
}
//计时器变量;
var timing;
//开始计数;
function start(){
//设置计时器, 1 秒执行一次计数函数count();
timing=setInterval("count()",1000);
}
//停止计数;
function stop(){
//停止执行计时器;
clearInterval(timing);
}
//复位(即将输入框的内容值变为原来的数值);
function restoration(){
//停止执行计时器;
clearInterval(timing);
var inputobj=document.getElementById("inputID");
//将输入框的值复位为0;
inputobj.value=0;
//将计数的num值也复位;
num=0
}
</script>
</head>
<body>
<!--使用只读的输入框显示计数-->
<h3>简易计数器</h3>
<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
<input type="button" value="开始计数" onclick="start()" style="font-size: 20px;"/>
<input type="button" value="停止计时" onclick="stop()" style="font-size: 20px;"/>
<input type="button" value="复位" onclick="restoration()" style="font-size: 20px;"/>
</body>
</html>
效果：
优化计数练习
为了防止重复点击开始按钮;而造成计数器重复操作,出现时间间隔问题;在点击开始按钮后,就禁用开始按钮组件;当点击停止按钮或者复位按钮时,恢复开始按钮组件.
<html>
<head>
<meta charset="utf-8">
<title>简易计数练习</title>
<style type="text/css">
/* 取消浏览器默认属性 */
*{
margin: 0px;
padding: 0px;
}
/* 设置span标签位置 */
#inputID{
width: 300px;
height: 60px;
/* 字体居中 */
text-align: center;
/* 字体大小*/
font-size: 50px;
color: coral;
}
</style>
<script type="text/javascript">
//计数;
var num=0;
function count(){
//获取输入框对象;
var inputobj=document.getElementById("inputID");
inputobj.value=num;
num++;
}
//计时器变量;
var timing;
//开始计数;
function start(){
//设置计时器, 1 秒执行一次计数函数count();
timing=setInterval("count()",1000);
//点击开始后,禁用开始按钮;
document.getElementById("startbtn").disabled=true;
}
//停止计数;
function stop(){
//停止执行计时器;
clearInterval(timing);
//点击停止时;恢复开始按钮的使用;
document.getElementById("startbtn").disabled=false;
}
//复位(即将输入框的内容值变为原来的数值);
function restoration(){
//停止执行计时器;
clearInterval(timing);
var inputobj=document.getElementById("inputID");
//将输入框的值复位为0;
inputobj.value=0;
//将计数的num值也复位;
num=0
//点击复位按钮后,同时也恢复开始按钮的使用;
document.getElementById("startbtn").disabled=false;
}
</script>
</head>
<body>
<!--使用只读的输入框显示计数-->
<h3>简易计数器</h3>
<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
<input type="button" id="startbtn" value="开始计数" onclick="start()" style="font-size: 20px;"/>
<input type="button" value="停止计数" onclick="stop()" style="font-size: 20px;"/>
<input type="button" value="复位" onclick="restoration()" style="font-size: 20px;"/>
</body>
</html>
效果：
将开始按钮与停止按钮布局在同一个位置
<html>
<head>
<meta charset="utf-8">
<title>简易计数练习</title>
<style type="text/css">
/* 取消浏览器默认属性 */
*{
margin: 0px;
padding: 0px;
}
/* 设置span标签位置 */
#inputID{
width: 300px;
height: 60px;
/* 字体居中 */
text-align: center;
/* 字体大小*/
font-size: 50px;
color: coral;
}
</style>
<script type="text/javascript">
//计时器变量;
var timing;
//开始计数;
function start(){
//获取开始按钮的对象;
var startobj=document.getElementById("startbtn");
//对按钮的内容进行判断;
if(startobj.value=="开始计数"){
//设置计时器, 1 秒执行一次计数函数count();
timing=setInterval("count()",1000);
//将按钮值变为停止;
startobj.value="暂停计数";
}else{
//当按钮值为暂停时;停止计数;
clearInterval(timing);
//将按钮值变为开始;
startobj.value="开始计数";
}
}
//计数;
var num=0;
function count(){
//获取输入框对象;
var inputobj=document.getElementById("inputID");
inputobj.value=num;
num++;
}
//复位(即将输入框的内容值变为原来的数值);
function restoration(){
var inputobj=document.getElementById("inputID");
//将输入框的值复位为0;
inputobj.value=0;
//将计数的num值也复位;
num=0
}
</script>
</head>
<body>
<!--使用只读的输入框显示计数-->
<h3>简易计数器</h3>
<input type="text" id="inputID" value="0" readonly="readonly" /><hr/>
<input type="button" value="开始计数" id="startbtn" onclick="start()" style="font-size: 20px;"/>
<input type="button" value="复位" onclick="restoration()" style="font-size: 20px;"/>
</body>
</html>
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
一个简单的网站访问JS计数器 刷新1次加1次访问
复制代码 代码如下: <script language="JavaScript"><!-- var caution = falsefunction setCookie(name, value, expires, path, domain, secure) { var curCookie = name + "=" + escape(value) + ((expires) ? "; expires=
-
用JAVASCRIPT帮我写个计数器
你们能用JAVASCRIPT帮我写个计数器吗?要带文本的那种,我在ASP那里要用呀?拜托.......... 我自己写了一个,是不带文本的,谁能帮我弥补一下呢? <%@ Language=Jscript %> <% Application.Lock(); Application("Counter") = parseInt(Application("Counter")) + 1;
-
jsp计数器代码
<!-- JSP-Hitcounter counts sessions.Copyright (C) 2000 Jesper Schmitz Mouridsen. Visit www.webappcabaret/jsm2/webapps.jsp?find=jsphcs for more info. This program is free software; you can redistribute it and/or modify it under the terms of the GNU Ge
-
JavaScript实现计数器基础方法
本文实例为大家分享了js实现计数器的具体代码,供大家参考,具体内容如下 通过使用 JavaScript,设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.称之为计时事件. 在 JavaScritp 中使用计时事件是很容易的,两个关键方法是: setInterval() - 间隔指定的毫秒数不停地执行指定的代码. setTimeout() - 暂停指定的毫秒数后执行指定的代码 Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两
-
javascript下计数器每秒自动加1
var a = 0; function tran(){ var time = document.getElementById('time'); time.innerHTML = a++; window.setTimeout('tran()',1000); } window.setTimeout('tran()',1000); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
使用JavaScript制作一个简单的计数器的方法
设计思想 该方法的关键是Cookie技术和动态图像特性的综合运用.使用Cookie,可以在用户端的硬盘上记录用户的数据,下次访问此站点时,即可读取用户端硬盘的Cookie,直接得知来访者的身份和访问次数等有关信息.JavaScript中通过document.cookie属性访问Cookie,这个属性包括名字.失效日期.有效域名.有效URL路径等.用等号分开的名字和其值是Cookie的实际数据,本例中用来存储该访问者访问该页面的次数.通过把Web页中的图像映射到一个Images数组,一定条件下修改
-
js计数器代码
复制代码 代码如下: <script Language="javascript"> var seconds = 10;//记数时间 var handle;//事件柄 //开始记数器 function startTimer() { handle = setInterval("timer()",1000); } //结束记数器 function stopTimer() { clearInterval(handle); seconds =
-
jsp网页计数器实现示例
复制代码 代码如下: //过滤器类 public class EcondingFilter implements Filter { private String charset = null; private ServletContext context = null; private String path = ""; /** * 在销毁前将数据存入本地文件中 */ public void destroy() { //获取servleContext中的属性的那个值 String nu
-
jsp计数器制作
计数器是一般网站必备的东东,别小看它了,每当站长看着小小计数器上的数字飞速增长的时候,感觉实在是好极了.以前我们用cgi.asp来写计数器,这方面的文章很多了,在这里,我们将会采用目前比较流行的jsp技术演示如何做一个计数器.其中我们用到了两个文件,test.jsp文件用于在浏览器中运行,counter.java是后台的一个小java bean程序,用来读计数器的值和写入计数器的值.而对于计数器的保存,我们采用了一个文本文件lyfcount.txt. 下面是详细的程序代码(test.jsp放到w
-
一个可以防止刷新的JSP计数器
<%@ page contentType="text/html;charset=gb2312" %> <!--jsp计数器--> <%-- 以前学ASP时,用ASP做防止刷新的计数器很简单,以下是一个用JSP做的计数器--%> <html> <head> <title>jsp计数器</title> </head> <body> <%@ page import="j