饮食健康系统中的饮食记录前端代码怎么写
时间: 2023-06-19 15:04:29 浏览: 121
饮食健康系统中的饮食记录前端代码需要使用 HTML、CSS 和 JavaScript 来完成。以下是一个简单的示例代码:
HTML:
```html
<div class="food-record">
<h2>饮食记录</h2>
<form>
<label for="food-name">食物名称:</label>
<input type="text" id="food-name" name="food-name" required>
<br>
<label for="food-calories">卡路里:</label>
<input type="number" id="food-calories" name="food-calories" required>
<br>
<label for="food-date">日期:</label>
<input type="date" id="food-date" name="food-date" required>
<br>
<button type="submit">添加</button>
</form>
<table>
<thead>
<tr>
<th>食物名称</th>
<th>卡路里</th>
<th>日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>炒饭</td>
<td>500</td>
<td>2021-01-01</td>
</tr>
<tr>
<td>牛肉拉面</td>
<td>700</td>
<td>2021-01-02</td>
</tr>
<tr>
<td>烤鸡腿</td>
<td>400</td>
<td>2021-01-03</td>
</tr>
</tbody>
</table>
</div>
```
CSS:
```css
.food-record {
max-width: 800px;
margin: 0 auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
```
JavaScript:
```javascript
const form = document.querySelector('form');
const tbody = document.querySelector('tbody');
form.addEventListener('submit', (event) => {
event.preventDefault();
const foodName = event.target.foodName.value;
const foodCalories = event.target.foodCalories.value;
const foodDate = event.target.foodDate.value;
const row = `
<tr>
<td>${foodName}</td>
<td>${foodCalories}</td>
<td>${foodDate}</td>
</tr>
`;
tbody.insertAdjacentHTML('beforeend', row);
event.target.reset();
});
```
这段代码实现了一个简单的饮食记录功能,用户可以输入食物名称、卡路里和日期,然后点击添加按钮将数据添加到表格中。用户输入的数据会被存储在表格中,以便用户随时查看和修改。