今天我们来实现的是页面计数器,就比如说twitter,Facebook的粉丝量,但是有一个动画效果,从0加载到一定的值。
来看实现效果:
太快了截不了图,大家可以自己运行一下试试哈哈哈
来看代码实现:
首先是html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Increment Counter</title>
</head>
<body>
<!-- twitter -->
<div class="counter-container">
<!-- fa-x放大三倍 -->
<i class="fab fa-twitter fa-3x"></i>
<div class="counter" data-target="12000"></div>
<span>Twitter Followers</span>
</div>
<!-- youtube -->
<div class="counter-container">
<i class="fab fa-youtube fa-3x"></i>
<div class="counter" data-target="5000"></div>
<span>YouTube Subscribers</span>
</div>
<!-- facebook -->
<div class="counter-container">
<i class="fab fa-facebook fa-3x"></i>
<div class="counter" data-target="7500"></div>
<span>Facebook Fans</span>
</div>
<script src="script.js"></script>
</body>
</html>
这里主要就是设置一个最大值data-target,然后设置三个图标所在的布局
再来看css
* {
box-sizing: border-box;
}
body {
background-color: #8e44ad;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.counter-container{
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: 30px 50px;
}
.counter{
font-size: 60px;
margin-top: 10px;
}
@media(max-width){
body{
flex-direction: column;
}
}
这里主要就是一个样式的设置以及媒体查询,当屏幕小时,三个标志会垂直排列。
再来看JavaScript部分:
const counters = document.querySelectorAll('.counter')
counters.forEach(counter =>{
counter.innerText = '0 '
const updateCounter = () =>{
// getAttribute获取节点的属性
// data-target :事件的作用对象
const target = Number(counter.getAttribute('data-target'))
// target就是设置的最终值
// console.log(typeof target, target) number 12000
const c = Number(counter.innerText)
// 每次增加多少,取决于快慢
const increment = target / 200
// console.log(increment)
if(c < target){
// 向上取整
counter.innerText = `${Math.ceil(c + increment)}`
// 1ms重新调用,不然它会在第一次运行完就结束
setTimeout(updateCounter,1)
}else{
counter.innerText = target
}
}
updateCounter()
})
这里就是写了一个改变数字的函数,然后里面有一个increment控制增加的快慢,然后每1ms调用一次这个函数,实现了数字的持续递增,直到设置的data-target值结束。
这就是今天的小demo,可以用在博客的底部栏展示类似于访问人数这种,今天的小demo就到此为止了,大家加油!