JavaScript或TypeScript奇趣小函数

使用网站名称特点网址占位/测试图片无需API Key通过URL参数即可获得来自Unsplash的高质量随机图片支持指定尺寸、灰度、模糊等效果非常适合快速构建原型和测试布局https://picsum.photos/400/300高质量内容配图提供海量专业级高清摄影照片可用于商业和非商业项目是网站、应用内配图的首选。免费层每小时限制50次请求需申请API Key用于搜索和获取图片。趣味/娱乐素材提供随机的猫咪或狗狗图片调用简单返回JSON格式的图片链接。通常无调用次数限制适合练习API调用或开发趣味应用https://api.thecatapi.com/v1/images/searchAPI前端取色器!doctypehtmlhtmllangenheadmetacharsetUTF-8/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleDocument/title/headstyle/* 全局重置统一盒模型清除默认内外边距 */*{box-sizing:border-box;/* 让 width/height 包含 padding 和 border */padding:0;margin:0;}/* 让页面根元素撑满整个视口供 .main-div 继承 100% 高度 */html, body{width:100%;height:100%;}/* 主容器铺满全屏作为绝对定位子元素的定位参照 */.main-div{width:100%;height:100%;position:relative;/* 作为内部 absolute 元素的定位上下文 */background-color:rgba(38,124,233);/* 背景图加载失败时的兜底底色 */background-image:url(https://picsum.photos/1920/1080);/* 随机图片作为取色对象 */background-repeat:no-repeat;/* 背景不平铺 */background-size:cover;/* 背景等比缩放并铺满容器 */}/* 触发取色的按钮固定在右上角 */.main-button{width:130px;height:30px;position:absolute;top:50px;right:50px;}/* 显示所取颜色值的文字位于按钮下方 */.main-text{width:130px;height:30px;line-height:30px;/* 与高度一致实现垂直居中 */position:absolute;top:100px;right:50px;font-size:16px;color:white;}/* 颜色预览方块取色后填充为对应颜色 */.main-color{width:130px;height:130px;position:absolute;top:150px;right:50px;background-color:rosybrown;/* 初始占位颜色 */}/stylebodydivclassmain-divbuttonclassmain-button点击显示/buttondivclassmain-text颜色/divdivclassmain-color/div/div/bodyscript// 获取页面上的三个关键元素按钮、文字显示区、颜色预览方块constbdocument.querySelector(button);consttdocument.querySelector(.main-text);constcdocument.querySelector(.main-color);// 点击按钮时触发取色逻辑async内部需要 await 异步取色结果b.onclickasyncfunction(){// 创建取色器实例// 注意EyeDropper 是浏览器原生 API仅在部分浏览器如 Chrome/Edge 95// 且 HTTPS 或 localhost 环境下可用Firefox/Safari 暂不支持constdrnewEyeDropper();try{// 打开取色器用户在屏幕上点选后返回颜色// open() 返回 Promise用户选中后 resolve取消如按 Esc则 rejectconstresawaitdr.open();console.log(res);// res 形如 { sRGBHex: #rrggbb }// 将取到的颜色应用到预览方块的背景色c.style.backgroundColorres.sRGBHex;// 将颜色值文本展示到文字区域t.innerHTML颜色${res.sRGBHex};}catch{// 用户取消取色未选中任何颜色时进入此分支console.log(取消输入);}};/script/html