HTML & CSS & JavaScript
文章平均质量分 74
HTML & CSS & JavaScript
好好活着,不要熬夜
这个作者很懒,什么都没留下…
展开
-
JavaScript - canvas - 将图片保存到本地
JavaScript - canvas - 将图片保存到本地原创 2023-09-22 17:56:56 · 1746 阅读 · 0 评论 -
HTML - input type=file 允许用户选择多个文件
允许用户选择多个文件原创 2023-09-22 16:47:53 · 2617 阅读 · 0 评论 -
JavaScript - canvas - 放大镜
【代码】JavaScript - canvas - 放大镜。原创 2023-09-22 14:35:47 · 644 阅读 · 0 评论 -
JavaScript - canvas - 选择部分区域的图像数据
【代码】JavaScript - canvas - 选择部分区域的图像数据。原创 2023-09-22 10:36:20 · 436 阅读 · 0 评论 -
JavaScript - 将 Allegro 坐标文件转为嘉立创坐标文件(CSV 格式)的工具
Allegro 坐标文件格式:工具:运行效果:下载文件之后,使用记事本打开 CSV 文件,其的内容如下:使用 WPS 打开 CSV 文件,其的内容如下:原创 2022-09-15 14:32:30 · 1063 阅读 · 0 评论 -
JavaScript - 将特定格式的字符串保存为 CSV 文件
运行效果:下载文件之后,使用记事本打开 CSV 文件,其的内容如下:使用 WPS 打开 CSV 文件,其的内容如下:JavaScript - 将字符串保存到本地计算机(文本文件、Markdown 或 HTML 文件)原创 2022-09-15 11:26:46 · 961 阅读 · 0 评论 -
JavaScript - 移除数组中的空字符串元素
/ 将字符串分割成字符串,并没有从数组中删除空字符串元素const=.split(" ");// 使用 filter 方法对数组进行拷贝,删除空字符串元素,保留其他元素const=.split(" ").filter((element)=>{return!原创 2022-09-14 18:01:31 · 1082 阅读 · 0 评论 -
HTML & CSS - 一个简单的登录页面 2
代码】HTML&CSS-一个简单的登录页面。原创 2022-07-17 18:09:42 · 184 阅读 · 0 评论 -
HTML & CSS - 一个简单的登录页面
代码】HTML&CSS-一个简答的登录页面。原创 2022-07-16 22:39:29 · 2294 阅读 · 0 评论 -
HTML & CSS & JavaScript - 一个简单数字时钟
代码】HTML&CSS&JavaScript-一个简单数字时钟。原创 2022-07-15 19:58:11 · 2991 阅读 · 0 评论 -
JavaScript - canvas - 使用鼠标画线,带撤销与重做功能
文章目录预备知识画直线项目结构HTMLCSSJavaScript效果使用鼠标画线,带撤销与重做功能使用鼠标画线HTMLJavaScript效果添加撤销与重做功能HTMLJavaScript效果预备知识画直线项目结构HTMLindex.html 文件:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>画直线</titl原创 2022-01-27 14:40:00 · 5286 阅读 · 0 评论 -
JavaScript - canvas - 画直角坐标系
文章目录预备知识关于 canvas 画布的原点画直线项目结构HTMLCSSJavaScript效果设置 canvas 起点偏移(**平移变换**)JavaScript效果画空心三角形JavaScript效果画实心三角形JavaScript效果画直角坐标系JavaScript效果参考预备知识关于 canvas 画布的原点在我们开始画图之前,我们需要了解一下画布栅格(canvas grid)以及坐标空间。canvas 的栅格的起点为左上角(坐标为 (0, 0))。画直线项目结构HTMLindex原创 2022-01-26 15:45:11 · 4338 阅读 · 0 评论 -
JavaScript - 创建一个跟随鼠标移动的元素
文章目录示例效果代码项目结构HTML参考示例效果代码思路:监听鼠标移动事件,获取鼠标的坐标。然后,修改元素的坐标,即可使元素跟随鼠标移动。项目结构HTMLindex.html 文件:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Cartesian coordinate system</title>原创 2022-01-26 14:55:37 · 1441 阅读 · 0 评论 -
JavaScript - 取小数点后某几位数
javascript 取小数点后几位四种方法Web technology for developers > JavaScript > JavaScript reference > Standard built-in objects > Number > Number.prototype.toFixed()原创 2022-01-05 18:33:11 · 1255 阅读 · 0 评论 -
JavaScript - 读取 CSV(Comma-Separated Values)文件
文章目录示例效果代码参考示例效果代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>读取 CSV(Comma-Separated Values)文件</title> </head> <body> <!-- https://www.iana.org/as原创 2022-01-05 15:14:36 · 6274 阅读 · 0 评论 -
JavaScript - 基于拖放(Drag and Drop) API 拖动一个元素
文章目录示例思路效果参考谷歌浏览器版本信息:版本 96.0.4664.45(正式版本) (64 位)示例思路在拖动开始时,记录被拖动元素的起始坐标;在拖动结束之后,计算元素的终点坐标与起始坐标的偏移,然后修改元素的位置。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> &原创 2021-12-08 19:42:27 · 585 阅读 · 0 评论 -
谷歌浏览器插件 - 为 Microsoft Bing 搜索引擎首页添加一个【保存背景图片】的按钮(版本 1)
文章目录获取背景图片的链接的思路谷歌浏览器插件的代码实现思路实现测试谷歌浏览器版本信息:版本 94.0.4606.81(正式版本) (64 位)获取背景图片的链接的思路在开发者工具 > Network 选项卡中,选择 Img 过滤器,找到背景图片的链接:接着,在开发者工具 > Elements 选项卡中,根据背景图片的链接,查找哪一个元素使用了这个链接:找到这个元素之后,就可以使用 JavaScript 获取背景图片的链接。谷歌浏览器插件的代码实现思路根据 title原创 2021-12-06 20:08:50 · 1109 阅读 · 0 评论 -
JSON (JavaScript Object Notation)
JSON (JavaScript Object Notation)JSON 是存储和交换文本信息的语法。类似 XML,比 XML 更小、更快,更易解析。什么是 JSON ?JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)JSON 是轻量级的文本数据交换格式JSON 独立于语言 *JSON 具有自我描述性,更易理解* JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 J原创 2021-11-19 18:30:50 · 324 阅读 · 0 评论 -
JavaScript - 去除图片中的水印(任务,未完成)
思路:使用 canvas原创 2021-11-07 20:42:11 · 2135 阅读 · 0 评论 -
JavaScript - 自定义鼠标右键菜单
文章目录示例参考示例设计思路:禁用原始鼠标右键菜单;使用 HTML 元素搭建一个菜单列表,并响应鼠标点击事件。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Custom Context Menu</title> <style type="text/css">原创 2021-11-06 16:53:56 · 1306 阅读 · 2 评论 -
CSS - 图片渐显渐隐
文章目录示例参考示例[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rR6qIbLA-1636082211260)(效果.gif)]<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片渐显渐隐</title> <style type="text/css">原创 2021-11-05 11:17:08 · 2735 阅读 · 0 评论 -
CSS - 设置元素的不透明度
文章目录示例参考示例<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>opacity</title> <style type="text/css"> div { border-color: #000000;原创 2021-11-04 18:45:53 · 325 阅读 · 0 评论 -
JavaScript - 屏蔽鼠标右键菜单
文章目录屏蔽鼠标右键菜单参考屏蔽鼠标右键菜单<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>屏蔽鼠标右键菜单</title> <style type="text/css"> </style> </head>原创 2021-11-04 17:32:37 · 1501 阅读 · 0 评论 -
JavaScript - 获取、修改 title 元素的内容
文章目录获取 title 元素的内容修改 title 元素的内容参考获取 title 元素的内容<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My Title</title> </head> <body> <script type="text/javascr原创 2021-10-28 10:22:39 · 1901 阅读 · 0 评论 -
JavaScript - 用于 Keil IDE中,格式化宏定义,在行末添加行连接符
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Keil Format</title> <style type="text/css"> * { margin: 0; padding: 0;原创 2021-10-26 14:53:23 · 196 阅读 · 0 评论 -
JavaScript - 写文本到系统剪贴板,从系统剪贴板读文本
文章目录示例参考示例谷歌浏览器:版本 94.0.4606.71(正式版本)<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> textarea { width: 30原创 2021-10-09 14:34:06 · 134 阅读 · 0 评论 -
JavaScript - 在 textarea 中,双击选择所有文本
文章目录示例参考示例谷歌浏览器:版本 94.0.4606.71(正式版本)默认情况下,在 textarea 中,双击无法选择所有的文本。不过,可以使用 HTMLInputElement.select() 方法达到这种效果:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <原创 2021-10-09 10:13:28 · 1246 阅读 · 0 评论 -
JavaScript - 字符串替换
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; box-原创 2021-10-09 06:57:34 · 172 阅读 · 0 评论 -
JavaScript & Vue - 两个对称的 textarea 简单互连跟随滚动
文章目录使用 JavaScript 实现使用 Vue.js 2.6.14 实现参考使用 JavaScript 实现谷歌浏览器版本:Version 94.0.4606.71 (Official Build) (64-bit)提示:关键代码在第 70、78 行。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></t原创 2021-10-07 21:09:04 · 389 阅读 · 0 评论 -
JavaScript - textarea 滚动至顶部或底部
文章目录示例参考谷歌浏览器版本:Version 94.0.4606.71 (Official Build) (64-bit)示例<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> textarea原创 2021-10-07 18:50:43 · 1268 阅读 · 0 评论 -
HTML & CSS - 两个 textarea 在父容器中左右对称布局
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; box.原创 2021-10-07 11:18:58 · 625 阅读 · 0 评论 -
CSS - 去除 textarea 被选中(获取焦点)之后的轮廓
谷歌浏览器版本:Version 94.0.4606.71 (Official Build) (64-bit)通过设置 textarea 元素的 outline CSS 属性,可改变其轮廓:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/c.原创 2021-10-06 13:09:13 · 1348 阅读 · 0 评论 -
CSS - 控制 textarea 是否可调整大小
文章目录示例参考In most browsers, <textarea>s are resizable — you’ll notice the drag handle in the right hand corner, which can be used to alter the size of the element on the page. This is controlled by the resize CSS property — resizing is enabled by defa原创 2021-10-06 11:24:52 · 1941 阅读 · 0 评论 -
在 JavaScript 中,truthy(真值)指的是?
文章目录Truthy[See also](https://developer.mozilla.org/en-US/docs/Glossary/Truthy#see_also)测试示例原文TruthyIn JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as fa转载 2021-10-04 14:26:21 · 218 阅读 · 0 评论 -
echarts.js - 动态数据 + 时间坐标轴
<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> &.原创 2021-09-30 20:55:34 · 3918 阅读 · 3 评论 -
JavaScript - canvas - 颜色选择器
文章目录效果示例参考效果示例项目结构:源码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>颜色选择器</title> <style type="text/css"> div { width: 200px;原创 2021-09-19 10:32:39 · 340 阅读 · 0 评论 -
JavaScript - 使用 SheetJS 将数组保存到 Excel 文件
文章目录效果示例参考效果示例点击 save 按钮,将 worksheetData 数组中的数据保存到 Excel 文件中:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="butt原创 2021-09-17 19:15:41 · 1704 阅读 · 0 评论 -
硬件 & JavaScript - 一个【电阻分压器 - 计算器】
效果HTML & JavaScript 代码计算公式:VOUT = VCC / (R1 + R2) * R2<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>电阻分压计算器</title> <style type="text/css"> img {原创 2021-09-04 16:09:18 · 991 阅读 · 0 评论 -
JavaScript - canvas - 镜像图片
文章目录参考<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Using image</title> <style type="text/css"> * { /* margin: 0; padding: 0;原创 2021-08-14 19:56:52 · 702 阅读 · 0 评论 -
JavaScript - canvas - 通过 <input type=“file“ /> 加载图片
文章目录参考<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Using image</title> <style type="text/css"> * { /* margin: 0; padding: 0;原创 2021-08-14 18:16:05 · 2891 阅读 · 0 评论