投票排行榜网站（HTML+CSS+JS）

前端基础练习小项目

【已上传该项目完整资源至我的资源区，目前为0积分的免费资源】

初始页面 用户注册

 上面为登录和注册的初始页面，登录注册为浮动窗口

 以下是相关代码

    
    
    
    
    
    



    

        

            十佳创意摄影大赛
            决赛榜
        
    
    

        

            

            
        
    
    

            
CSDN：由一说一   Web实训作业

    

    
    
    
    
    
    
    
    



    

        

            

                用户登录
            
            

                用户注册
            
        
        

                

                    用户名
                    

                    密码
                    

                    

                    
                
        
    

    
    
    
    
    
    
    
    



    

        

            

                用户登录
            
            

                用户注册
            
        
        

            手机号码
            

            密码
            

            

            
        
    

登录成功后进入主页，主页显示参赛作品，每个作品下带投票按钮，可随时查看投票结果 

投票页面：

 

 投票结果排行榜页面：

    
    
    
    
    


    
    

        快给你喜欢的作品投票吧，每个用户投票期间有10次投票机会。投票截止时间为2021年9月01日20：00：00，请在活动截止前完成投票
        
    
    
    

        
        

            

                
活动介绍
                
投票开始：2021-6-30 20:00:00
                
投票截止：2021-9-01 20:00:00
                
投票规则：每个用户投票期间只能投10次
            
            
                
                
            
        
        

        

        
        

            
 
                 
                1号 
                细语 
                这是我的摄影作品，请为我投票吧 
                63 
                
 
            
            

                
                2号
                亲吻
                亲密无间
                58
                

            
            

                
                3号
                交心
                婚礼现场的摄影作品
                57
                

            
            

                
                4号
                快乐
                拍摄于劳动市集
                65
                

            
            

                
                5号
                打闹
                嬉戏打闹
                60
                

            
            

                
                6号
                全家福
                全家趣味合影
                68
                

            
            

                
                7号
                古堡男人与猫
                美男个人写真
                101
                

            
            

                
                8号
                艾伦
                今天抓拍到的一个帅气小哥
                88
                

            
            

                
                9号
                9号作品
                这里简介
                30
                

            
            

                
                10号
                10号作品
                这里简介
                38
                

            
            

                
                11号
                10号作品
                这里简介
                22
                

            
            

                
                12号
                10号作品
                这里简介
                45
                

            
           
            已经到底啦~快给你喜欢的作品投票吧!
        

        
            

                

                    
                    

                        
十佳创意摄影大赛
                        
决赛榜
                    
                
                
                

                    

                    
                
            
    
    
    

        

            
            
首页
  
         
         

             
            
排行榜
         
    
    
    

        CSDN：由一说一  Web实训作业
    


    

//main.js
//应用于main.html
    var cishu=0;//投票次数
    var pick = document.querySelectorAll('.pick > input');//获取所有投票按钮
    // localStorage.removeItem('username');
    var username=localStorage.username;//登录页面信息
    var userpwd=localStorage.userpwd;
        for(let i = 0; i < pick.length; i++){
            pick[i].onclick = function(){
            if(cishu>10){
                alert("每人只有10次投票机会");
                return;
            }
            if(username='' || username==null){
                alert("还未登录！将为你跳转登录页面");
                parent.location.href="init.html";//全网页转向
            }
            else{
            this.parentNode.parentNode.querySelector('.piao').innerText++;//票数+1
            //输入票数，.piao类在主页面隐藏
            alert('投票成功！');
            cishu++;//投票次数+1
            }
        }
    }
    var xssy = document.querySelector('#fixed1');//点击固定栏首页图标显示首页
    xssy.onclick=function(){
        document.querySelector('.list').innerHTML="";//清空页面
            document.querySelector('.paihang').innerHTML=`
            
            
            `;
            //隐藏并取消监听
            document.getElementById('result').style.display='none';
            document.getElementById('vote').style.display='block';
        // document.getElementById('result').style.visibility='hidden';//隐藏并取消监听
        // document.getElementById('vote').style.visibility='visible';//hidden,visible
    }
    var ph = document.querySelector('#paihangbutton');//点击首页查看排行榜按钮触发事件
    ph.onclick=function(){
            phb();
    }
    var xsphb = document.querySelector('#fixed2');//点击固定栏排行榜触发事件
    xsphb.onclick=function(){
        phb();
    }

    // 结果页面
    function phb(){//初始化页面  
        
            var itemlist = document.querySelectorAll('.voteitem');//获取类voteitem下元素
            var arr=[];//排序
            var data=[];//存储
            for(var i =0;i
            `;
            if(data1!=null || data1!=''){
                for(let i =0;i
                            
${i+1}
                            

                                
${data1[i].id}(${data1[i].name})
                                

                            
                            

                                ${data1[i].piao}票
                            
                        
                    `;
                }
            }
            document.getElementById('vote').style.display='none';//隐藏并取消监听
            document.getElementById('result').style.display='block';
            // document.getElementById('vote').style.visibility='hidden';//隐藏并取消监听
            // document.getElementById('result').style.visibility='visible';//显示结果页面
        }

