function op(signal) {
var box = document.getElementById("tx");
var val = box.value;
if (signal == "plus") {
box.value = eval(val) + 1;
}
if (signal == "minus") {
box.value = eval(val) - 1;
}
}
一定要eval转换下，否则一直是字符串加减。
下面是变速功能
PS:网上找的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>变速加数功能实现</title>
</head>
<body>
<input name="textBox" type="text" id="textBox" value="1" />
<input name="add" type="button" onmousedown="addNum.mouseDownHandle()" onmouseup="addNum.mouseUpHandle()" id="add" value="增加" /> 按住按钮不放，数值将会越加越快
<script type="text/javascript">
/**
* 加数类
* @param {String} textBoxId 文本框ID
*/
function clsAddNum(textBoxId)
{
var step = 1; //默认步长
var changeStepTimer = null; //改变速度计数器
var setValueTimer = null; //设置值计数器
/**
* 改变速度私有方法
*/
var changeStep = function()
{
//每隔1秒速度加5
changeStepTimer = setInterval(function(){step += 1}, 50);
}
/**
* 设置值私有方法
*/
var setValue = function()
{
var textValue = parseInt(document.getElementById(textBoxId).value);
document.getElementById(textBoxId).value = textValue + step;
setValueTimer = setTimeout(setValue,50); //每隔200毫秒更新文本框数值一次
}
/**
* 按下鼠标处理函数
*/
this.mouseDownHandle = function()
{
changeStep();
setValue();
}
/**
* 松开鼠标处理函数
*/
this.mouseUpHandle = function()
{
//停止变速和改变文本框的值
clearInterval(changeStepTimer);
clearTimeout(setValueTimer);
step = 1; //恢复默认速度
}
}
//实例化类
var addNum = new clsAddNum('textBox');
</script>
</body>
</html>
分享到：
相关推荐
通过上述的步骤和方法，一个简单的网页文本框加减运算功能就可以被实现了。这种功能在很多在线计算器或者表单中都非常常见，并且具有实际的使用价值。开发者在实现时还需要注意代码的健壮性和用户的交互体验。 需要...
本教程将详细讲解如何使用 jQuery 实现文本框中的数量加减功能，这一功能常用于电商网站的商品购买数量调整等场景。 一、jQuery 基础 在开始之前，确保已经在项目中引入了 jQuery 库。可以通过以下方式在 HTML ...
这个源码下载的主题是"文本框数量加减带总金额计算效果"，这涉及到一个常见的电商或购物网站功能，即动态更新商品总价。当用户在输入框中增加或减少商品数量时，系统会实时计算并显示总金额。这种功能提供了即时反馈...
本话题将详细探讨如何利用jQuery实现“文本框商品数量加减”的交互效果。 一、jQuery简介 jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互。由于其简洁的API和强大的功能...
本文件属于文章《学习js计算器代码的实例教程，提高加减乘除等js基础计算能力》的完整代码，在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的...
在JavaScript编程中，处理小时和分钟的加减操作是常见的需求，特别是在构建时间相关的Web应用时。例如，用户界面可能包含用于输入或调整时间的文本框，通过点击按钮来增加或减少小时数或分钟数。以下是一些关于如何...
在这个示例中，我们看到的是一个使用JavaScript（具体来说是jQuery库）来操作HTML元素，实现小时和分钟的加减功能。这个应用可能是用于计时器或者时钟界面的简单版，用户可以通过点击按钮来增加或减少小时和分钟的值...
在本文中，我们将深入探讨如何使用jQuery来实现一个商品数量加减功能，这通常用于电商网站的商品购物车页面。jQuery是一种强大的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得创建交互式网页变得更加...
在JavaScript（JS）中创建一个简单的加减乘除计算器是一个基础但实用的实践项目，它可以帮助初学者理解事件处理、DOM操作以及基本的数学运算。本项目主要涉及到以下几个知识点： 1. **HTML 结构**：首先，我们需要...
在本例中，我们将学习如何使用JavaScript来控制一个HTML文本框的值，使其能够进行连续的加一或减一操作。这一操作不仅涵盖了对文本框进行适时赋值的基本操作，还涉及了在对象上进行运算的方法。 为了实现这一功能，...
废话不多说，直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> body{ margin: 0;... height: 402px
2. **数量加减**： - 定义两个函数`numAdd`和`numDec`分别处理商品数量的增加和减少。 - `numAdd`函数中，获取当前文本框的值，将其转换为整数并加1，然后更新文本框和总价。 - `numDec`函数中，同样获取当前值并...
《小学加减乘除运算测试》是一个基于JavaScript开发的在线教育工具，主要针对小学生进行数学基础知识的练习，尤其是加减乘除的运算。这个应用程序旨在通过互动的方式帮助孩子们巩固数学运算技能，提升学习兴趣。 ...
在本例中，我们讨论的是一个基于JavaScript库JQuery实现的版本，它具有输入范围限制，以防止用户输入超出预设范围（0-30）的值。 首先，让我们深入了解一下这个组件的基础结构。一个基本的HTML实现会包括一个`...
本文将详细介绍如何使用jQuery实现商品数量加减并计算总价的代码。 首先，我们需要一个HTML结构来展示商品信息和数量控制按钮。在`index.html`文件中，这可能包括以下元素： ```html 商品名称 ...
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的在线网页计算器，主要关注加减乘除的基本运算。这个计算器设计为支持键盘输入，并且兼容古老的Internet Explorer 8浏览器。以下是你可能需要了解的关键...