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

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


<!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>

用js控制，这个背景颜色样式就行。点击时，background-size-10% .重置时清零