原生js模拟手机投票功能

最新推荐文章于 2022-06-08 06:58:50 发布

wxt_

最新推荐文章于 2022-06-08 06:58:50 发布

阅读量301

点赞数

分类专栏： js 文章标签：投票功能

本文链接：https://blog.youkuaiyun.com/wxt_wjc/article/details/103935014

版权

js 专栏收录该内容

15 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,ul,button{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width: 700px;
            padding: 10px 50px;
            margin: 0 auto;
        }
        ul{
            list-style: none;
        }
        ul li{
            width: 600px;
            border: 1px solid #333;
            height: 100px;
            /* padding: 0 20px; */
            /* line-height: 100px; */
            position: relative;

        }
        ul li i{
            position: absolute;
            top: 30px;
            left: 100px;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background-color: red;
            border-radius: 8px;
        }
        ul li span{
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 5px;
            background-color: #ccc;
            margin-left: 20px;
            margin-top: 30px;
        }
        ul li button{
            float: right;
            height: 40px;
            width: 100px;
            margin-top: 30px;
            margin-right: 10px;
        }
        ul li .bar{
            width: 600px;
            height: 10px;
            border-top: 2px solid #000;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        ul li .bar .percent{
            /* width: 300px; */
            height: 10px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li>
                <span>小红</span>
                <i>0</i>
                <button>投票</button>
                <div class="bar">
                    <div class="percent"></div>
                </div>
            </li>
            <li>
                <span>小米</span>
                <i>0</i>
                <button>投票</button>
                <div class="bar">
                        <div class="percent"></div>
                </div>

            </li>
            <li>
                <span>小明</span>
                <i>0</i>
                <button>投票</button>
                <div class="bar">
                        <div class="percent"></div>
                </div>

            </li>
            <li>
                <span>小花</span>
                <i>0</i>
                <button>投票</button>
                <div class="bar">
                        <div class="percent"></div>
                </div>

            </li>
            <li>
                <span>小兰</span>
                <i>0</i>
                <button>投票</button>
                <div class="bar">
                        <div class="percent"></div>
                </div>
            </li>
        </ul>
    </div>
    <script>
        var buttons = document.getElementsByTagName("ul")    
        [0].getElementsByTagName("button");
        var num = document.getElementsByTagName("i");
        var percent = document.getElementsByClassName("percent");

        for (var i = 0; i < buttons.length; i++) {
            (function(i){
                var count = 0;

                buttons[i].onclick = function(){
                    count++;
                    num[i].innerText = count;
                    var total = 0;
                    for (var j = 0; j < num.length; j++) {
                        total += Number(num[j].innerText)
                    } 
                    for (let y = 0; y < percent.length; y++) {
                        percent[y].style.width = 100*num[y].innerText/total + "%"
                
                    }
                }
            })(i)  
        }
 
    </script>
    
</body>
</html>