Question

在搜索我正在制作的PhoneGap应用的数字选择器javascript代码时，我发现了这一点：https://plugins.jquery.com/dpNumberPicker/

它做我需要的很好，但看起来过于复杂。我搜索了很多代码，这个代码做了我最需要的代码。我想知道是否有更简单的方法来实现跨平台（Android和iOS）移动就绪（可点击）号码选择器？我需要一些东西让我制作一个带有 - 符号，可设置样式框的样式按钮，其中显示数字，以及一个跟随的样式+符号，两个按钮可以独立设置样式，或者两者共享相同的样式代码，以及+和 - 也可以设置风格。

简而言之，这： [ - ] [0] [+]

DP编号选择器的功能是否有更简单（如少得多的代码行）？这个数字选择器是漂亮的代码，但它在2014年出现。我希望有一个更简洁和更短的方法来实现这一目标。

如果有这样的答案，有没有办法让按钮只出现，当你点击数字输入框时数字框可以设置，然后按钮消失，数字框回到在没有点击的预定义秒数后，它是默认的未开发样式吗？

Going from this: 0 To this: [-][ 0 ][+] And back again after you stop tapping: 5

Answer 1

好的，回答你的问题（正如你评论说你只想知道自己是否有任何意义来编写代码）：

DP编号选择器的功能是否有更简单（如少得多的代码行）？这个数字选择器是漂亮的代码，但它在2014年出现。我希望有一个更简洁和更短的方法来实现这一目标。

除非您可以使用<input type="number">，否则您可以自行编写自定义解决方案。自定义编码解决方案几乎总是比其他人提供的通用解决方案更短，因为您只编写您特别需要的功能。你要问的不应该太难编码，在学习JavaScript时可能是一个很好的练习。

如果有这样的答案，有没有办法让按钮只出现，当你点击数字输入框时数字框可以设置，然后按钮消失，数字框回到在没有点击的预定义秒数后，它是默认的未开发样式吗？

是的，通过在输入框和按钮上使用事件侦听器，您可以通过用户交互来改变外观和样式。在debouncing设置不活动时间后，您还可以将外观更改恢复为默认值。

Answer 2

嘿，我现在正处于一起学习的过程中，可以随意使用自己摸索的尝试，然后将其作为您的尝试。

<!DOCTYPE html>
<html>
<head>
<title>Making a number picker. Hatchnet 2019</title>
<style>

.numberpkr {
    position:relative;
    width:100px;
}

.numbertext {
    position: absolute;
    padding:0px;
    line-height:18px;
    height:18px;
    width:100px;
    border:1px solid lightgrey;
    text-align:right;
    left:22px;
    top:0;
}

.plusminus{
    position: absolute;
    padding:2px;
    line-height:14px;
    height:14px;
    border:1px solid lightgrey;
    text-align: center;
    width:16px;
}
.plusname:hover{
    background:green;
    color:white;
}
.plusname {
    color:green;
    right:-44px;
    top:0;
}
.minusname:hover{
    background:red;
    color:white;
}
.minusname {
    color:red;
    left:0px;
    top:0;
}

</style>
</head>
<body>

Some text
<div id="picker"></div>

<script type="text/javascript">

// call on your div
numberPicker("picker");

function numberPicker($id)
{
    // the parent div
    var numberpkr = document.createElement('div'); 
    // the child divs
    var plusDiv = document.createElement('div');
    var minusDiv = document.createElement('div');
    var numberText = document.createElement('div');

    w = document.getElementById($id); // where the picker will go

    numberpkr.className="numberpkr";

    // the plus
    plusDiv.className="plusname plusminus";
    plusDiv.innerHTML = "+";
    plusDiv.onclick = function(){pkrclicked($id, "+");};

    // the minus
    minusDiv.className="minusname plusminus";
    minusDiv.innerHTML = "-";
    minusDiv.onclick = function(){pkrclicked($id, "-");};

    // the acutal number
    numberText.className="numbertext";
    numberText.innerHTML = "0";
    numberText.id = $id + "_1";

    numberpkr.appendChild(minusDiv);
    numberpkr.appendChild(plusDiv);
    numberpkr.appendChild(numberText);
    w.appendChild(numberpkr);
}
function pkrclicked($id, $d)
{
    if($d == "+")
    {
        $n = document.getElementById($id + "_1").innerHTML;
        document.getElementById($id + "_1").innerHTML = parseInt($n) + 1;
    }
    if($d == "-")
    {
        $n = document.getElementById($id + "_1").innerHTML;
        if(parseInt($n) > 0)
        {
            document.getElementById($id + "_1").innerHTML = parseInt($n) - 1;
        }
    }
}
</script>
</body>
</html>

一个更简单，更独立的号码选择器？

2 个答案: