前端 — 木小良

markdown+highlight代码高亮

## markdown+highlight代码高亮引用样式和脚本 ```html <link rel="stylesheet" href="/highlight/highlight.min.css"> <script src="/marked/marked.min.js"></script> <script src="/highlight/highlight.min.js"></script> <script>hljs.highlig

指定时间，倒计时效果

## 指定时间，倒计时效果 ```html <div id="countdown"></div> <script type="text/javascript"> function startCountdown(targetDate, display) { var timer = setInterval(function () { var currentDate = new Date();

notyf消息闪现

## notyf消息闪现 ### 两种方法,刷新页面就触发,和点击按钮触发 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Notyf Demo</title> <link rel="stylesheet" href="/notyf.min.css"> </head> <body> <button

bulmaCSS框架

## bulmaCSS框架 `<p class="is-size-7">` #文字大小，7是最小，1最大 `class="box"` #会形成卡片效果，且跟边框有间距 `<hr>` #分隔标签,中间会有线条 #弹性居中水平+锤子，加容器最小高度屏幕80% `class="is-flex" style="min-height: 80vh; align-items: center; justify-content: center;"`

前端各项功能示例

## 前端各项功能示例 - 标准网页 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <base href="/static/"> <link rel="stylesheet" href="bulma.min.css"> <script src="htmx.min.js"></script> </head>

悬浮模块

## 悬浮模块 ### 移动端自动悬浮： ```html <style> /* 自定义样式 */ .custom-module { position: fixed; display: flex; bottom: 10px; left: 0; width: 100%; } @media (min-width: 768px) { .custom-module { position: rela

各种网页状态码说明

## 各种网页状态码说明 - 100：客户端继续发送请求，这是临时响应 - 101：切换协议，主要用于websocket或http2升级 - **200：请求成功** - 201：请求成功并且服务器创建了新的资源 - 202：请求成功，但服务器尚未处理 - 203：请求成功，但返回的信息可能来自另一来源 - 204：请求成功，但无返回内容 - 301：永久移动到其他页面 - 302：临时移动到其他页面 - 303：提示请求者，应请求不同

petite-vue JS库

## petite-vue JS库在生产环境中引用 `https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js` 使用方法： //注意，中间的defer init自动初始化步骤必须执行，否则无法使用 ```html <script src="https://unpkg.com/petite-vue" defer init></script> <div v-scope="{ c

qr-code-styling.js 前端生成自定义样式二维码

## qr-code-styling.js 前端生成自定义样式二维码 `npm install qr-code-styling` 安装 ```html <script type="text/javascript" src="/qr-code-styling.js"></script> <div id="qrcode"></div> <script type="text/javascript"> const qrCode = ne

vue3动态组件加载

## vue3动态组件加载分三个不同的页面，按照productType的类型来显示哪个页面 ```html <template> <RechargeType v-if="productType === 'km'" /> <GiftCardType v-else-if="productType === 'cz'" /> <PurchaseType v-else="productType === 'dg'" /> </templ

JavaScript基础

## JavaScript基础 ```javascript document.getElementById("id"); //获取指定ID的元素 document.getElementById("id").innerHTML = "已过期"; //替换元素内容 document.getElementById("id").remove(); //删除元素 //判断删除元素 var element = document.get

webhook回调测试工具转发webhook给本地

## webhook回调测试工具转发webhook给本地安装 `npm install --global smee-client` 运行，你获得的转发链接和自己的路径和端口币安回调 `smee --url https://smee.io/4KNUDEBRSgzL2Ag --path /muxiaoliang123/binancewebhook --port 5280` paypal付款完成 `smee --url https://

谁控制过去就控制未来；谁控制现在就控制过去 -- 《一九八四》

分类 / 前端 — 木小良