小玩意分享(源码已上传GitHub/Gitee)

  闲暇时间写的一些小玩意分享,我的 Github/Gitee。

随机格言

通过 php 与文件读取实现的随机格言功能,这种小玩意我们就不用数据库啦!

准备

首先我们准备一个 txt 文件,用于后续读取。

  • 例如
代码语言:javascript
复制
人闲桂花落,夜静春山空。
不如意事常八九,可与言者无二三。
人间有味是清欢
君不见高堂明镜悲白发,朝如青丝暮成雪。
南朝四百八十寺,多少楼台烟雨中。
玲珑骰子安红豆,入骨相思知不知。
枯藤老树昏鸦,小桥流水人家,古道西风瘦马。夕阳西下,断肠人在天涯。
苟利国家生死以,岂因祸福避趋之。
人生自古谁无死,留取丹心照汗青。
我自横刀向天笑,去留肝胆两昆仑。
朱门酒肉臭,路有冻死骨。
星垂平野阔,月涌大江流。
十年生死两茫茫,不思量,自难忘。
桃李春风一杯酒,江湖夜雨十年灯。
飞雪连天射白鹿,笑书神侠倚碧鸳。
从此山水不相逢,莫道彼此长和短。
江南无所有,聊赠一枝春。
茕茕白兔,东走西顾,衣不如新,人不如故。
...

源代码

将准备的 txt 文件与以下 php 代码放到我们的服务器上,就可以拥有自己的随机格言啦,至于如何使用就看自己的需求咯!

代码语言:javascript
复制
<?php
// 设置一下跨域
$origin = filter_input(INPUT_SERVER, 'HTTP_ORIGIN') ?? '';
$allow_origin = array(
    'http://a.biugle.cn',
    'https://a.biugle.cn',
);
if (in_array($origin, $allow_origin)) {
 header('Access-Control-Allow-Origin: ' . $origin);
}
// 如果需要允许其他所有域名访问:header("Access-Control-Allow-Origin: *");

// 设置响应 methods 类型
header('Access-Control-Allow-Methods: GET');
// 设置 content-type
header('Content-Type: text/plain; charset=UTF-8');

// 随机从我们准备的 txt 文本文件中读取一行出来
$file = "./lib/words.txt"; // 我们的 txt 文件位置
// 判断文件是否存在
$saying = "biugle.cn"; // 默认输出
if (file_exists($file)) {
data = file(file); // 将文件存放在一个数组中
rand = array_rand(data); // 随机取一条
saying = data[$rand];
}
echo chop($saying); // 返回数据,并去除空格。

源代码地址-Github、源代码地址-Gitee

随机图片

技术实现跟第一个随机格言类似

准备

与第一个类似,但是我们除了需要准备 txt 文件之外,还有准备好需要展示的图片。当然你也可以使用网络图片,看自己需求。

  • txt 栗子

源代码

  • 网络图片按星期几显示
代码语言:javascript
复制
<?php
$origin = filter_input(INPUT_SERVER, 'HTTP_ORIGIN') ?? '';
$allow_origin = array(
'http://a.biugle.cn',
'https://a.biugle.cn',
);
if (in_array(origin, allow_origin)) {
header('Access-Control-Allow-Origin: ' . $origin);
}
$file = "./lib/avatar.txt";
$avatarUrl = "http://a.biugle.cn/images/avatar.jpg";
if (file_exists($file)) {
data = file(file);
avatarUrl = data[date("w", time())]; // 获取星期几
}
return header("Location: " . $avatarUrl); // 非直接输出图片,重定向到图片地址,节省性能。
  • 本地图片随机模式
代码语言:javascript
复制
/**

  • 直接输出图片,稍微耗费性能。
    */
    function showImg($imgUrl) {
    imgInfo = imagecreatefrompng(imgUrl);
    imgWidth = imagesx(imgInfo);
    imgHeight = imagesy(imgInfo);
    simg = imagecreatetruecolor(imgWidth, $imgHeight);
    bg = imagecolorallocatealpha(simg, 0, 0, 0, 127);
    imagefill(simg, 0, 0, bg);
    imagesavealpha($simg, true);
    imagecopyresized(simg, imgInfo, 0, 0, 0, 0, imgWidth, imgHeight, imgWidth, imgHeight);
    header("Content-Type: image/png");
    imagepng($simg);
    imagedestroy($imgInfo);
    imagedestroy($simg);
    }
    $origin = filter_input(INPUT_SERVER, 'HTTP_ORIGIN') ?? '';
    $allow_origin = array(
    'http://a.biugle.cn',
    'https://a.biugle.cn',
    );
    if (in_array(origin, allow_origin)) {
    header('Access-Control-Allow-Origin: ' . $origin);
    }
    return showImg('./images/' . mt_rand(1, 50) . '.png'); // 使用本地图片,不需要 txt,准备一个文件夹存放图片即可。

源代码地址-Github、源代码地址-Gitee

仿 MacOS 鱼眼菜单

纯 HTML + CSS + JS 实现的鱼眼菜单效果,建议配合 FontAwesome 图标库使用,效果更佳!

