积分的加减可以按键操作也可以自己编辑

最新推荐文章于 2024-10-09 23:41:45 发布

肖肖肖丽珠

最新推荐文章于 2024-10-09 23:41:45 发布

阅读量755

点赞数

CC 4.0 BY-SA版权

分类专栏：前端小知识

本文链接：https://blog.youkuaiyun.com/qq_33769914/article/details/79485448

前端小知识专栏收录该内容

208 篇文章

订阅专栏

本文介绍了一种数字输入控件的设计方案，用户可以通过点击加减按钮调整数值，同时支持直接编辑数字。文章详细展示了控件的实现方式，包括如何限制最小值为0，以及如何通过正则表达式确保输入框内始终为数字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能：

你可以点击加减键来使数字加减，也可以直接编辑。

注意：1，最少之能事0，不能再减了。2如果编辑的时候只能输入数字(你可以直接设置input 的type="number"或者设置输入其他内容的时候，都是显示的0)

设置积分：

</li>

.jian {
    display: block;
    background: url(/imges/res/bt_jian.png) no-repeat center center;
    width: 24px;
    height: 24px;
    padding: 6px 6px;
    float: left;
    cursor: pointer;
}

.jia {
    display: block;
    background: url(/imges/res/bt_jia.png) no-repeat center center;
    width: 24px;
    height: 24px;
    padding: 6px 6px;
    float: left;
    cursor: pointer;
}

.name02 {
    width: 98px;
    height: 34px;
    float: left;
    text-align: center;
}

点击加减号

$("#setScore span").click(function(){

var score = $("#setScore input").val();
var setScore = $(this).attr("class");
if(setScore == "jia"){
$("#setScore input").val(parseInt(score)+1);
}else if(setScore == "jian"){
score = parseInt(score)-1;
$("#setScore input").val((score >= 0)?score:0);
}

});

其他内容的时候，都是显示的0

$("#score").keyup(function(){

var scoreNum = $(this).val();
if(!/^\d*$/.test(scoreNum)){
$(this).val(0);
}
});