叫我潇洒哥 2021-09-27 16:42 采纳率: 57.1%
浏览 55
已结题

点击按钮发出声音，按一次进度条减少百分之十

点击按钮发出声音，按一次红色进度条减少百分之十，还有一个重新开始的按钮，就是重置进度条，html js完成

img

  • 写回答

2条回答 默认 最新

  • 雾里桃花 2021-09-27 16:58
    关注
    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 30px;
                border: 2px solid #000;
                border-radius: 20px;
                overflow: hidden;
            }
            
            .box .item {
                width: 100%;
                height: 100%;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class='box'>
            <div class='item' id='item'></div>
        </div>
        <div >
            <button id='sj'>射击</button>
            <button id='cz'>重置</button>
        </div>
    </body>
</html>
<script>
    let width = 100;
    
    // 射击
    $('sj').onclick = function() {
        if(width == 0) return;
        width -= 10 ;
        $('item').style.width = width + '%';
    }

    // 重置
    $('cz').onclick = function() {
        width = 100;
        $('item').style.width = width + '%';
    }
    function $(id) {
        return document.getElementById(id)
    }
    
    
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月5日
  • 已采纳回答 9月27日
  • 创建了问题 9月27日

悬赏问题

  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作