js文本框加减

最新推荐文章于 2022-02-13 17:47:22 发布

五司命

最新推荐文章于 2022-02-13 17:47:22 发布

阅读量141

点赞数

分类专栏： JSP 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/k10692081/article/details/84227636

版权

JSP 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一定要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" οnmοusedοwn="addNum.mouseDownHandle()" οnmοuseup="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>

五司命

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js文本框加减

function op(signal) { var box = document.getElementById("tx"); var val = box.value; if (signal == "plus") { box.value = eval(val) + 1;...
复制链接

扫一扫

专栏目录