![](https://img-blog.csdnimg.cn/20210331222425809.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
H5
文章平均质量分 76
-
林一怂儿
这个作者很懒,什么都没留下…
展开
-
H5 Svg 半圆圆环占比图
/ 设置中心点、半径、线宽、占比、颜色。// 设置中心点、半径、线宽、占比、颜色。// 前面弧线DOM。// 后面弧线DOM。// 后面弧线的颜色。// 前面弧线的颜色。// 设置宽度、线宽。原创 2024-07-16 22:35:41 · 798 阅读 · 0 评论 -
Vue el-input 限制输入内容
🤔日常项目中经常遇到既要el-input的样式,又要el-input-number限制,所以需要绑定@input事件进行约束输入限制。原创 2024-07-13 17:50:40 · 235 阅读 · 0 评论 -
H5 鼠标点击粒子扩散效果
🧐别人的博客中有这样的效果,于是自己就尝试实现了一下。效果如图源码如下原创 2024-05-10 13:58:58 · 933 阅读 · 0 评论 -
H5 台球猜位置小游戏
在线试玩 https://linyisonger.github.io/H5.Examples/?获取坐标位置的DOM元素,感觉应该是新的吧,以前的时候没什么印象有这个方法。兼容性不晓得可以自己查下~源码地址 https://github.com/linyisonger/H5.Examples。刷到抖音有人这样玩,就写了一个这样的小游戏练习一下H5的知识点。注释不多,比较简单的,还是比较好理解的。原创 2024-04-19 14:48:20 · 302 阅读 · 0 评论 -
H5 Canvas 签名
一个比较简单的示例,仅实现了画笔绘制、重置、保存图片功能。原创 2024-03-25 16:32:39 · 770 阅读 · 0 评论 -
Vue el-table 合并单元格
一般常见的就是下图这种的单列,上下重复进行合并。有时候可能也会需要多行多列的合并。原创 2024-03-19 20:03:48 · 1334 阅读 · 0 评论 -
H5 Canvas 打飞机青春版
没事儿写写练习一下,说不准哪天就用到今天所用到的知识点了呢。原创 2023-12-01 16:45:03 · 146 阅读 · 0 评论 -
GitHub 如何部署写好的H5静态页面
(●’◡’●)刚好记录一下我示例代码的GitHub部署配置,以便于后期追加仓库。原创 2023-08-13 22:33:31 · 960 阅读 · 0 评论 -
H5 推箱子 送行者
开始做的时候还挺接地气的…😅要不是没有素材也不至于如此…原创 2023-02-17 00:30:05 · 319 阅读 · 1 评论 -
H5 抽奖页面
好久之前就想去写一个这样的示例了,然后就忘了…😵。原创 2023-02-14 14:54:43 · 791 阅读 · 2 评论 -
H5 拖动排序 美食排行榜
尝试写一下拖动元素进行排序,真是想到什么去写什么 😂,有的时候很多人老是跟我说,别人都封装好了,你为什么还要自己去实现一下,写的还没别人好。但我总感觉所有都用别人写好的,就放弃思考的机会了。通过改变改变每个元素的来调整位置,使用和来修改插入位置。无…这个算是个实验品,总感觉上下切换时,没有别人写的丝滑。原创 2022-12-30 00:30:38 · 630 阅读 · 0 评论 -
H5 雪碧图 移动的机器猫
本文中用的就是这张,来自爱给网。键盘上下左右控制移动动画通过判断不同状态来展示不同动画源码没有进行精简,属于粗略的代码地址https://github.com/linyisonger/H5.Examples原创 2022-12-21 15:15:03 · 1253 阅读 · 0 评论 -
H5 WebSQL每日成语
有一天看到同事发的类似这种成语填空一样的内容。原创 2022-12-20 13:12:06 · 625 阅读 · 0 评论 -
H5 导航栏示例
本文是通过:hover更新元素样式,通过递归树形菜单渲染到页面。原创 2022-12-20 12:30:26 · 884 阅读 · 0 评论 -
H5 Canvas 垂直箭头绘制
⚠ 因为使用的是斜率来处理的垂直逻辑 tan,当为被除数为0时做了特殊处理,两点自由变换时到达零界点会有卡顿。开始复习初中二年级数学知识斜率k的公式:k=(y1−y2)(x1−x2)k = \dfrac{(y_1 -y_2)}{(x_1 - x_2)}k=(x1−x2)(y1−y2)两条垂直相交直线的斜率相乘积为-1:k1×k2=−1k_1 \times k_2 = -1k1×k2=−1如图已知P1P_1P1和P2P_2P2的坐标,以及d的值,求点P4P_4P4的坐标。 😂怀念初中算题原创 2022-12-03 17:51:38 · 837 阅读 · 0 评论 -
H5 富文本快捷输入
😂 有点儿粗糙按照Youtobe上的富文本视频教程进行拓展开发,使用iframe标签,通过修改designMode属性,将iframe的body标签修改成可编辑标签。再通过监听键盘按👇事件,判断是否是关键词,执行对应事件。点击通过window.parent.postMessage发送从iframe里向父节点发送消息,通过监听事件来获取回调id进行唤起选择框。来自 https://developer.mozilla.org/zh-CN/docs/Web/API/至于这些知识点我也怎么了解.https://原创 2022-11-22 22:26:48 · 749 阅读 · 0 评论 -
H5 Canvas实现荣誉证书生成器
没人跟我颁奖,那就自己给自己颁一个吧~在线链接 https://linyisonger.github.io/H5/22.证书生成器.html源码地址 https://github.com/linyisonger/H5功能点 印章绘制 QQ 浏览器 PC 个性化编辑 QQ 浏览器 PC 延迟预览 QQ 浏览器 PC写法上没有做很多兼容性的处理,大概写了一下逻辑。效果代码<!DOCTYPE html><html lang="en">.原创 2022-04-24 15:42:30 · 4824 阅读 · 2 评论 -
H5 调用摄像头进行拍照
如果人生是一个圆,那么总会有一个人是你最终的切线。注意: 必须使用https哦~功能点 拍照 微信内置浏览器 (iPhone13 Pro) QQ内置浏览器 (小米 Mix3) QQ内置浏览器 (iPhone13 Pro) 自带浏览器 (小米 Mix3) 自带浏览器 (iPhone13 Pro) 保存图片 微信内置浏览器 (iPhone13 Pro) QQ内置浏览器 (小米 Mix3) QQ内置浏览器 (iPhone13 Pro) 自带浏览器 (小米 Mix3) 自带.原创 2022-04-11 21:08:36 · 1922 阅读 · 0 评论 -
H5 Canvas旋转图片及下载保存
功能点 旋转角度 180° 90° 下载文件 文件名称 QQ浏览器 谷歌浏览器 Edge浏览器知识点a 标签 href 可以直接放 base64经验 +1哦吼~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-04-02 16:32:29 · 1112 阅读 · 0 评论 -
Asp .NetCore 支付宝网页授权登录
人这一生不必太较真,苦了自己怨了别人,爱情无需刻意去把握,越是想抓牢自己的爱情,反而容易失去自我。🧋文档官方文档 算是比较清晰明了的文档啦环境.Net Core 6.0工具Visual Studio 2022支付宝开放平台开发助手流程以观看的角度我喜欢把代码放在前面界面的操作放在后边新建项目我这里是这样新建的,当然也可以使用Visual Studio中的可视化新建。dotnet new webapi --name AlipayWebsiteAuthorizedLo.原创 2022-03-31 16:30:05 · 1011 阅读 · 0 评论 -
H5 图片禁止拖拽
一开始通过css样式,即可禁止图片的拖拽,没有成功。 ≧ ﹏ ≦于是另辟道路找到draggable这个H5新增的属性非常方便~属性说明https://www.runoob.com/tags/att-global-draggable.html原创 2022-03-09 09:37:04 · 928 阅读 · 0 评论 -
H5 拖动上传文件
某天某夜某人(我????)突然想到这个,我好像不会写,于是才有了这个笔记。参考https://blog.csdn.net/weixin_37977288/article/details/80715574效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="原创 2022-02-18 13:38:04 · 281 阅读 · 0 评论 -
H5 获取浏览器内核及版本
主要代码/** * 获取浏览器信息 * @returns {{ name:"Edge"|"Edge(Chromium)"|"Internet Explorer"|"Chrome"|"Safari"|"Firefox"|"unknow",version:""}} */function BrowserInfo() { let userAgent = self.navigator.userAgent; if (/edge\/([\d\.]+)/i.exec(userAgent)) re原创 2021-07-19 15:01:43 · 1158 阅读 · 0 评论 -
H5 复制文本到剪贴板
主要代码<div class="copy" onclick="copyToClipboard(this)">ABCDC</div><script> /** * 复制到剪贴板 */ function copyToClipboard(e) { let input = document.querySelector('.copy-input') || document.createElement('input');原创 2021-07-16 15:49:24 · 353 阅读 · 0 评论 -
H5 获取浏览器品牌名称
预览图主要代码注: 我使用的是可选链与空值合并的语法 低版本浏览器不支持console.log("浏览器品牌名称:", BrowserBrandName());// 浏览器品牌名称 ES6function BrowserBrandName() { return navigator.userAgentData?.brands?.[1].brand ?? navigator.userAgent?.split(' ')?.pop()?.split('/')?.shift()}...原创 2021-07-09 10:19:08 · 299 阅读 · 0 评论 -
H5 滑块拼图验证
展示效果参考视频地址https://www.bilibili.com/video/BV1NM4y1g7S6逻辑概述使用背景图片的继承父节点样式的三张图片,子节点通过使用clip-path裁切图片,通过位置偏移来达成移动效果。主要代码布局<div id="captcha"> <div id="handle"> <span></span> </div></div>样式 #captc原创 2021-06-28 10:22:25 · 694 阅读 · 2 评论 -
关于发布npm包的相关实践
关于npm包的相关实践如何发布一个npm包?新建文件夹 Ru.Toolkit\Ru.Toolkit.DatePicker在目录下执行命令npm init -yWrote to D:\Ru.Toolkit\Ru.Toolkit.DatePicker\package.json:{ "name": "Ru.Toolkit.DatePicker", "version": "1.0.0", "description": "", "main": "index.js", "scrip原创 2021-05-29 18:10:10 · 279 阅读 · 1 评论 -
Layui_LayDate组件限制min和max
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt; &amp;lt;title&amp;g原创 2018-07-19 13:16:05 · 2342 阅读 · 0 评论 -
Jquery_获取元素
//获取所有元素$("*") //获取属性id="div"的元素$("#div")//获取属性class="div"的所有元素$(".div")//获取所有<p></p>标签元素$("p")//获取所有h1,h2,h3元素$("h1,h2,h3")//获取第一个h1元素$("h1:翻译 2018-07-11 17:21:01 · 1052 阅读 · 0 评论 -
JavaScript_获取屏幕尺寸
document.body.clientWidth // BODY对象宽度document.body.clientHeight //BODY对象高度document.documentElement.clientWidth //可见区域宽度document.documentElement.clientHeight //可见区域高度document.body.clientWidth // 网页...翻译 2018-08-04 00:20:46 · 1231 阅读 · 0 评论 -
JavaScript_Date类
//属性 .E //Euler's constant .LN2 //Natural log of the value 2 .LN10 //Natural log of the value .LOG2E //The base 2 log of Euler's constant(E) .LOG10E //The ba...翻译 2018-08-04 00:22:18 · 780 阅读 · 0 评论 -
JavaScript_DOM
//The DOM (Document Object Model)(文档对象模型)//常见选择方法document.getElementById()document.getElementsByClassName()document.getElementsByName()document.getElementsByTagName()element.childNodes //...翻译 2018-08-04 00:44:45 · 792 阅读 · 0 评论 -
JavaScript_随机颜色
function RandomColor(){ var colors="0123456789abcdef"; var s="#"; for (var i=0;i<6;i++) { //Math.random() 随机产生一个0-1的数字 //Math.round(Math.random()*15) 可均衡获取0-15的随机整数 ...原创 2018-08-08 19:12:17 · 778 阅读 · 0 评论 -
HTML_标签
<!DOCTYPE HTML> <!--声明这个是html文件--><html><!--html--> <head><!--head:帮助页面正常工作的非可视化标签--> <title></title><!--title:标题标签-->原创 2018-07-10 11:31:13 · 950 阅读 · 0 评论 -
HTML_移动端缩放锁定
添加在Head标签中 &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;!-- 视图窗口,移动端特属的标签。 --&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-转载 2018-06-30 19:54:30 · 1883 阅读 · 0 评论