简单实现数字的滚动

260 阅读1分钟

简单实现数字的滚动

获取dom元素之后,利用定时器进行简单的判断
```js```
let spanDom = document.querySelector('span')
let start = 0
setInterval(() =>{
    start++
    if(start>9){
        start = 0
    }
    spanDom.style.transform = `translate(-50%,-${start*10}%)`
}, 1000)
```
```

```css```
ul{
    margin-top: 200px;
}
ul li{
    margin:0 auto;
    width: 20px;
    height: 30px;
    text-align: center;
    border:2px solid rgba(221,221,221,1);
    border-radius:4px;
    list-style:none
}
ul li span{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%,0);
    transition: transform 500ms ease-in-out;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 17px;
}
```
```