目录
实现原理
该页面由html+css+JavaScript实现，
-
HTML页面结构：创建一个包含投票主题、选项和提交按钮的HTML页面结构。可以使用HTML标记定义投票问题和选项，例如使用
<p>标签来显示问题，使用<input>或<button>标签定义选项和提交按钮。 -
CSS样式：使用CSS来设置投票页面的样式，包括字体、颜色、布局等。通过为HTML元素添加类或ID并在CSS中选择相应的类或ID，可以对页面进行样式设置。
-
JavaScript事件监听：使用JavaScript代码来监听用户的点击事件。通过给选项按钮添加点击事件监听器或提交按钮添加点击事件监听器，可以捕获用户的选择并执行相应的逻辑。
-
投票计数和存储：为每个选项创建一个计数器变量，并在用户点击相应选项时递增计数器值。可以使用JavaScript的变量和声明语句来创建和管理计数器变量。
-
动态更新页面：在用户提交投票后，使用JavaScript代码来更新页面显示的投票结果。可以将计数器值动态地插入到页面元素中，以显示当前的投票结果。
-
可视化统计：你可以使用JavaScript的图表库或其他可视化工具来生成投票结果的图表。这些库可以将投票数据转换为直观的图表，使用户更易于理解投票结果。
JavaScript实现投票的原理
-
创建投票主题：使用JavaScript编写的投票应用程序可以提供一个界面，允许管理员创建投票主题。管理员可以输入投票的问题、选项和其他相关信息。
-
用户投票：一旦投票主题创建完成，其他用户可以访问投票应用程序，并选择他们支持的选项。当用户点击选项时，JavaScript代码会捕获用户的选择并执行相应的逻辑。
-
投票计数：每当用户投票时，JavaScript代码会更新投票结果。它会将用户的选择计入相应选项的计数器中。
-
实时统计：投票应用程序可能会提供实时投票统计，即每当有新的投票提交时，JavaScript代码会立即更新统计数据，以便用户可以实时了解当前的投票结果。
-
结果展示：投票应用程序还可以提供一个界面，允许用户查看当前的投票结果。JavaScript代码可以根据保存的投票计数数据生成统计图表或其他可视化效果，以便用户更直观地了解投票结果。
代码实现效果图
实现代码
<!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>
.top{
display:flex;
justify-content:center;
}
.top>div{
margin-left: 30px;
text-align: center;
}
.top>div>span{
color: goldenrod;
font-size: large;
}
.top>div:nth-child(1),.top>div:nth-child(3){
margin-top: 30px;
}
img{
width: 150px;
height: 200px;
border-radius: 12px;
}
img:hover{
transform: translate(5px,5px);
box-shadow: 5px 5px rebeccapurple;
}
/* 主体部分*/
.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:hover{
box-shadow:0 8px 5px rgb(188, 63, 188);
}
button:active{
transform: translateY(5px);
box-shadow:0 3px 5px rgb(188, 63, 188);
}
</style>
</head>
<body>
<h1 style="text-align: center;color: blue;">未来之星前三甲</h1>
<div class="top" id="top1">
<div>
<img src="../img/a.webp"><br>
<span>榜眼</span><br>
张三--90
</div>
<div>
<img src="../img/b.webp"><br>
<span>状元</span><br>
李四--100
</div>
<div>
<img src="../img/c.webp"><br>
<span>探花</span><br>
王五--80
</div>
</div>
<hr>
<div class="main" id="main">
<div>
<img src="../img/a.webp" alt=""><br>
<span>a--0</span><br>
<button>投票</button>
</div>
</div>
</body>
<script>
let beauty=[
{name:'a',num:0},
{name:'b',num:0},
{name:'c',num:0},
{name:'d',num:0},
{name:'e',num:0},
{name:'f',num:0},
{name:'g',num:0},
{name:'h',num:0},
{name:'i',num:0},
{name:'j',num:0},
{name:'k',num:0},
{name:'l',num:0},
]
//根据数组中的数据字典==自动生成
let main= document.getElementById('main')
function flushImg(){
let s=''
beauty.forEach((e,i) => {
s+=`<div>
<img src="../img/${e.name}.webp"><br>
<span>${e.name}--${e.num}</span><br><br>
<button οnclick="vote(${i})">投票</button>
</div>`
})
main.innerHTML=s
}
flushImg()
//投票函数
function vote(i){
beauty[i].num++
//刷新主体
flushImg()
//更新前三甲
updateTop3()
}
let top1=document.getElementById('top1')
//更新前三甲
function updateTop3(){
//原数组拷贝
let beauty2=[...beauty]
beauty2.sort((e1,e2)=>{
//倒序
return e2.num-e1.num
})
//取前三
beauty2= beauty2.slice(0,3)
top1.innerHTML=`<div>
<img src="../img/${beauty2[1].name}.webp"><br>
<span>榜眼</span><br>
${beauty2[1].name}--${beauty2[1].num}
</div>
<div>
<img src="../img/${beauty2[0].name}.webp"><br>
<span>状元</span><br>
${beauty2[0].name}--${beauty2[0].num}
</div>
<div>
<img src="../img/${beauty2[2].name}.webp"><br>
<span>探花</span><br>
${beauty2[2].name}--${beauty2[2].num}
</div>`
}
</script>
</html>
9911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
