小玩意分享(源码已上传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

#github#class#menu#工具#源码