寻求适用于PhoneGap的简洁可定制跨平台数字选择器方案

我特意为你写了一个完全符合需求的轻量数字选择器，代码简洁无冗余，适配Android和iOS移动端，支持独立配置[-]按钮、数字框、[+]按钮的样式，交互逻辑也和你描述的一致：点击数字时展开增减按钮，停止操作后自动收起恢复默认样式。

1. HTML结构 #

结构非常简洁，用一个容器包裹三个核心元素，初始状态下增减按钮默认隐藏：

<div class="number-picker">
  <button class="btn-minus">-</button>
  <div class="number-display" data-value="0">0</div>
  <button class="btn-plus">+</button>
</div>

2. CSS样式（支持独立配置） #

这里给每个元素都设置了独立的类，你可以根据需求随意修改各自的样式，同时做了移动端适配：

/* 容器样式，可自定义布局 */
.number-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 20px auto;
}

/* [-]按钮独立样式 */
.btn-minus {
  display: none; /* 初始隐藏 */
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  font-size: 20px;
  cursor: pointer;
  border-radius: 4px 0 0 4px;
  /* 移动端触摸反馈优化 */
  -webkit-tap-highlight-color: transparent;
}

/* 数字显示框默认样式 */
.number-display {
  width: 60px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #eee;
  background-color: #fff;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}

/* 激活状态（显示按钮时）的数字框样式 */
.number-display.active {
  border-left: none;
  border-right: none;
  border-radius: 0;
}

/* [+]按钮独立样式 */
.btn-plus {
  display: none; /* 初始隐藏 */
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  font-size: 20px;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  -webkit-tap-highlight-color: transparent;
}

/* 按钮点击反馈，适配移动端 */
.btn-minus:active, .btn-plus:active {
  background-color: #e0e0e0;
}

3. JavaScript逻辑（核心交互） #

纯原生JS无依赖，支持自定义配置（比如隐藏延迟、步长、数值范围）：

// 可自定义配置项
const config = {
  hideDelay: 2000, // 停止操作后自动隐藏按钮的时长（毫秒）
  step: 1, // 每次增减的步长
  minValue: 0, // 数值最小值
  maxValue: 100 // 数值最大值
};

// 获取DOM元素
const numberPicker = document.querySelector('.number-picker');
const btnMinus = numberPicker.querySelector('.btn-minus');
const numberDisplay = numberPicker.querySelector('.number-display');
const btnPlus = numberPicker.querySelector('.btn-plus');

let hideTimer;
let currentValue = parseInt(numberDisplay.dataset.value);

// 重置自动隐藏定时器
function resetHideTimer() {
  clearTimeout(hideTimer);
  hideTimer = setTimeout(() => {
    btnMinus.style.display = 'none';
    btnPlus.style.display = 'none';
    numberDisplay.classList.remove('active');
  }, config.hideDelay);
}

// 更新数字显示内容
function updateDisplay() {
  numberDisplay.textContent = currentValue;
  numberDisplay.dataset.value = currentValue;
}

// 点击数字框，展开增减按钮
numberDisplay.addEventListener('click', () => {
  btnMinus.style.display = 'block';
  btnPlus.style.display = 'block';
  numberDisplay.classList.add('active');
  resetHideTimer();
});

// 减号按钮逻辑
btnMinus.addEventListener('click', () => {
  if (currentValue > config.minValue) {
    currentValue -= config.step;
    updateDisplay();
  }
  resetHideTimer();
});

// 加号按钮逻辑
btnPlus.addEventListener('click', () => {
  if (currentValue < config.maxValue) {
    currentValue += config.step;
    updateDisplay();
  }
  resetHideTimer();
});

// 点击外部区域直接隐藏按钮（可选功能）
document.addEventListener('click', (e) => {
  if (!numberPicker.contains(e.target)) {
    btnMinus.style.display = 'none';
    btnPlus.style.display = 'none';
    numberDisplay.classList.remove('active');
    clearTimeout(hideTimer);
  }
});

使用说明 #

1. 样式自定义：直接修改CSS中.btn-minus、.number-display、.btn-plus的样式即可，比如调整颜色、大小、圆角等，三个元素的样式完全独立配置。
2. 参数调整：修改config对象里的参数，就能自定义自动隐藏延迟、增减步长、数值的最大最小值。
3. PhoneGap适配：这个实现纯原生无外部依赖，完全兼容PhoneGap的Android和iOS环境，移动端点击/触摸操作都能正常响应。
4. 交互逻辑：点击数字框会展开[-][数字][+]的布局，每次点击加减按钮都会重置隐藏定时器，停止操作2秒后自动收起，恢复成单独的数字显示样式。

内容的提问来源于stack exchange，提问作者Hideto