一个基于 HTML5 Canvas 绘制的网页背景效果。 Github canvas-nest.js 配置方法 使用 jsDelivr 提供的免费 CDN 服务。...body> 和 标签之间 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/canvas-nest.js.../dist/canvas-nest.js" > 自定义样式 color : 线条颜色, 默认: '0,0,0';三个数字分别为(R,G,B),注意用 , 分割 pointColor:..."0,0,255" opacity="0.7" zIndex="2" count="66" src="https://cdn.jsdelivr.net/npm/canvas-nest.js.../dist/canvas-nest.js" > 效果就如本页面所示!
这里我们就用原生JS实现网页调用系统自带的分享功能,为网页增加一个分享功能!...二.实现原理: 三.JS代码: 建议:使用前先判断浏览器是否支持此功能,若不支持,可以设置其它替代方案;若支持,则可以直接使用此功能来进行分享操作! 1.判断浏览器是否支持: if (!
通过javascript中实现跳转 // 直接跳转 window.location.href='index.html'; // 定时跳转 setTimeout(...
项目地址:https://github.com/videojs/video.js一个不只会“播放视频”的播放器如果只把Video.js理解成“一个能播视频的库”,其实有点低估它了。...它们合在一起,说明Video.js并不是靠庞杂来建立能力,而是在尽量克制的核心之上,把播放器应该具备的弹性与深度交给开发者自己调度。...Video.js在这里显得很务实,它不是只照顾最理想化的静态视频文件,而是把直播流等现实需求也纳入了自己的能力范围。高度可定制它支持通过CSS和JavaScript对播放器的外观和行为进行定制。...把这些特点拆开看,每一点都很实用;把它们放在一起看,就构成了一套很有说服力的播放器方案。它不会把开发者困在固定模板里,也不会要求你一开始就把所有能力全部接入。...Video.js显然更接近后者。它不只是把视频放到页面上,而是在播放、扩展、定制、兼容与适配之间,给出了一个相对平衡且成熟的答案。
Animate 和wow.js Animate 通过CSS3封装的一个css插件 wow.js 可以链接到CSS动画库 两者配合起来可以快速制作你的网页特效 安装 wowjs安装 通过CDN js"> <link href="https://cdn.bootcss.com/animate.css...github.com/matthieua/WOW Animate github地址:https://github.com/daneden/animate.css 使用 通过CDN连接wow和animate后,需要通过js
0 前言 在即刻看见了一篇文章,内容是关于把网页制作成一个桌面应用,试了一下,感觉挺好的。...干脆写一篇文章记录一下,感觉美滋滋~ 1 创建快捷方式 将想转换的网页收藏到书签栏,进入chrome://apps/,把收藏的书签下拉到页面中间的空白处。 ?...图标是可以替换的,可以直接下载 .ico 格式的文件进行替换,也可以把图片或图标转化为ico 格式的文件再进行替换。...3 说明 我因为不喜欢微信的 Windows 客户端,所以才使用把网页版微信制作成 Chrome App。制作成 Chrome App 之后还可以使用谷歌浏览器的扩展,美滋滋。...这篇文章是看了少数派作者 SpencerWoo 的文章后写的,SpencerWoo 的文章还提到了 Nativefier 和 Web2Desk 把网页转制成为一个 可安装的 桌面应用,我试了一下 Web2Desk
b 进入 打印界面: 选择使用预览程序打开PDF: 在左上角的文件一栏选择导出为PDF: 选择存储地址: 点击确定,即可生成PDF文件: [1] 谷歌浏览器Chrome把网页转换成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...
它最初是作为HTML网页的脚本语言而设计的,用于在网页上实现动态内容和交互效果。...如今,JavaScript已经发展成为一种功能强大、应用广泛的语言,可用于前端开发、后端开发(如Node.js)、移动应用开发(如React Native)以及桌面应用开发等。...DOM 操作 DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,它允许 JavaScript 动态访问和更新网页内容。...="输入任务"> 添加 js...引入了外部的 script.js 文件,用于实现 JavaScript 功能。
第一种 {tabs-pane label="代码"} document.body.oncontextmenu=document.body.ondragstart...
window.onresize = debounce(() => setWaterMark(content)) } import waterMark from '@/utils/waterMark.js
有一种工具叫做Reader,它能够帮你把任何网址转换成更适合大型语言模型(LLM)处理的输入格式。就像给网页穿上了一件“智能外衣”,让它们更容易被理解和使用。而且,这个服务完全免费哦!...https://r.jina.ai/https://en.m.wikipedia.org/wiki/Main_Page> 总结 这个工具对于希望提高语言模型输入质量的开发者来说非常有用,尤其是需要处理网页内容的场景...通过Reader,可以更轻松地将网页内容转换为适合语言模型处理的格式,从而提升模型的性能和输出结果的质量。
实现:html2canvas + canvas.toDataURL 首先,引入依赖插件: import { html2canvas } from './html...
用js实现:输入密码才能打开网页,即js实现密码保护的网页。...(password()); 可能有人会疑虑,密码就在代码中,如果别人查看一下源码就知道密码了, 嗯哪,确实存在这个问题,虽然上面代码中做了些防护,如果密码输不对的话,就返回上一页,但只要在浏览器中关掉js...功能就可以打开网页查看js源码, 那么如何解决呢?...当然有办法,使用js密码加密混淆啊,出大招:Jshaman(http://www.jshaman.com/),可以在线加密js代码, 就把上面的代码,用jshaman加密一下,加密后代码如下: var...js实现密码保护的网页,就是这么简单。 PS:有网友问,上面的代码怎么用。哦,很初级的问题,这样:在html文件中,放在script标签里就可以了。
reveal.js reveal.js 是个啥 reveal.js 是一个展示内容的框架,可以简单的理解为网页版的PPT。我们用 reveal.js 做出来的PPT其实是一个HTML文件。...优势 和传统的PPT相比,reveal.js 有哪些吸引我的地方呢?...JS API 等特性 安装 小白版安装 下载: https://github.com/hakimel/reveal.js/releases 解压下载的文件。...步骤如下 安装 Node.js 安装 Grunt 下载 $ git clone https://github.com/hakimel/reveal.js.git 到 reveal.js 文件夹...DEMO 最后附上 一丝 用 reveal.js 做的高大上的demo CSS 居中之美 超越 icon font CSS 后处理器 CSS 工作流 是不是很高大上,哈哈。
https://www.7-zip.org/ 如果需要,可以把 wkhtmltopdf 加到系统变量 Path 中;如果不需要,把路径记住就好。...wkhtmltox\bin\wkhtmltopdf.exe' config = pdfkit.configuration(wkhtmltopdf=wk_path) url 是需要把 html 转换成 pdf 的那个网页...pdfkit.from_url(url, name, configuration=config)就是开始把 html 转换成 pdf 。...PDF PDF和网页对比如下图,左边是 PDF,右边是 网页。(网页背景颜色原来是白色的,我的浏览器会自动把背景颜色进行替换) ?...PDF和网页对比 3 相关说明 这样把 html 转换成的 pdf 肯定和网页原来的样子是有差别的,但是把本地的 html 转换成 pdf 还是挺合适我心意的,毕竟解决了我的问题。
document.getElementById('container')); }); }); 代码如下: js
我又不想再增加处理的复杂度,尝试着用JS来完成这种关系。