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

老猫-Leo

发布于 2023-12-11 20:54:07

1460

发布于 2023-12-11 20:54:07

文章被收录于专栏：前端大全前端大全

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

随机格言

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

准备

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

例如

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

源代码

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

<?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 栗子

http://a.biugle.cn/images/avatar.jpg
http://a.biugle.cn/images/xixi.png
http://a.biugle.cn/images/jienigui.jpg
http://a.biugle.cn/images/yunnan.jpg
http://a.biugle.cn/images/baoerjie.jpg
http://a.biugle.cn/images/ruikeandmodi.jpg
http://a.biugle.cn/images/biugle.png

源代码

网络图片按星期几显示

<?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); // 非直接输出图片，重定向到图片地址，节省性能。

本地图片随机模式

/**
 * 直接输出图片，稍微耗费性能。 
 */
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 源码

<!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

源代码

<!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>