/* 样式文件名：init.css
应用：投票网站初始界面
应用对象：init.html ;login.html ;reg.html
 */
 #header{width:900px;height:88px;;margin: 0 auto;font:20px 行楷,楷体;color: rgb(33, 45, 107);}
 #headertitle{position: absolute;left:300px;top:16px;text-align: center;}
 #titletop{display: inline; font-size: 53px;font-weight: 700;letter-spacing: 6.5px;font-family:"华文彩云";color: rgb(34, 17, 192);}
 #titlebottom{display: inline;font-size: 33px;font-weight: 500;letter-spacing: 10px;font-family: "华文琥珀";color:rgb(106, 161, 233)}
 #main{width:100%;height:600px;text-align: center;background-color:rgb(227, 231, 203);position: absolute;top:88px;padding: 0px;}
 #w{width:900px;height:100%; margin:0 auto;} 
 #loginimg{float:left;position:relative;top: 140px;}
 #loginimg img{width:500px;}
 iframe{width:389px;height:340px;position:relative;float:left;top:125px;}
 #footer{width:100%;height:62px;font-size: 10px;;text-align: center;background-color:rgb(255, 255, 255);vertical-align: middle;position: absolute;top:688px;}

#login{width:320px;height:270px;position:relative;float:left;background-color: rgb(253, 253, 253);padding:25px;border-radius: 19px;}/*border-radius设置圆角*/
#title{height:24px;padding: 12px 0 18px 0;}
#title a{font:bold 24px 行楷;text-decoration: none;}/*设置字体大小样式、取消下划线*/
#title a:hover{color: rgb(62, 116, 233);}
#title_left{width:155px;border-right: 1px solid #ccc;text-align: center;float: left;}
#title_right{width:155px;float: left;text-align: center;}
#skip_a{padding:25px 10px 15px 10px;text-decoration: none;}
input{width:208px;height:23px;margin: 10px;}
span{display: inline-block; text-align: center;width:66px;height:23px;}
#button{width:218px;height:36px; border-radius: 3px;line-height: 34px;margin-left: 82px;background-color: rgb(147, 181, 224);color: rgb(255, 255, 255);border-color:rgb(162, 194, 235) ;}
.ftimg{
    position: relative;
    top:0px;
    display: block;
    max-width: 70%;/* 控制图片大小 */
    max-height:80px;
    min-width: 30%;
    min-height: 80px;}

/* 文件名：main.css
应用于：main.html
*/
body{
    width:1514px;
    margin: 0px;
    background-image: url("images/创意摄影大赛背景.png");
    background-size:cover;
    background-attachment: fixed;
    color: rgb(50, 97, 185);
    font-size: 16px;
}/* 背景图固定，图片扩展填充，字体颜色类蓝色 */

#header{/* 头部 */
    height: 275px;
    text-align: center;
    position:relative;
    top:0px;
    border-style: solid;
    border-image-source: url("images/创意摄影比赛头图.jpg");
    border-image-slice:0 18 0 30;
    border-image-repeat: stretch;
    border-image-width: 0px 510px 0px 510px;
    background-image: url("images/创意摄影比赛头图.jpg");
    background-size: contain;
    background-position: center;
}/* 边框图案切割，填充方式为拉伸;背景图居中 */

