加载中

HTML

文章分类

浏览该分类下的所有文章

29 篇文章 3

HTML实现复制当前链接到剪切板

本文介绍了在 HTML 页面中通过 JavaScript 实现“一键复制当前链接”功能的实现思路与代码。核心做法是:为文章链接设置 `<a id="articleHref">`,点击“分享给好友”按钮时,动态创建隐藏的 `<input>`,将链接地址赋值给它并选中,随后调用 `document.execCommand('Copy')` 将内容写入剪切板。复制成功或失败均通过弹窗提示,并在成功后隐藏临时输入框。示例代码使用了 Thymeleaf 语法生成链接,兼容主流浏览器,操作简洁、实现直观。

HTML页面嵌入视频的方案

文章介绍了在HTML页面中使用`<iframe>`嵌入视频的基本方法,给出YouTube 视频的示例代码,说明`src`属性填写视频地址即可。为防止自动播放,可在`allow`属性中加入`autoplay=false`或在URL 参数中设置`autoplay=0`,并提供了相应的代码示例。

什么?十行代码实现了斗图?

作者介绍了在评论区实现斗图的两种思路:上传图片或直接粘贴表情包链接。考虑到用户便利性和服务器负载,选择后者。只需在页面放置一个 textarea,并用十几行 JavaScript 读取输入内容;若以 http:// 或 https:// 开头,则自动生成 `<img>` 标签并插入评论列表,否则保持文本原样。文章还提供了示例代码和获取表情包链接的来源(fabiaoqing.com),演示了输入文字或图片地址后在列表中即时显示的效果。

博客的评论与回复功能的实现

文章介绍了在个人博客中实现完整评论、回复功能的全过程。首先设计 comment 表,保存博客 ID、父评论 ID 等层级信息;随后给出实体类 Comments,包含 replyComments、parentComment 等非持久化字段以构建树形结构。前端提供带隐藏字段的评论表单,利用 QQ 接口自动获取昵称、头像,并通过 Ajax 将评论或回复数据提交至 /comments。点击回复时,会把目标评论的 ID 与昵称写入表单并滚动至输入框,实现“@用户”提示。后端 Controller 接收参数、写入数据库并根据 parentId 为 -1 的记录遍历生成父子层级,最终在页面按“新评论在前、三级评论嵌套在二级下” 的顺序展示。全文侧重数据库设计、实体映射、前后端交互以及层级查询的关键实现细节。

博客导流到微信公众号

文章介绍了利用 openwrite 的“博客导流公众号”功能,将博客阅读者引导关注微信公众号。实现方式是在首次访问文章时隐藏部分内容,弹出关注公众号并发送验证码的页面,用户完成一次操作后即可恢复正常阅读,从而为公众号获取流量。文中详细说明了在 openwrite 平台注册、在“增长工具”中创建导流任务、填写域名和公众号二维码链接、设置关键词(如“博客”)获取验证码,以及在博客页面嵌入指定的 JS 代码和 container div 的步骤。整个流程简单,影响用户体验极小,却能有效提升公众号关注量。