css上下键切换数字 |css如何让字竖着

css 效果网站，css3 rotation，css怎么去除按钮样式，css怎么设置图片弹跳，css 多行文字竖直显示，css激活时变换成小手，css如何让字竖着 css上下键切换数字 |css如何让字竖着

html:
<div class="number">1</div>
css:
.number {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 30px;
border: 1px solid #ccc;
}
.number:focus {
outline: none;
}

上述代码是一个数字盒子，当大家点击数字盒子时，它会获得焦点，样式变为蓝色边框。但这时还不能通过上下键切换数字。

接下来，大家用JavaScript来完成这一功能。

let number = document.querySelector('.number');
window.addEventListener('keydown', function(e) {
let key = e.keyCode;
let n = Number(number.innerText);
if (key === 38) {
number.innerText = n + 1;
} else if (key === 40) {
number.innerText = n - 1;
}
});

上述代码实现了监听键盘事件，当按下上下键时，数字盒子中的数字会随之改变。

最后，大家来做一些样式优化：

.number:focus {
outline: none;
background-color: #f0f0f0;
}
.number:hover {
background-color: #f5f5f5;
}

上述代码实现了数字盒子的聚焦和悬停状态下的背景色变化，让交互更加友好。

到此为止，上下键切换数字的功能就完成了。如果你有其他的调整或更好的实现方式，欢迎在下方评论区与大家分享。