前言
代码在小程序端展示会异常
需要的请移步网址 uurr.cn 获取 
效果
简介
在本文中，我们将介绍一个简单的体重记录表的网页代码示例。该代码能够实现以下功能：
- 用户可以输入体重数据和密码。
- 输入正确密码后，将数据以时间戳的形式写入到文件中。
- 读取已保存的体重数据，并生成体重变化折线图。
显示体重数据的记录表，包括日期、体重和与上次体重的差值。
代码功能详解- 体重数据提交和密码校验
代码首先检查用户是否提交了体重数据，并验证密码是否正确。只有密码正确时才允许提交体重数据，否则会提示密码错误。
体重数据处理
如果存在本地文件 "weights.csv"，代码会读取其中的体重数据，并生成折线图。同时，会计算体重数据间的差值，并标注在记录表中，用不同颜色表示增减情况。
生成折线图
利用Plotly.js库绘制折线图，展示体重变化趋势。每个数据点上将显示具体的体重数值。
记录表展示
在记录表中展示体重数据，包括第N天、日期、体重以及与上一次体重的差值。差值会根据正负情况以不同颜色标识，并保留两位小数。
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体重记录表</title>
<!-- 引入 Plotly.js 用于绘制折线图 -->
<script src="https://www.w3school.com.cn/lib/graphics/plotly.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
color: #333;
}
h2 {
color: #333;
text-align: center;
}
form {
margin-bottom: 20px;
}
input[type="text"] {
padding: 10px;
width: calc(100% - 20px);
margin-bottom: 10px;
}
input[type="submit"] {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #45a049;
}
#chart {
margin-bottom: 20px;
width: 100%;
}
@media screen and (max-width: 759px) {
/* 在屏幕宽度大于760像素时应用以下样式 */
#chart {
height: 260px;
}
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<?php
// 检查是否有体重数据提交
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["weight"])) {
$weight = $_POST["weight"];
$paw = $_POST["paw"];
// 检查密码是否正确
if($paw != "gtt") {
echo "密码错误，请重新输入。密码是你的名字拼音小写";
exit;
// 停止执行后续代码
}
// 生成当前时间戳
$timestamp = date("Y-m-d H:i:s");
// 将数据写入本地文件
$file = fopen("weights.csv", "a");
fwrite($file, "$timestamp,$weight\n");
fclose($file);
// 提交成功后进行重定向
header('Location: index.php');
} else {
// 读取体重数据并生成折线图
// 检查文件是否存在
if (file_exists("weights.csv")) {
$weights = [];
$timestamps = [];
$file = fopen("weights.csv", "r");
while (!feof($file)) {
$line = fgets($file);
$data = explode(",", $line);
if (count($data) == 2) {
$timestamps[] = $data[0];
$weights[] = $data[1];
}
}
fclose($file);
// 检查是否有体重数据，如果有则生成折线图的JavaScript代码
if (!empty($weights)) {
// 计算日期差
$prev_date = date('Y-m-d', strtotime($timestamps[0]));
$start_date = strtotime($prev_date);
$table_data = [];
for ($i = 0; $i < count($weights); $i++) {
$curr_date = date('Y-m-d', strtotime($timestamps[$i]));
if ($curr_date != $prev_date) {
$date_diff++;
$prev_date = $curr_date;
}
$table_data[] = [
'day' => $date_diff + 1, // 加1修正为第一天
'date' => $timestamps[$i],
'weight' => $weights[$i]
];
// 判断差值
for ($j = 1; $j < count($table_data); $j++) {
$prev_weight = $table_data[$j - 1]['weight'];
$curr_weight = $table_data[$j]['weight'];
$weight_diff = $curr_weight - $prev_weight;
$weight_diff = number_format($weight_diff, 2);
// 保留两位小数
$table_data[$j]['weight_diff'] = $weight_diff;
// 标记颜色
if ($weight_diff < 0) {
$table_data[$j]['color'] = 'green';
} elseif ($weight_diff > 0) {
$weight_diff = '+' . $weight_diff;
$table_data[$j]['color'] = 'red';
}
}
}
echo '<div id="chart"></div><div id="chart_"></div>';
echo '<script>';
echo 'var trace = {';
echo ' x: [' . implode(',', array_map('json_encode', array_column($table_data, 'date'))) . '],';
echo ' y: [' . implode(',', array_column($table_data, 'weight')) . '],';
echo ' type: "scatter"';
echo '};';
echo 'var layout = {';
echo ' title: "体重变化图",';
echo ' xaxis: {';
echo ' title: ""';
echo ' },';
echo ' yaxis: {';
echo ' title: ""';
echo ' },';
echo ' margin: {';
echo ' l: 40,';
echo ' r: 40,';
echo ' t: 40,';
echo ' b: 40';
echo ' },';
echo ' hovermode: false,';
echo ' modebar: {';
echo ' displayModeBar: false';
echo ' }';
echo '};';
echo 'Plotly.newPlot("chart", [trace], layout, {
displayModeBar: false,
responsive: true,
staticPlot: true,
});';
echo '</script>';
echo '</div>';
}
} else {
echo "暂无体重数据。";
}
?>
<form method="post" action="index.php">
<input type="text" autocomplete="off" id="weight" name="weight" placeholder="请输入当前体重（kg*2）" required><br>
<input type="text" autocomplete="off" id="paw" name="paw" placeholder="请输入当前密码哦 (paw)" required><br>
<input type="submit" value="提交">
</form>
<?php
// 输出表格
echo '<h3>体重记录</h3>';
echo '<table>';
echo '<tr><th>第N天</th><th>日期</th><th>体重（wg）</th><th>差值</th></tr>';
// 检查 $table_data 是否为空
if (!empty($table_data)) {
rsort($table_data);
foreach ($table_data as $data) {
$weight_diff = isset($data['weight_diff']) ? $data['weight_diff'] : '';
$color = isset($data['color']) ? $data['color'] : '';
if ($weight_diff == "") {
$weight_diff = '0.00' ;
} elseif ($weight_diff < 0) {
} elseif ($weight_diff > 0) {
$weight_diff = '+' . $weight_diff;
}
// 根据颜色设置样式
$style = '';
if ($color) {
$style = 'style="color: ' . $color . ';"';
}
echo '<tr><td>' . $data['day'] . '</td><td>' . $data['date'] . '</td><td>' . $data['weight'] . '</td><td ' . $style . '>' . $weight_diff . '</td></tr>';
}
} else {
echo '<tr><td colspan="4">暂无体重数据。</td></tr>';
}
echo '</table>';
}
// 在顶部显示数值
function addAnnotations($data) {
$annotations = [];
for ($i = 0; $i < count($data['x']); $i++) {
$annotation = array(
'x' => $data['x'][$i],
'y' => $data['y'][$i],
'text' => number_format($data['y'][$i], 2), // 显示数值，保留两位小数
'xref' => 'x',
'yref' => 'y',
'showarrow' => true,
'arrowhead' => 0,
'ax' => 0,
'ay' => -30
);
$annotations[] = $annotation;
}
return $annotations;
}
?>
</body>
</html>
评论 (0)