如何用JavaScript的range bar实现表情包字体大小调节？

完全可行，而且滑块能提供更流畅的字体大小调节体验。以下是修改后的代码：

修改后的HTML代码 #

替换原有的所有字体大小按钮，添加range滑块控件及当前字体大小显示元素：

<div id="controles">
    <input class="form-control" type="file" accept="image/*">
    <!--estilo de bootstrap-->
    <textarea id="superior" rows="3" class="form-control">Texto superior</textarea>
    <textarea id="inferior" rows="3" class="form-control">Texto inferior</textarea>
    <button class="btn btn-primary">Guardar</button>
    <br><br>
    <!-- 新增滑块控件 -->
    <div>
        <label for="fontSizeSlider">字体大小:</label>
        <input type="range" id="fontSizeSlider" min="10" max="60" value="20" step="1">
        <span id="currentFontSize">20px</span>
    </div>
</div>
</div>
<div class="col-8">
    <div id="meme">
        <p id="texto-superior"></p>
        <p id="texto-inferior"></p>
    </div>
</div>

修改后的JavaScript代码 #

删除冗余的多个独立函数，改用统一的字体更新逻辑并绑定滑块事件：

// 统一更新字体大小的函数
function updateFontSize(size) {
    const upperText = document.getElementById('texto-superior');
    const lowerText = document.getElementById('texto-inferior');
    upperText.style.fontSize = `${size}px`;
    lowerText.style.fontSize = `${size}px`;
    // 同步显示当前字体大小
    document.getElementById('currentFontSize').textContent = `${size}px`;
}

document.addEventListener('DOMContentLoaded', function(){
    const fileInput = document.querySelector('input[type = "file"]');
    const upperInput = document.getElementById('superior');
    const lowerInput = document.getElementById('inferior');
    
    const upperText = document.getElementById('texto-superior');
    const lowerText = document.getElementById('texto-inferior');
    const fontSizeSlider = document.getElementById('fontSizeSlider');
    const guardar = document.querySelector('button');

    // 初始化字体大小为滑块默认值
    updateFontSize(fontSizeSlider.value);

    fileInput.onchange = function(){
        const file = fileInput.files[0];
        const reader = new FileReader();
        reader.onload = function(event){
            const url = event.target.result;
            document.getElementById('meme').style.backgroundImage = `url(${url})`;
        }
        reader.readAsDataURL(file);
    };
    
    upperInput.addEventListener('keyup', function() {
        const valor = upperInput.value;
        upperText.innerHTML = valor.replace(/\n/g, '<br>');
    });

    lowerInput.addEventListener('keyup', function() {
        const valor = lowerInput.value;
        lowerText.innerText = valor;
    });

    guardar.addEventListener('click', function(){
        const meme = document.getElementById('meme');
        htmlToImage.toJpeg(meme).then(function(resultado){
            const anchor = document.createElement('a');
            anchor.href = resultado;
            anchor.download = 'mi-image.jpg';
            anchor.click();
        });
    });

    // 滑块拖动时实时更新字体大小
    fontSizeSlider.addEventListener('input', function() {
        updateFontSize(this.value);
    });
});

关键修改说明 #

• HTML部分：移除6个冗余按钮，添加type="range"的滑块，设置min="10"、max="60"覆盖原有的字号范围，step="1"支持1px精细调节，同时增加字号显示元素提升用户体验。
• JS部分：
  • 用单个updateFontSize函数替代6个重复函数，简化代码结构。
  • 页面加载时初始化字号为滑块默认值，确保初始状态一致。
  • 绑定滑块的input事件，拖动时实时更新文本字号并同步显示数值。
  • 删除原代码中无效的myFunction.addEventListener语句（函数无法直接绑定点击事件）。

修改后用户可通过拖动滑块平滑调节字体大小，操作体验更流畅，代码也更易维护。

内容的提问来源于stack exchange，提问作者Ramenyum