#gg{/* 滚动公告小图标 */
    display: inline-block;
    position: absolute;
    top:0px;
    left:0px;
    max-width: 24px;
    background-color: #111111;
}

marquee{/* 滚动公告 */
    height:24px;
    background-color: rgb(14, 13, 13);
    color: rgb(255, 255, 255);
}

#headerimg{/* 头部标题图 */
    margin:0px;
    top:0;
    position: relative;
    top: 0px;
}

#mainpane{/* 主要容器 */
    width:1080px;
    height:1630px;
    position: relative;
    top:0px;
    margin:0px auto;
}
#time_relus_box{/* 活动介绍容器 */
    width:600px;
    height:310px;
    border: 10px solid #4D38B3;
    border-radius: 19px;
    background-color: #e6e3ed;
    padding: 20px 20px;
    margin:10px auto;
}

#frame{
    border: 3px solid #4D38B3;
    box-sizing: inherit;
    padding:25px 25px;
}

.title{/* 活动介绍标题 */
    font-size: 30px;
    text-align: center;
}

.relus{/* 活动介绍内容 */
    margin-top: 15px;
    font-size: 20px;
}

#paihangbutton{/* 查看排行榜按钮 */
    width:600px;
    height:60px;
    margin:20px 0;
    font-size: 24px;
}

#kjpm{
    min-height: 100px;
    max-height: 100px;
    position: absolute;
    top:260px;
    left:435px;
}
.paihang img{/* 排行榜图标 */
    position: absolute;
    top:286px;
    left:410px;
}

#dots1{/* 连接图标 */
    position: absolute;
    left:230px;
    top:343px;
    z-index: 1;
}

#dots2{
    position: absolute;
    right:230px;
    top:343px;
    z-index: 1;
}

#vote{/* 投票容器 */
    width:810x;
    height:1200px;
    border: 10px solid #4D38B3;
    display: block;
    /* visibility: visible; */
    /* 是否可见 */
    border-radius: 19px;
    background-color: #e3ddf0;
    padding: 20px 20px;
}

.voteitem{/* 投票条例容器 */
    width:242px;
    height:350px;
    border:6px solid #e6e3ed;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom:10px;
    padding-bottom: 25px;
    float: left;
}

.itemimg{/* 作品图 */
    display: block;
    max-width: 100%;/* 控制图片大小 */
    max-height:242px;
    min-width: 100%;
    min-height: 242px;
}

.id{/* 编号 */
    font-size: 20px;
    display: block;
    color: cornflowerblue;
    text-align: center;
    line-height: 30px;
    margin: 3px 0;
} 

.name{/* 名字 */
    font-size: 17px;
    display: block;
    color: rgb(13, 13, 14);
    text-align: center;
    line-height: 30px;
    margin:0px;
} 

.synopsis{/* 简介 */
    margin:0px;
    display: block;
    color: rgb(162, 165, 170);
    text-align: center;
    line-height: 20px;
}

.piao{
    display: none;/* 票数隐藏 */
}

.pick{/* 投票 */
    margin:0px;
    text-align: center;
    width:100%;
    height:50px;
    margin-top: 10px;
}
input{/* 按钮 */
    width:222px;
    height:30px;
    font-size: 18px;
    background-color: rgb(206, 189, 223);
    color: rgb(255, 255, 255);
    border-color: rgb(206, 189, 223);
}

/* 结果页面 */
#result{/* 投票结果容器 */
    display: none;
    /* visibility: hidden; */
    /* 隐藏并取消监听 */
}

#resultheader{/* 结果头部 */
    position: absolute;
    top:380px;left:70px;
    width:902px;
    height:190px;
    background-color: rgb(155, 127, 255);
    border-radius: 32px 32px 0px 0px;
}

#resultheadimg{
    display: block;
    max-width: 200;
    min-width: 200;
    max-height:200px;
    min-height: 200px;
    position:relative;
    top:0px;
    left:40px;
}

#resulttitle{
    position: absolute;
    right:100px;
    top:45px;
    text-align: center;
}

#titletop{
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 6.5px;
    font-family:"华文彩云";
    color: rgb(246, 248, 221);
    margin:10px 0;
}

