有一个数字，初始值为10，每单击页面中的“+”按钮一次，其值+1，当达到20时，不再增加； 每单击页面中的“-”号按钮，其值-1，当变为5时，不再减少。

这是一个典型的前端交互逻辑问题。在实现这个功能时，通常需要定义一个变量来存储这个数字的当前值，并且需要为页面中的“+”和“-”按钮分别绑定事件处理器。以下是一个简单的实现逻辑：

1. 定义一个变量（例如名为`currentNumber`），初始值设为10。
2. 为“+”按钮绑定一个事件处理器，每次单击时检查`currentNumber`的值，如果小于20，则将其值加1。
3. 为“-”按钮绑定一个事件处理器，每次单击时检查`currentNumber`的值，如果大于5，则将其值减1。
4. 可以使用JavaScript中的条件判断语句来实现这些逻辑。

实现这个功能的具体代码可能会因使用的前端框架或技术栈而异。以下是使用原生JavaScript的一个简单示例：

// 初始化变量
let currentNumber = 10;

// 获取页面元素
const addButton = document.querySelector('.add-button');
const subtractButton = document.querySelector('.subtract-button');
const numberDisplay = document.querySelector('.number-display');

// + 按钮的事件处理函数
function handleAdd() {
  if (currentNumber < 20) {
    currentNumber += 1;
    updateDisplay();
  }
}

// - 按钮的事件处理函数
function handleSubtract() {
  if (currentNumber > 5) {
    currentNumber -= 1;
    updateDisplay();
  }
}

// 更新页面显示的函数
function updateDisplay() {
  numberDisplay.textContent = currentNumber;
}

// 为按钮绑定事件监听器
addButton.addEventListener('click', handleAdd);
subtractButton.addEventListener('click', handleSubtract);

在上述代码中，`.add-button`、`.subtract-button`和`.number-display`是页面中对应元素的CSS选择器，具体选择器可能需要根据实际的HTML结构来设定。`updateDisplay`函数用于更新页面上显示的数字。