实现投票选星

最新推荐文章于 2024-06-12 12:52:53 发布

m0_62102386

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量29

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_62102386/article/details/131603558

版权

未来之星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            display: flex;
            justify-content: center;
        }
        .top>div{
            margin-top: 30px;
            margin-left: 30px;
            text-align: center;
        
        }
        .top>div>span{
            color: bisque;
            font-size: large;
        }
        .top>div:nth-child(1),.top>div:nth-child(3){
            margin-top: 30px;
        }
        img{
            width: 150px;
            height: 200px;
            border-radius: 10px;
        }
        img:hover{
            box-shadow: 5px 5px 5px rebeccapurple;
            transform: translate(5px,5px);
        }
        /*主体部分的布局*/
        .main{
            display: flex;
            justify-content: space-around;
            /*自动换行*/
            flex-wrap: wrap;
        }
        .main>div{
            text-align: center;
            margin-left: 30px;
            margin-top: 20px;
        }
        .main button{
            width: 90px;
            height: 40px;
            border-radius: 10px;
            border: none;
            background-color: rebeccapurple;
            font-size: large;
            color: aliceblue;

        }
       
        button:active{
            transform:translateY(5px);
            box-shadow:0px 3px 5px rgb(91, 8, 76)
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;color: blue;">未来之星前三甲</h1>
    <div class="top" id="top">
        <div>
            <img src="./期末作业图片/a.png" alt=""><br>
            <span>榜眼0</span><br>
            张三---90
        </div>
        <div>
            <img src="./期末作业图片/b.png" alt=""><br>
            <span>状元</span><br>
            李四---100
        </div>
        <div>
            <img src="./期末作业图片/c.png" alt=""><br>
            <span>探花</span><br>
            王五---85
        </div>
    </div>
    <hr>
    <div  id="main" class="main">
        <div>
            <img src="./期末作业图片/d.png" alt=""><br>
            <span>a-0</span><br>
            <button>投票</button>
        </div>
    </div>
</body>
<script>
let beauty=[
    {name:'a.png',num:0},{name:'b.png',num:0},{name:'c.png',num:0},
    {name:'d.png',num:0}
]

//根据数组中的数据，自动生成图片到页面
let main=document.getElementById('main')
function flushimg(){
let s=''
beauty.forEach((e,i)=>{
    s+=
    `<div>
        <img src="./期末作业图片/${e.name}" alt=""><br>
        <span>${e.name.slice(0,e.name.indexOf('.'))}--${e.num}</span> <br><br>
        <button onclick="vote(${i})">投票</button>
    </div>`
})
main.innerHTML=s
}
//调用flushimg函数
flushimg()
//投票函数
function vote(i){
    beauty[i].num++
    //刷新主体（数组中的数据）
    flushimg()
    //更新前三甲
    updateTop3()
}
let top1 =document.getElementById('top')
//更新前三甲
function updateTop3(){
    let beauty2=[...beauty]
    beauty2=beauty2.sort((e1,e2)=>{
        return e2.num-e1.num
    })

 beauty2=beauty2.slice(0,3)
top1.innerHTML=
    `<div>
            <img src="./期末作业图片/${beauty2[1].name}" alt=""><br>
            <span>榜眼0</span><br>
           
            ${beauty2[1].name.slice(0,beauty2[1].name.indexOf('.'))}--${beauty2[1].num}
        </div>
        <div>
            <img src="./期末作业图片/${beauty2[0].name}" alt=""><br>
            <span>状元</span><br>
            
            ${beauty2[0].name.slice(0,beauty2[0].name.indexOf('.'))}--${beauty2[0].num}
        </div>
        <div>
            <img src="./期末作业图片/${beauty2[2].name}" alt=""><br>
            <span>探花</span><br>
            ${beauty2[2].name.slice(0,beauty2[0].name.indexOf('.'))}--${beauty2[2].num}
    </div>`

}
</script>
</html>