薛乎乎~ 2024-10-08 14:11 采纳率: 81%
浏览 8
已结题

利用JavaScript实现下列内容

利用js实现图片中的内容
利用单选按钮实现投票，选定哪个，哪个投票人数加1，然后相应的柱状图变化。利用div的颜色块长度显示投该选项的人数，及占总人数的百分比

img


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        hr{
            width: 100%;
            color: azure;
        }
        .flex-container{
            display: flex;
        }
        .flex-container .box{
            width: 50%;
            margin-left: 20px;
            height: 30px;
        }
        span{
            color: orange;
        }
        .box1{
            width: 30%;
            background-color: rgb(5, 217, 185);
            margin: 0;
        }
    </style>
</head>
<body>
    <h3>你被“最美乡村女校长”感动了吗</h3>
    <h4>你被“最美乡村女校长”感动了吗<span>（必选）</span></h4>
    <hr>
    <div class="flex-container">
        <div class="box"><input type="radio"name="radio1">很感动，她很美</input></div>
        <div class="box">
            <div class="box1"></div>
            <div></div>
        </div>
    </div>
    <hr>
    <div class="flex-container">
        <div class="box"><input type="radio"name="radio1" click="radio1()">很感动，她很美</input></div>
        <div class="box"></div>
    </div>
    <hr>
    <div class="flex-container">
        <div class="box"><input type="radio"name="radio1">没感觉，这样的事很多</input></div>
        <div class="box"></div>
    </div>
    <hr>
    <div class="flex-container">
        <div class="box"><input type="radio"name="radio1">没敢动，可能是炒作</input></div>
        <div class="box"></div>
    </div>
    <hr>
    <script>
        window.onload=function(){
            let num=10000;
            function radio1(num){
                num+=1;
                alert(num)
            }
        }
    </script>
</body>
</html>

```

  • 写回答

1条回答 默认 最新

  • LotteChar 2024-10-08 16:28
    关注
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票系统</title>
    <style type="text/css">
        hr{
            width: 100%;
            color: azure;
        }
        .flex-container{
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .flex-container .box{
            flex-grow: 1;
            margin-right: 20px;
        }
        span{
            color: orange;
        }
        .bar-container{
            width: 500px;
            background-color: #ddd;
            height: 15px;
            position: relative;
            margin-right: 80px;
        }
        .bar{
            height: 15px;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: width 0.5s ease;
        }
        .bar-fill{
            height: 15px;
            width: 0%;
            background-color: #4CAF50;
        }
        #bar1-fill { background-color: #2196F3; }
        #bar2-fill { background-color: #FF9800; }
    </style>
</head>
<body>
<h2>你被“最美乡村女校长”感动了吗</h2>

<h4>你被“最美乡村女校长”感动了吗<span>（必选）</span></h4>
<hr>
<div class="flex-container">
    <div class="box"><input type="radio" name="vote" value="0" onclick="vote(this)">很感动，她很美</div>
    <div class="bar-container"><div class="bar" id="bar0"><div class="bar-fill" id="bar0-fill"></div></div></div>
    <div id="text0"></div>
</div>
<div class="flex-container">
    <div class="box"><input type="radio" name="vote" value="1" onclick="vote(this)">没感觉，这样的事很多</div>
    <div class="bar-container"><div class="bar" id="bar1"><div class="bar-fill" id="bar1-fill"></div></div></div>
    <div id="text1"></div>
</div>
<div class="flex-container">
    <div class="box"><input type="radio" name="vote" value="2" onclick="vote(this)">没敢动，可能是炒作</div>
    <div class="bar-container"><div class="bar" id="bar2"><div class="bar-fill" id="bar2-fill"></div></div></div>
    <div id="text2"></div>
</div>
<div class="flex-container">
    <div class="box"><input type="radio" name="vote" value="3" onclick="vote(this)">没敢动，可能是炒作</div>
    <div class="bar-container"><div class="bar" id="bar3"><div class="bar-fill" id="bar3-fill"></div></div></div>
    <div id="text3"></div>
</div>
<hr>
<script>
    var votes = [0, 0, 0,0];
    var totalVotes = 0;

    function vote(radio) {
        var selectedOption = radio.value;
        votes[selectedOption]++;
        totalVotes++;

        for (var i = 0; i < votes.length; i++) {
            var barFill = document.getElementById('bar' + i + '-fill');
            var text = document.getElementById('text' + i);
            var percentage = (votes[i] / totalVotes) * 100;

            barFill.style.width = percentage + '%';
            text.textContent = votes[i] + '票 (' + percentage.toFixed(2) + '%)';
        }
    }
</script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

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