帮我写一个能够投票以及在图表中汇总用户投票结果的网页源码
时间: 2024-05-27 14:15:01 浏览: 6
<!DOCTYPE html>
<html>
<head>
<title>投票网页</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body{
background-color: #f2f2f2;
font-family: Arial, sans-serif;
color: #333;
}
h1{
text-align: center;
margin-top: 50px;
}
form{
width: 50%;
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
fieldset{
border: none;
margin-bottom: 20px;
}
label{
display: block;
margin-bottom: 10px;
}
input[type="radio"]{
margin-right: 10px;
}
button{
display: block;
margin: auto;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
canvas{
display: block;
margin: auto;
margin-top: 50px;
max-width: 80%;
max-height: 500px;
}
</style>
</head>
<body>
<h1>投票网页</h1>
<form id="vote-form">
<fieldset>
<legend>你最喜欢的编程语言是什么?</legend>
<label>
<input type="radio" name="vote" value="java">
Java
</label>
<label>
<input type="radio" name="vote" value="python">
Python
</label>
<label>
<input type="radio" name="vote" value="javascript">
JavaScript
</label>
<label>
<input type="radio" name="vote" value="csharp">
C#
</label>
</fieldset>
<button type="submit">投票</button>
</form>
<canvas id="chart"></canvas>
<script>
const form = document.getElementById('vote-form');
const chart = document.getElementById('chart');
form.addEventListener('submit', (e) => {
e.preventDefault();
const selectedOption = document.querySelector('input[name="vote"]:checked').value;
const data = JSON.parse(localStorage.getItem('data')) || {'java':0, 'python':0, 'javascript':0, 'csharp':0};
data[selectedOption] += 1;
localStorage.setItem('data', JSON.stringify(data));
showChart();
});
function showChart(){
const data = JSON.parse(localStorage.getItem('data')) || {'java':0, 'python':0, 'javascript':0, 'csharp':0};
const labels = Object.keys(data);
const values = Object.values(data);
const myChart = new Chart(chart, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: '投票结果',
data: values,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
showChart();
</script>
</body>
</html>
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)