首页
关于
留言
统计
更多
友联
壁纸
图床
Search
1
下次见面又是什么时候呢
323 阅读
2
和他
148 阅读
3
使用AE画一个粒子爱心
137 阅读
4
小程序npn构建
127 阅读
5
Android studio安装教程
114 阅读
Search
Blank
累计撰写
16
篇文章
累计收到
3
条评论
首页
栏目
最新文章
日常记录
微言微语
风景分享
生活知识
电脑知识
编程知识
办公技巧
页面
关于
留言
统计
友联
壁纸
图床
搜索到
16
篇与
的结果
Miaoo朋友圈程序全开源版源码
程序简介前台一键发布图文,视频,音乐。发布内容支持定位或自定义位置信息。支持将发布内容设为广告模式消息站内通知或邮件通知。支持其他用户注册,支持其他用户发布文章,管理自己的文章。拥有丰富的后台管理功能,一键操作。安装环境Nginx ≥1.22PHP =7.4MySQL ≥5.6安装前首先配置运行环境,运行需要在PHP中安装exif扩展。下载地址https://www.lanzoub.com/iJ42A1wmrwmh
2024年04月27日
26 阅读
0 评论
0 点赞
阿西
暂无简介
2024年04月26日
9 阅读
0 评论
0 点赞
在线网页体重记录表
前言代码在小程序端展示会异常需要的请移步网址 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>
2024年04月21日
47 阅读
0 评论
0 点赞
joe主题优化记录(更新中)
一. 评论打卡在主题的 themes/Joe/public/comment.php 中找到 <div class="owo joe_owo__contain"></div> 这行代码,在其下面添加下面的代码html 代码: <div class="comment-clockIn" onclick="javascript:clockIn()">打卡</div> 然后在你的css中添加下列样式css 代码:/*评论打卡*/ .joe_comment__respond-form .foot { justify-content: flex-start!important } .comment-clockIn { text-align: center; color: #606266; height: 26px; line-height: 26px; background: rgba(255,255,255,0.7); opacity: .85; border-radius: 13px; width: 70px; margin-left: 5px; cursor: pointer }最后在把下列代码加入js中,即可完成js 代码:/*评论打卡*/ function clockIn() { let time = (new Date).toLocaleTimeString(); let clockInCon = '滴!贵宾卡!打卡时间:' + time + ',请上车的乘客系好安全带~'; $(".joe_owo__target").val(clockInCon); }二. 首页导航栏美化找了网上好多教程,好少关于joe导航栏美化的知识,今天自己琢磨了一下,参考了网上一些教程 ::(玫瑰) 效果图:首先我们需要打开网站阿里云的icon资源站 https://www.iconfont.cn ,将自己的资源导入到joe后台的自定义head中然后找到joe根目录的Joe/public/header.php文件,大概83-99行的位置,将以下文件放入至红色框框中即可,注意,需要将里面的icon换成自己的,还有页面$iconClassMap中的对应页面设置好,这个就是你后台 - 独立页面 - 缩略名修改前修改后<a class="item <?php echo $this->is('index') ? 'active' : '' ?>" href="<?php $this->options->siteUrl(); ?>" title="首页"> <svg class="joeicon" aria-hidden="true"> <use xlink:href="#icon-EC_wendang-tiyuyule"></use> </svg> 首页 </a> <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?> <?php if (count($pages->stack) <= $this->options->JNavMaxNum) : ?> <?php foreach (array_slice($pages->stack, 0, $this->options->JNavMaxNum) as $item) : ?> <?php $iconClassMap = [ 'start-page' => 'icon-zhongduan', '3' => 'icon-liuyanmoban', '4' => 'icon-MBEfenggeduosetubiao-fasong', //你的页面名和对应的图标 ]; $iconClass = isset($iconClassMap[$item['slug']]) ? $iconClassMap[$item['slug']] : ''; ?> <a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"> <?php if ($iconClass !== '') : ?> <svg class="joeicon" aria-hidden="true"> <use xlink:href="#<?php echo $iconClass ?>"></use> </svg> <?php endif; ?> <?php echo $item['title'] ?> </a> <?php endforeach; ?> <?php else : ?> <?php foreach (array_slice($pages->stack, 0, $this->options->JNavMaxNum) as $item) : ?> <?php $iconClassMap = [ 'start-page' => 'icon-zhongduan', '3' => 'icon-liuyanmoban', '4' => 'icon-MBEfenggeduosetubiao-fasong', //你的页面名和对应的图标 ]; $iconClass = isset($iconClassMap[$item['slug']]) ? $iconClassMap[$item['slug']] : ''; ?> <a class="item <?php echo $this->is('page', $item['slug']) ? 'active' : '' ?>" href="<?php echo $item['permalink'] ?>" title="<?php echo $item['title'] ?>"> <?php if ($iconClass !== '') : ?> <svg class="joeicon" aria-hidden="true"> <use xlink:href="#<?php echo $iconClass ?>"></use> </svg> <?php endif; ?> <?php echo $item['title'] ?> </a> <?php endforeach; ?> <div class="joe_dropdown" trigger="hover" placement="60px" style="margin-right: 15px;"> <div class="joe_dropdown__link"> <svg class="joeicon" aria-hidden="true"> <use xlink:href="#icon-dianzan"></use> </svg> <a href="#" rel="nofollow">更多</a> <svg class="joe_dropdown__link-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="14"> <path d="M561.873 725.165c-11.262 11.262-26.545 21.72-41.025 18.502-14.479 2.413-28.154-8.849-39.415-18.502L133.129 375.252c-17.697-17.696-17.697-46.655 0-64.352s46.655-17.696 64.351 0l324.173 333.021 324.977-333.02c17.696-17.697 46.655-17.697 64.351 0s17.697 46.655 0 64.351L561.873 725.165z" p-id="3535" fill="var(--main)"></path> </svg> </div>最后还需要将css代码放入joe后台的自定义css中,可以根据需要修改.joeicon { width: 20px; height: 20px; vertical-align: -.15em; fill: currentColor; overflow: hidden; }三. CSS美化在后台Joe/assets/css/joe.global.min.css中1. 顶部导航栏固定 将joe_header.active{top:-60px}删除或者设置为0即可2. 顶部导航栏高斯模糊效果图:首先需要将背景颜色取消,然后在后台自定义css中加入一下css代码@media screen and (min-width: 759px) { /* 在屏幕宽度大于760像素时应用以下样式 */ .joe_header{backdrop-filter: saturate(5) blur(20px);} }
2024年03月23日
51 阅读
0 评论
0 点赞
晴天
::(太阳)
2024年03月23日
37 阅读
0 评论
1 点赞
1
2
...
4