gpt4 book ai didi

javascript - 如何在 Javascript 中使用 'ArrowUp' 增加表情符号的大小

转载 作者:行者123 更新时间:2023-11-30 11:10:23 24 4
gpt4 key购买 nike

我正在尝试在用户按下向上箭头时将气球表情符号的大小不断增加 10px,并通过键盘上的向下箭头将大小减小 10px。

我一直在尝试设置:

let size = para.style.fontSize;

为了获得大小的变量,然后通过在我的函数中添加 +/- 10px 来调整该值。不过这个方法我试过了,好像不能设置:

para.style.fontSize = size +10;

有没有人有任何建议来让它工作?

注意:我没有在下面的代码中包含 size 变量,因为我发现它不起作用。

<!DOCTYPE html>
<html>

<head>
<title>Title of the document</title>
<style>
p {
font-size: 50px;
}
</style>
</head>

<body>
<p>🎈</p>

<script>
let para = document.querySelector('p');


window.addEventListener("keydown", e => {
if (e.key == "ArrowUp") {
para.style.fontSize = '60px';
} else {
para.style.fontSize = '40px';
}
});



</script>

</body>

</html>

最佳答案

要在多个 keydown 事件上实现增长/收缩行为,您需要为每个事件增加/减少 para.style.fontSize。完成此操作的方式如下:

<!DOCTYPE html>
<html>

<head>
<title>Title of the document</title>
<style>
p {
font-size: 50px;
}
</style>
</head>

<body>
<p>🎈</p>

<script>
let para = document.querySelector('p');

window.addEventListener("keydown", e => {

let currentSize = parseInt(para.style.fontSize);

// If unable to determine current fontSize, default to 50
if (isNaN(currentSize)) {
currentSize = 50;
}

// Define the rate of change
let changeAmount = 5;

if (e.key == "ArrowUp") {
para.style.fontSize = (currentSize + changeAmount) + 'px';
} else {
// Protect againt zero or negative font sizes via Math.max()
para.style.fontSize = Math.max(changeAmount, currentSize - changeAmount) + 'px';
}
});
</script>

</body>

</html>

关于javascript - 如何在 Javascript 中使用 'ArrowUp' 增加表情符号的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53938789/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com