写一个简单的web登录网页,登录后进入新网页并显示一些图表
时间: 2024-02-02 10:18:25 浏览: 20
以下是一个简单的 web 登录网页的 HTML 和 JavaScript 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
</head>
<body>
<h1>登录</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登录">
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = document.querySelector('#username').value;
const password = document.querySelector('#password').value;
if (username === 'admin' && password === 'admin') {
window.location.href = 'dashboard.html';
} else {
alert('用户名或密码错误');
}
});
</script>
</body>
</html>
```
这个网页包括一个标题、一个登录表单,以及一个 JavaScript 模块来处理表单提交事件。当用户填写正确的用户名和密码并提交表单时,页面会重定向到名为 `dashboard.html` 的新页面。
在 `dashboard.html` 页面中,您可以使用图表库(如 `Chart.js`)来显示一些图表,例如:
```html
<!DOCTYPE html>
<html>
<head>
<title>仪表盘</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>欢迎来到仪表盘</h1>
<canvas id="myChart"></canvas>
<script>
const ctx = document.querySelector('#myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['红色', '蓝色', '绿色'],
datasets: [{
label: '颜色',
data: [12, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(75, 192, 192, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
```
这个网页包括一个标题、一个带有 ID 为 `myChart` 的画布元素,以及一个 JavaScript 模块来使用 Chart.js 库创建一个柱状图。您可以根据您的需求修改图表的数据和样式。