随笔分类 - H5
摘要：开始做的时候还挺接地气的...😅要不是没有素材也不至于如此... 😀效果 🖇在线链接 https://linyisonger.github.io/H5.Examples/?name=./35.%E6%8E%A8%E7%AE%B1%E5%AD%90%E4%B9%8B%E9%80%81%E8%A1
阅读全文
摘要：好久之前就想去写一个这样的示例了，然后就忘了....😵 😀效果 🖇在线链接 https://linyisonger.github.io/H5.Examples/?name=./34.%E6%8A%BD%E5%A5%96%E9%A1%B5%E9%9D%A2.html 🚧 图片可能会丢失，都是在
阅读全文
摘要：在进行赋值之前，为指针类型的数据成员另辟了一个独立的内存空间，实现真正内容上的拷贝。这种拷贝称为深拷贝。 ———— 百度百科 源码 ⚠ 还有部分类型不支持 typescript: /** * 深克隆 * @param obj */ export function cloneDeep<T>(obj:
阅读全文
摘要：尝试写一下拖动元素进行排序，真是想到什么去写什么 😂，有的时候很多人老是跟我说，别人都封装好了，你为什么还要自己去实现一下，写的还没别人好。但我总感觉所有都用别人写好的，就放弃思考的机会了。 效果 逻辑 通过改变position: absolute;改变每个元素的transform:transla
阅读全文
摘要：精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像 集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图。 本文中用的就是这张，来自爱给网。 效果 操作 键盘上下左右控制移动 document.addEventListener("keydown", (ev
阅读全文
摘要：有一天看到同事发的类似 这种成语填空一样的内容。 惟利( )视 为德( )终 质非文( ) ( )追耗子 烂漫天( ) ( )则改之，无则嘉勉 得( )之作 哀( )如潮 于是就去网上找成语数据库表的 SQL... 哈哈哈 很容易就找到了. 本来打算写个前后端，想了想可以但没必要。 于是就... 有
阅读全文
摘要：本文是通过:hover更新元素样式，通过递归树形菜单渲染到页面。 效果 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
阅读全文
摘要：效果 ⚠ 因为使用的是斜率来处理的垂直逻辑 tan，当为被除数为0时做了特殊处理，两点自由变换时到达零界点会有卡顿。 推导 开始复习初中二年级数学知识 斜率k的公式： 两条垂直相交直线的斜率相乘积为-1：$k_1 \times
阅读全文
摘要：✍ 记录一下 功能 [x] 富文本功能 [x] 快捷键关键词 效果 😂 有点儿粗糙 逻辑 按照Youtobe上的富文本视频教程进行拓展开发，使用iframe标签，通过修改designMode属性，将iframe的body标签修改成可编辑标签。再通过监听键盘按👇事件，判断是否是关键词，执行对应事件
阅读全文
摘要：H5 Canvas实现荣誉证书生成器 没人跟我颁奖，那就自己给自己颁一个吧~ 预览 在线链接 https://linyisonger.github.io/H5/22.证书生成器.html 源码地址 https://github.com/linyisonger/H5 功能点 印章绘制 QQ 浏览器 P
阅读全文
摘要：如果人生是一个圆,那么总会有一个人是你最终的切线。 注意: 必须使用https哦~ 功能点 拍照 微信内置浏览器 (iPhone13 Pro) QQ内置浏览器 (小米 Mix3) QQ内置浏览器 (iPhone13 Pro) 自带浏览器 (小米 Mix3) 自带浏览器 (iPhone13 Pro)
阅读全文
摘要：功能点 旋转角度 180° 90° 下载文件 文件名称 QQ浏览器 谷歌浏览器 Edge浏览器 知识点 a 标签 href 可以直接放 base64 经验 +1 哦吼~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
阅读全文
摘要：人这一生不必太较真，苦了自己怨了别人，爱情无需刻意去把握，越是想抓牢自己的爱情，反而容易失去自我。🧋 文档 官方文档 算是比较清晰明了的文档啦 环境 .Net Core 6.0 工具 Visual Studio 2022 支付宝开放平台开发助手 流程 以观看的角度我喜欢把代码放在前面界面的操作放在
阅读全文
摘要：一开始通过css样式，即可禁止图片的拖拽，没有成功。 ≧ ﹏ ≦ 于是另辟道路 找到draggable这个H5新增的属性 非常方便~ 属性说明 https://www.runoob.com/tags/att-global-draggable.html 图片禁止拖拽 <img src="https:/
阅读全文
摘要：某天某夜某人(我😂)突然想到这个，我好像不会写，于是才有了这个笔记。 参考 https://blog.csdn.net/weixin_37977288/article/details/80715574 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <m
阅读全文
摘要：主要代码 /** * 获取浏览器信息 * @returns {{ name:"Edge"|"Edge(Chromium)"|"Internet Explorer"|"Chrome"|"Safari"|"Firefox"|"unknow",version:""}} */ function Browse
阅读全文
摘要：主要代码 <div class="copy" onclick="copyToClipboard(this)">ABCDC</div> <script> /** * 复制到剪贴板 */ function copyToClipboard(e) { let input = document.querySe
阅读全文
摘要：⚠ 这篇文章只适用于部分设备 预览图 主要代码 注: 我使用的是可选链与空值合并的语法 低版本浏览器不支持 console.log("浏览器品牌名称:", BrowserBrandName()); // 浏览器品牌名称 function BrowserBrandName() { return nav
阅读全文
摘要：展示效果 参考视频地址 https://www.bilibili.com/video/BV1NM4y1g7S6 逻辑概述 使用背景图片的继承父节点样式的三张图片，子节点通过使用clip-path裁切图片，通过位置偏移来达成移动效果。 主要代码 布局 <div id="captcha"> <div i
阅读全文
摘要：如何发布一个npm包? 新建文件夹 Ru.Toolkit\Ru.Toolkit.DatePicker 在目录下执行命令npm init -y Wrote to D:\Ru.Toolkit\Ru.Toolkit.DatePicker\package.json: { "name": "Ru.Toolki
阅读全文