源代码

  • html 源码
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="http://a.biugle.cn/favicon.ico" >
<title>DockMenu</title>
<link rel="stylesheet" href="dockmenu.css"/>
<link rel="stylesheet" href="//unpkg.com/@fortawesome/fontawesome-free@5.15.2/css/all.min.css"/>
</head>
<body>
<h3 style="text-align: center;margin: 300px auto;">biugle-macos-dockmenu-menu(fisheye-menu) power by html-css-js-fontawesome</h3>
<nav id='menu-container'>
<div class='dock-menu'>
<a class="menu-item" href='#1' title="title1">
<div item-title="steam" class="menu-item-icon">
<i class="fab fa-steam fa-fw"></i>
</div>
</a>
<a class="menu-item" href='#2' title="title2">
<div item-title="unity" class="menu-item-icon">
<i class="fab fa-unity fa-fw"></i>
</div>
</a>
<a class="menu-item" href='#3' title="title3">
<div item-title="weibo" style="color: #ef6a40;" class="menu-item-icon">
<i class="fab fa-weibo fa-fw"></i>
</div>
</a>
<a class="menu-item" href='#4' title="title4">
<div item-title="weixin" style="color: green;" class="menu-item-icon">
<i class="fab fa-weixin fa-fw"></i>
</div>
</a>
<a class="menu-item" href='#5' title="title5">
<div item-title="zhihu" style="color: blue;" class="menu-item-icon">
<i class="fab fa-zhihu fa-fw"></i>
</div>
</a>
<a class="menu-item" href='#6' title="title6">
<div item-title="youtube" style="color: red;" class="menu-item-icon">
<i class="fab fa-youtube fa-fw"></i>
</div>
</a>
<a class="menu-item" href='#7' title="title7">
<div item-title="windows" class="menu-item-icon">
<i class="fab fa-windows fa-fw"></i>
</div>
</a>
<a class="menu-item" href='#8' title="title8">
<div item-title="bootstrap" style="color: #673ab7;" class="menu-item-icon">
<i class="fab fa-bootstrap fa-fw"></i>
</div>
</a>
<a class="menu-item" href='#9' title="title9">
<div item-title="php" style="color: #2042ff;" class="menu-item-icon">
<i class="fab fa-php fa-fw"></i>
</div>
</a>
<a class="menu-item" href='#10' title="title10">
<div item-title="twitch" style="color: chocolate;" class="menu-item-icon">
<i class="fab fa-twitch fa-fw"></i>
</div>
</a>
</div>
</nav>
<script src='dockmenu.js'></script>
<script>
$dockMenu = new dockMenu({
position: 'bottom',
parent: '#menu-container',
el: '.dock-menu',
item: '.menu-item',
grow: 1.8,
transition: 100,
defaultMargin: 0,
alignLimit: 1.8,
justifyLimit: 1.8
});
$dockMenu.show();
</script>
</body>
</html>
  • 其余代码请前往 Github-DockMenu 或 Gitee-DockMenu 查看。

聊天室

使用 php + WebSocket 实现的简易聊天室,包括私聊、群聊、弹窗通知、进入退出聊天室提示等功能…

源代码

  • 由于代码比较复杂,且有 swoole原生 socket 两个版本,请前往 Github-Chatroom 或 Gitee-Chatroom 查看。

在线 md 工具

利用 editor.md 插件快速制作自己的在线 md 工具。虽简单,但好用,麻雀虽小,五脏俱全!本站下载 editor.md

源代码

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.9" />
<title>小贺的在线编辑器</title>
<link href="/favicon.ico" rel="shortcut icon" />
<style type="text/css">
html,
body {
height: 98%;
width: 98%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
<link rel="stylesheet" href="./css/editormd.min.css" />
<script src="//unpkg.com/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="./js/editormd.min.js"></script>
<!-- 引入必要工具 -->
</head>
<body>
<div id="doubleam-editormd"></div>
<script type="text/javascript">
const AUTO_STORE_NAME = 'doubleam-md'; // 自动保存的 key
var editor;
$(function () {
editor = editormd('doubleam-editormd', {
width: '98%',
height: '98%',
syncScrolling: 'single',
path: './lib/', // 插件的 lib 目录
emoji: true,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // 开启科学公式TeX语言支持,默认关闭。
flowChart: true, // 开启流程图支持,默认关闭。
sequenceDiagram: true, // 开启时序/序列图支持,默认关闭。
fontSize: '18px',
codeFold: true,
saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
searchReplace: true,
onload: function () {
this.fullscreen(); // 全屏(按ESC取消)
this.config({
tocDropdown: true,
tocTitle: '目录'
}); // TOC下拉菜单
this.setMarkdown(window.localStorage.getItem(AUTO_STORE_NAME) || null);
}
});
});
setInterval(() => {
window.localStorage.setItem(AUTO_STORE_NAME, editor.getMarkdown());
}, 60000);
</script>
</body>
</html>

源代码地址-Github、源代码地址-Gitee