搜索到
6
篇与
编程知识
的结果
-
网站顶部浏览进度条 前言非常的简单，根据自己需求复制就好了，记得确保 jQuery 已加载 ::(你懂的)效果代码<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浏览进度条示例</title> <style> :root { --back-line-right: linear-gradient(to right, #4caf50, #4caf50); /* 确保定义 CSS 变量 */ } #scrollProgressBar { width: 0; height: 3px; z-index: 1001; background-image: var(--back-line-right); border-radius: 5px; position: fixed; /* 确保进度条固定在页面顶部 */ top: 0; left: 0; transition: width 0.45s; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <!-- 顶部浏览进度条 --> <div id="scrollProgressBar"></div> <div style="height: 2000px;"> <!-- 模拟长页面内容 --> <h1>滚动以查看进度条</h1> <p>这是一个示例页面，滚动以查看顶部进度条如何工作。</p> <!-- 添加更多内容以增加页面高度 --> </div> <script> $(window).scroll(function() { let scrollTop = $(window).scrollTop(), documentHeight = $(document).height(), windowHeight = $(window).height(); let scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100; scrollPercent = scrollPercent.toFixed(1); $("#scrollProgressBar").css({ width: scrollPercent + "%" }); }).trigger("scroll"); </script> <!-- 顶部浏览进度条结束 --> </body> </html> -
给网站加个LIVE2D 前言之前其实我有写过这个，但是发现好像有一点写漏了，今天重新写一个吧下载所需文件下载：https://wwkm.lanzouf.com/irqig0tl9wkh效果示例参考我网站的dome：https://uurr.cn/myfile/live2d/文件分为api和assetsapi是模型的接口，这个可以供别人使用也可以使用别人的，assets则是一些资源什么的你可以引用我网站的api资源 https://uurr.cn/myfile/live2d/api 接口下载好后在assets/waifu-tips.min.js文件中搜索 ;live2d_settings.modelAPI=" 将你的或者我的api接口填上去就像这样页面引用页面引用示例，要注意这里的目录别到时候引用错了<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Live2D 看板娘 v1.4 / Demo 1</title> <link rel="stylesheet" type="text/css" href="assets/waifu.min.css?v=1.4.2"/> </head> <body style="font-family: 'Microsoft YaHei';"> <!-- waifu-tips.js 依赖 JQuery 库 --> <script src="assets/jquery.min.js?v=3.3.1"></script> <!-- 实现拖动效果，需引入 JQuery UI --> <script src="assets/jquery-ui.min.js?v=1.12.1"></script> <div class="waifu"> <!--<div class="waifu-tips"></div>--> <canvas id="live2d" class="live2d"></canvas> <!--<div class="waifu-tool">--> <!-- <span class="fui-home"></span>--> <!-- <span class="fui-chat"></span>--> <!-- <span class="fui-eye"></span>--> <!-- <span class="fui-user"></span>--> <!-- <span class="fui-photo"></span>--> <!-- <span class="fui-info-circle"></span>--> <!-- <span class="fui-cross"></span>--> <!--</div>--> </div> <script src="assets/waifu-tips.min.js?v=1.4.2"></script> <script src="assets/live2d.min.js?v=1.0.5"></script> <script type="text/javascript"> /* 可直接修改部分参数 */ live2d_settings["modelId"] = 1; // 默认模型 ID live2d_settings["modelTexturesId"] = 87; // 默认材质 ID live2d_settings["modelStorage"] = false; // 不储存模型 ID live2d_settings["canCloseLive2d"] = false; // 隐藏 关闭看板娘 按钮 live2d_settings["canTurnToHomePage"] = false; // 隐藏 返回首页 按钮 live2d_settings["waifuSize"] = "160x160"; // 看板娘大小 live2d_settings["waifuTipsSize"] = "570x150"; // 提示框大小 live2d_settings["waifuFontSize"] = "30px"; // 提示框字体 live2d_settings["waifuToolFont"] = "36px"; // 工具栏字体 live2d_settings["waifuToolLine"] = "50px"; // 工具栏行高 live2d_settings["waifuToolTop"] = "-60px"; // 工具栏顶部边距 live2d_settings["waifuDraggable"] = "unlimited"; // 拖拽样式 live2d_settings["waifuDraggableRevert"] = false; /* 在 initModel 前添加 */ initModel("assets/waifu-tips.json?v=1.4.2") </script> </body> </html>joe主题后台引用示例如何你要在其它地方比如joe主题等使用的话就直接将body的内容放在你主题后台设 - 全局设置 - 自定义中即可 <!-- waifu-tips.js 依赖 JQuery 库 --> <script src="assets/jquery.min.js?v=3.3.1"></script> <!-- 实现拖动效果，需引入 JQuery UI --> <script src="assets/jquery-ui.min.js?v=1.12.1"></script> <div class="waifu"> <!--<div class="waifu-tips"></div>--> <canvas id="live2d" class="live2d"></canvas> <!--<div class="waifu-tool">--> <!-- <span class="fui-home"></span>--> <!-- <span class="fui-chat"></span>--> <!-- <span class="fui-eye"></span>--> <!-- <span class="fui-user"></span>--> <!-- <span class="fui-photo"></span>--> <!-- <span class="fui-info-circle"></span>--> <!-- <span class="fui-cross"></span>--> <!--</div>--> </div> <script src="assets/waifu-tips.min.js?v=1.4.2"></script> <script src="assets/live2d.min.js?v=1.0.5"></script> <script type="text/javascript"> /* 可直接修改部分参数 */ live2d_settings["modelId"] = 1; // 默认模型 ID live2d_settings["modelTexturesId"] = 87; // 默认材质 ID live2d_settings["modelStorage"] = false; // 不储存模型 ID live2d_settings["canCloseLive2d"] = false; // 隐藏 关闭看板娘 按钮 live2d_settings["canTurnToHomePage"] = false; // 隐藏 返回首页 按钮 live2d_settings["waifuSize"] = "160x160"; // 看板娘大小 live2d_settings["waifuTipsSize"] = "570x150"; // 提示框大小 live2d_settings["waifuFontSize"] = "30px"; // 提示框字体 live2d_settings["waifuToolFont"] = "36px"; // 工具栏字体 live2d_settings["waifuToolLine"] = "50px"; // 工具栏行高 live2d_settings["waifuToolTop"] = "-60px"; // 工具栏顶部边距 live2d_settings["waifuDraggable"] = "unlimited"; // 拖拽样式 live2d_settings["waifuDraggableRevert"] = false; /* 在 initModel 前添加 */ initModel("assets/waifu-tips.json?v=1.4.2") </script>
-
在线网页体重记录表 前言代码在小程序端展示会异常需要的请移步网址 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>
-
RSA加密示例 前言这是一种非对称式加密，很适合用在前端与后端的通信上它分为公钥和私钥，公钥仅可用于加密，私钥用于解密这样一来就可以将公钥发送给客户端，客户端拿着公钥加密后返回给服务器，服务器再使用私钥进行解密我小程序也采用了这种加密方式给需要的大佬借鉴一下首先是php端代码（后端或者服务器端），这里使用了base64_decode和url解码，因为我前端也进行了相应的编码教程我们需要先生成一个密钥在线RAS密钥生成：https://www.lddgo.net/encrypt/rsa // 解密 function Rsa_decrypts($data) { // 加载openssl扩展 if (!extension_loaded('openssl')) { die('OpenSSL 扩展未加载'); } // 密钥文件路径 $privateKeyFile = '改为自己路径private_key.pem'; $publicKeyFile = '改为自己路径public_key.pem'; // 加载私钥 $privateKeyResource = openssl_pkey_get_private(file_get_contents($privateKeyFile)); if ($privateKeyResource === false) { return '无法加载私钥'; } $data=urldecode($data); $data=base64_decode($data); $decryptedText = ''; if (openssl_private_decrypt(base64_decode($data), $decryptedText, $privateKeyResource, OPENSSL_PKCS1_PADDING) === false) { return ''; } return $decryptedText; } 然后我们开始在微信小程序安装一下相应的库选择小程序的调试器 —— 选择终端 —— 输入npm i wxmp-rsa -S进行安装安装完成后小程序目录里面会生成node_modules文件夹，里面会有wxmp-rsa文件夹安装完成后在编辑器左上角的菜单栏中找到工具 —— 构建npm完成后小程序文件目录会构建出miniprogram_npm文件夹，里面会有wxmp-rsa文件夹然后将你就可以开始使用了，下面是一个参考示例，同样这里我使用了Base64和url编码，./base64.js可以百度下载一个，如果不需要移除即可，这样就可以实现小程序与后端的加密通讯了，但是需要注意数据长度不能超过太长！否则将加密失败！ // 导入包 import WxmpRsa from 'wxmp-rsa' const Base64 = require('./base64.js'); // 实例化rsa const rsa = new WxmpRsa() rsa.default_key_size = 512 const publicKey = "这里放公钥" // 加密 function encrypt(data) { if (typeof data != 'string') { data = data.toString() } if (data == '') { return '' } if (publicKey != "") { rsa.setPublicKey(publicKey) const cryptStr = rsa.encryptLong(data) var r = Base64.encode(cryptStr) var r = encodeURIComponent(r) return r } return '' } //暴露接口 module.exports = { encrypt, UPglobalData, }
-
Android studio安装教程 Android studio安装：下载链接：http://www.android-studio.org/找到自己想要的版本：（或者直接点击上面的，默认是windows 64位）等待一段时间，下载完成后：点击安装包点击next；点击next；选择安装路径：点击Install安装；进度条完成后，点击next点击Finish完成（注意勾选start Android studio会启动程序）启动后：选择第二个，然后点击OK点击后会出现一个弹窗，两个都可以选，推荐选的Don‘t sen然后点击Cancel进入界面，点击next点击next选择你的布局颜色，选择完成后，点击next点击Finish，等待进度条完成点击finish完成文章转载于：https://blog.csdn.net/alzzw/article/details/102692135
-
小程序npn构建 今天在开发微信小程序的时候想引入一下第三方的库一直提示：发生错误Error: D:\My_exe\微信小程序开发工具\project\miniprogram\ 未找到然后在网上找了好久才发现问题，新手真的是各种踩坑... ::(狂汗) 我这里使用的组件库是 Vant Weapp 首先在微信小程序终端输入： npm init ，之后一直回车就好了然后开始 npm 安装 npm i @vant/weapp -S --production 然后在你的项目中就会生成下面几个包，但是注意如果发现miniprogram_npm没有生成就需要查看一下project.config.json目录中的 "packNpmManually" ,是不是为true了，是的话将其改为false在npm一下应该就正常了然后继续按照官方教程走先修改 app.json将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。修改 project.config.json开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。{ ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/" } ] } }注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可最后构建npn就好了，打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