#titlebottom{
    font-size: 38px;
    font-weight: 500;
    letter-spacing: 35px;
    font-family: "华文琥珀";
    color:rgb(96, 230, 185);
}

.mainbox{/* 主要排行容器 */
    position: absolute;
    top:570px;
    left:70px;
    min-width:835px;
    width:55%;
    height:1000px;
    margin:0 auto;
    display:flex;/* 弹性盒子 */
    border: 13px solid #4D38B3;
    border-radius: 0px 0px 32px 32px;
    background-color: #e6e3ed;
    padding: 20px 20px;
}

.list{/* 选手列表 */
    width:100%;
    height:100%;
    list-style: none;/* 取消符号 */
    margin:0;
    padding: 0;
}

ul{
    list-style: none;
    display: block;
    margin-block-start:1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

li{
    width:450px;
    height:80px;
    font-size:20px;
    display: flex;
    align-items: center;
    padding: 0 0;
}

.mingci{/* 名次 */
    color: rgb(5, 5, 5);
    background-image: url("images/排行榜.png");/* 默认名次图标 */
    background-size: contain;/* 缩小图片来适应 */
    width:50px;
    height:50px;
    text-align: center;
    box-sizing:border-box;/* 容器大小包括border和padding */
    padding: 16px 0px;
}

#paiming1{/* 重设第一名样式 */
    color: rgb(255, 255, 255);
    background-image: url("images/排行.png");
}

#paiming2{/* 重设第二名样式 */
    color: rgb(255, 255, 255);
    background-image: url("images/排行\ \(1\).png");
}

#paiming3{/* 重设第三名样式 */
    color: rgb(255, 255, 255);
    background-image: url("images/排行\ \(2\).png");
}

.resultname{/* 名字左对齐 */
    text-align: left;
}

.line{/* 排名条 */
    height:10px;
    background-color: blue;
    border-radius: 0 5px 5px 0;
}

.number{/* 票数 */
    position: absolute;
    right:35px;
}

#fixed{/* 固定容器 */
    position: fixed;
    right:0px;
    bottom: 50px;
    width:44px;
    height:89px;
}

#fixed1,#fixed2{/* 固定方块 */
    position: relative;
    right:0px;
    bottom: 0px;
    width:44px;
    height:44px;
    background-color: #8f8c8ca2;
    text-align: center;
    line-height: 40px;
}

#fixed2{
    bottom:-1px;
}

#sy{/* 图标层 */
    display: block;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 32px;
    height: 32px;
}

#phb{/* 设置图标层大小和位置 */
    display: block;
    position: absolute;
    bottom:6px;
    left: 6px;
    display: block;
    width: 32px;
    height: 32px;
}

#sy::before{/* 添加图标 */
    content:url("images/主页.png");
}

#phb::before{
    content:url("images/phb.png");
}

#sy:hover{/* 悬停样式 */
    content:url("images/主页\ \(1\).png");
}

#phb:hover{
    content:url("images/phb2.png")
}

#txtsy,#txtphb{/* 文字层 */
    position: absolute;/* 设置文字标的样式 */
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    border-radius: 3px;
    background-color: rgb(215, 170, 252);
    display: none;
    /* opacity: 0;透明度等级 
    transition: opacity .2s;*/
}/*过渡/
    /*  */

#txtsy{/* 设置文字标的位置 */
    top: 9px;/* 相对#fixed的位置 */
    right: 48px;
}
#txtphb{
    top:9px;
    right:48px;
}
#txtsy::after,#txtphb::after{/* 显示三角 */
    content: '';/* 输出空格 */
    display: block;
    position: absolute;
    top: 8px;/* 设置小三角位置 */
    right: -8px;
    width: 0;
    height: 0;/* 内框为0 */
    border: 4px solid transparent;/* 设置边框，颜色透明 */
    border-left: 4px solid rgb(215, 170, 252);/* 显示左边边框 */
}

#fixed1:hover #txtsy,#fixed2:hover #txtphb{/* 悬停方块样式 */
    display: block;/* 设为不透明 */
}

#footer{/* 底部 */
    margin: 15px 0px;
    width: 100%;
    height:30px;
    text-align: center;
}