选美投票系统案例

最新推荐文章于 2025-05-10 22:27:34 发布

诚实的土豆

最新推荐文章于 2025-05-10 22:27:34 发布

阅读量160

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Guo_22/article/details/131608590

版权

该文章描述了一个基于JavaScript的投票系统，当用户点击投票按钮时，对应的候选人票数会增加，并实时更新页面上的排名。系统使用数组存储候选人信息，通过遍历和排序来刷新前三名的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

主要实现要求：

当点击投票按钮时，相应图片下的数字会随之增加，同时前三甲中的三个人也会根据票数不断变换，根据票数决定排名。

主要代码如下：

首先是设计前三的模板，后续会根据主体部分排名进行数值替换

在main中则存放的所有参赛人员的信息，后期将会通过js直接写入

    <div class="top" id="top">
        <div>
            <img src="imgs/a.webp" alt=""><br>
            <span>榜眼</span><br>
            张三--90
        </div>
        <div>
            <img src="imgs/b.webp" alt=""><br>
            <span>状元</span><br>
            李四--100
        </div>
        <div>
            <img src="imgs/c.jpeg" alt=""><br>
            <span>探花</span><br>
            王五--80
        </div>
    </div>
    <hr>
    <div class="main" id="main"> 
        
    </div>

主要js代码如下：

 <script>
        let beauty=[
            {name:'a.webp',num:0},{name:'b.webp',num:0},{name:'c.jpeg',num:0},{name:'d.webp',num:0},
            {name:'e.webp',num:0},{name:'f.webp',num:0},{name:'g.webp',num:0},{name:'h.webp',num:0},
            {name:'i.webp',num:0},{name:'j.webp',num:0},{name:'k.webp',num:0},{name:'l.webp',num:0},
        ]
        //根据数组中的数据自动生成图片到页面
        let main=document.getElementById('main')
        function flushImg(){
            let s=''
            beauty.forEach((e,i)=>{
                s+=
                `<div>
                    <img src="imgs/${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 tops=document.getElementById('top')
        //更新前三甲
        function updateTop3(){
            let beauty2=[...beauty]
            beauty2.sort((e1,e2)=>{
                return e2.num-e1.num
            })
            //取数组的前三个对象
           beauty2=beauty2.slice(0,3)
           tops.innerHTML=
                `<div>
                    <img src="imgs/${beauty2[1].name}" alt=""><br>
                    <span>榜眼</span><br>
                    ${beauty2[1].name.slice(0,beauty2[1].name.indexOf('.'))}--${beauty2[1].num}
                </div>
                <div>
                    <img src="imgs/${beauty2[0].name}" alt=""><br>
                    <span>状元</span><br>
                    ${beauty2[0].name.slice(0,beauty2[0].name.indexOf('.'))}--${beauty2[0].num}
                </div>
                <div>
                    <img src="imgs/${beauty2[2].name}" alt=""><br>
                    <span>探花</span><br>
                    ${beauty2[2].name.slice(0,beauty2[2].name.indexOf('.'))}--${beauty2[2].num}
                </div>`
        }
    </script>

主要思路：

首先设置一个数组来存放每一个对象，通过循环，将每一个对象换成一个个实体标签写入main中。

通票方法的实现：

通过改变每个对象中的num值，实现点击一下按钮，num值+1。

前三甲的实现：

首先拷贝一份原数组（因为前面main中的内容是根据数组遍历实现的，所以不能改变原数组的顺序），通过sort方法排序后，选取他们的前三个，将他们的name，以及num属性通过实体标签更新到top中。