回复
定时器自动放大和缩小字
深处莫神
发布于 2022-8-9 20:41
浏览
0收藏
自动放大缩小字
1.判断条件如果放大超出范围，则定时器调用缩小函数，使字体变小。 同理，如果缩小到一定程度，则定时器调用放大函数，使字体变大。
2.注意再次调用定时器的时候，记得清除上一个使用的定时器，不然会同时存在两个定时器，相互冲突。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="friend" style="font-size: 15px;">
你好，我们是朋友
</div>
</body>
</html>
<script>
var friend = document.getElementById('friend')
// console.log('snish')
function big() {
var size = parseInt(friend.style.fontSize)
if (size > 100) {
clearInterval(T)
T = setInterval(small, 10)
}
else {
friend.style.fontSize = `${size + 1}px`
}
}
var T = setInterval(big, 10)
function small() {
var size = parseInt(friend.style.fontSize)
if (size < 10) {
clearInterval(T)
T = setInterval(big, 10)
}
else {
friend.style.fontSize = `${size - 1}px`
}
}
</script>
分类
标签
赞
收藏
回复
相关推荐
