搜索到
1
篇与
php
的结果
-
在线网页体重记录表 前言代码在小程序端展示会异常需要的请移步网址 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>
