`

js文本框加减

    博客分类:
  • JSP
 
阅读更多

        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文本框数量加减,用于点击按钮增减数据的操作!属于JS!

    js实现文本框支持加减运算的方法

    主要介绍了js实现文本框支持加减运算的方法,可实现文本框输入加减运算式同时右侧实时显示对应计算结果的功能,具有一定参考借鉴价值,需要的朋友可以参考下

    js小时和分钟的加减

    按钮控制文本框加1,减1;从而实现小时和分钟的填写

    《学习js计算器代码的实例教程,提高加减乘除等js基础计算能力》源码

    本文件属于文章《学习js计算器代码的实例教程,提高加减乘除等js基础计算能力》的完整代码,在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的...

    JavaScript 控制文本框的值连续加减

    JavaScript控制文本框的值连续加减,一方面学习如何适时对文本框赋值,另一方面学习如何在对象上进行运算,很有用处哦。

    使用js实现按钮控制文本框加1减1应用于小时+分钟

    正如标题所言使用js实现按钮控制文本框加1减1,此类主要应用于小时+分钟,下面有个不错的示例,喜欢的朋友可以参考下

    超级简易的JS计算器实例讲解(实现加减乘除)

    废话不多说,直接上代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简单的计算器&lt;/title&gt; &lt;style&gt; body{ margin: 0;... height: 402px

    jquery实现文本框数量加减功能的例子分享

    下面是使用jquery实现的代码。 效果图: 源码: 代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...&lt;head&gt;...js数量加减&lt;/title&gt;&lt;script

    带增减按钮的输入框

    带增减按钮的输入框 含有输入范围(范围最好再自己用js控制一下,因为直接输入的值可能超过你预设的范围,本例范围0-30 ) jquery

    vue.js实现简单的计算器功能

    效果如图所示:是一个十分简单的计算器,包含了加减乘除,不是用原生js写的,而是用vue.js写的 html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;&lt;/title&gt;...

    jQuery数字加减输入框代码

    jQuery数字加减输入框代码是一款基于jQuery基础封装的轻量级插件,使用时只需导入num-alignment.js即可。

    JS实现日期加减的方法

    当改变成型日期文本框后触发事件!当改变龄期文本框后触发事件!代码:(说明:成型日期ID: tbcxrq 龄期ID: tblq 要求试验日期ID: tbyqsyrq) 代码如下:[removed]  $(function() { $(“#&lt;&#37;=tbcxrq....

    JS 日期操作代码,获取当前日期,加一天,减一天

    利用Js在一个文本框内设置当前的时间,两个button,一个点一下加一天,一个点一下减一天。

    jquery 鼠标滚轮控制文本框数字改变

    内容索引:脚本资源,jQuery,鼠标,滚动 jquery 鼠标滚轮控制文本框数字改变,不知道如何描述给大家,也就是在网页的文本框中,只要鼠标移上后,文本框的文字就处于选中状态,如果这时候滚动鼠标滚轮,则选中状态的...

    程序天下:JavaScript实例自学手册

    13.21 年份加减函数 13.22 精确到千分之一秒 13.23 离开某天的时间 13.24 判断两个字符串日期的大小 13.25 显示登录时间 13.26 中文日期样式(一) 13.27 中文日期样式(二) 13.28 状态栏动态显示时间 13.29 页面访问...

    《程序天下:JavaScript实例自学手册》光盘源码

    13.21 年份加减函数 13.22 精确到千分之一秒 13.23 离开某天的时间 13.24 判断两个字符串日期的大小 13.25 显示登录时间 13.26 中文日期样式(一) 13.27 中文日期样式(二) 13.28 状态栏动态显示时间 13.29 页面访问...

    javascript 变速加数功能实现代码

    用户单击其中一个按钮,可以让数字加1,单击另外一个按钮则让数字减1,如果按住按钮不放,文本框的数值会越加越快或越减越快,即变速加数功能。比如你打开电脑的“时间和日期属性”窗口,你按下图红框标识的上下按钮...

Global site tag (gtag.js) - Google Analytics