返回

滑动组件的艺术：原生JS打造时间滑动选择器

前端

时间滑动选择器的艺术

在网页开发中，时间选择器是一个常见的组件，它允许用户轻松选择日期和时间。这些选择器在许多不同的应用程序中都有使用，例如日历、事件预订系统、航班预订系统等。

原生JavaScript实现时间选择器有许多优点。首先，它使您完全控制选择器的外观和功能。其次，它不需要任何额外的库或框架。第三，它可以在任何现代浏览器中运行。

原生JavaScript时间滑动选择器

HTML和CSS

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>时间选择器</h1>
  <div id="time-picker"></div>

  <script src="script.js"></script>
</body>
</html>

#time-picker {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.time-picker-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.time-picker-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time-picker-label {
  width: 50px;
  text-align: right;
}

.time-picker-input {
  width: 50px;
  height: 25px;
  border: 1px solid black;
  padding: 5px;
  text-align: center;
}

.time-picker-button {
  width: 50px;
  height: 25px;
  border: 1px solid black;
  padding: 5px;
  text-align: center;
  cursor: pointer;
}

JavaScript

const timePicker = document.getElementById('time-picker');

const timePickerContainer = document.createElement('div');
timePickerContainer.classList.add('time-picker-container');

const timePickerRow1 = document.createElement('div');
timePickerRow1.classList.add('time-picker-row');

const timePickerLabel1 = document.createElement('div');
timePickerLabel1.classList.add('time-picker-label');
timePickerLabel1.innerHTML = '小时';

const timePickerInput1 = document.createElement('input');
timePickerInput1.classList.add('time-picker-input');
timePickerInput1.type = 'number';
timePickerInput1.min = 0;
timePickerInput1.max = 23;
timePickerInput1.value = 0;

const timePickerButton1 = document.createElement('button');
timePickerButton1.classList.add('time-picker-button');
timePickerButton1.innerHTML = '+';

const timePickerRow2 = document.createElement('div');
timePickerRow2.classList.add('time-picker-row');

const timePickerLabel2 = document.createElement('div');
timePickerLabel2.classList.add('time-picker-label');
timePickerLabel2.innerHTML = '分钟';

const timePickerInput2 = document.createElement('input');
timePickerInput2.classList.add('time-picker-input');
timePickerInput2.type = 'number';
timePickerInput2.min = 0;
timePickerInput2.max = 59;
timePickerInput2.value = 0;

const timePickerButton2 = document.createElement('button');
timePickerButton2.classList.add('time-picker-button');
timePickerButton2.innerHTML = '+';

const timePickerRow3 = document.createElement('div');
timePickerRow3.classList.add('time-picker-row');

const timePickerLabel3 = document.createElement('div');
timePickerLabel3.classList.add('time-picker-label');
timePickerLabel3.innerHTML = '秒';

const timePickerInput3 = document.createElement('input');
timePickerInput3.classList.add('time-picker-input');
timePickerInput3.type = 'number';
timePickerInput3.min = 0;
timePickerInput3.max = 59;
timePickerInput3.value = 0;

const timePickerButton3 = document.createElement('button');
timePickerButton3.classList.add('time-picker-button');
timePickerButton3.innerHTML = '+';

timePickerRow1.appendChild(timePickerLabel1);
timePickerRow1.appendChild(timePickerInput1);
timePickerRow1.appendChild(timePickerButton1);

timePickerRow2.appendChild(timePickerLabel2);
timePickerRow2.appendChild(timePickerInput2);
timePickerRow2.appendChild(timePickerButton2);

timePickerRow3.appendChild(timePickerLabel3);
timePickerRow3.appendChild(timePickerInput3);
timePickerRow3.appendChild(timePickerButton3);

timePickerContainer.appendChild(timePickerRow1);
timePickerContainer.appendChild(timePickerRow2);
timePickerContainer.appendChild(timePickerRow3);

timePicker.appendChild(timePickerContainer);

timePickerButton1.addEventListener('click', function() {
  const value = parseInt(timePickerInput1.value);
  if (value < 23) {
    timePickerInput1.value = value + 1;
  } else {
    timePickerInput1.value = 0;
  }
});

timePickerButton2.addEventListener('click', function() {
  const value = parseInt(timePickerInput2.value);
  if (value < 59) {
    timePickerInput2.value = value + 1;
  } else {
    timePickerInput2.value = 0;
  }
});

timePickerButton3.addEventListener('click', function() {
  const value = parseInt(timePickerInput3.value);
  if (value < 59) {
    timePickerInput3.value = value + 1;
  } else {
    timePickerInput3.value = 0;
  }
});