js+css实现后台数据实时改变页面图片高度

Z时代
2024-01-10
分类：技术分享

实现功能：通过websocket实时数据，改变页面图片的高度，做到一个音频的电平跳动效果

有没有大神有类似的demo或者方法提供参考下，的确是有点懵的。

图片说明

这个就是我页面收到的电平跳动数据，现在想用图片来显示在页面，通过拿到数据调整图片高度来完成电平跳动的效果。有没有大佬有更好的方法。我实在还没弄懂，有没有可以参考的demo，谢谢。

回答

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .container{
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            height: 200px;
        }
        .container div{
            width: 100px;
            height: 30px;
            transition: all 100ms
        }
        #div1{
            background: red;
        }
        #div2{
            background: blue;
        }
        #div3{
            background: yellow;
        }
        #div4{
            background: gray;
        }
        #div5{
            background: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5"></div>
    </div>
<script type="text/javascript">
    setInterval(function () {
        document.getElementById('div1').style.height = parseInt( Math.random() * 100) + 'px'
        document.getElementById('div2').style.height = parseInt( Math.random() * 100) + 'px'
        document.getElementById('div3').style.height = parseInt( Math.random() * 100) + 'px'
        document.getElementById('div4').style.height = parseInt( Math.random() * 100) + 'px'
        document.getElementById('div5').style.height = parseInt( Math.random() * 100) + 'px'
    }, 100)
    // websocket接收并解析数据
    // websocket.onmessage = function(msg) {
    //  // 解析msg
    //  // 解析出来的数据按一定比例设置为div高度
    // }
</script>
</body>
</html>