1. Demo 介绍
前天看到掘金酱发的这个活动,便想着参加一下. 毕竟有奖品哈哈哈.
然后呢,我打算实��了一个春节祝福卡片的效果.
这是下面的效果:
- 点击按钮之后,进入卡片背面,也就是主要内容的一面
- 可以编辑title 和 content 内容区域
- content 的文案可以点击小龙随机生成一个
同时也支持保存当前卡片,保存本地
2. Demo实现
2.1 布局 和 样式方面
布局:
- 其实有两个卡片,使用的相对和绝对定位重叠到了一起, 然后都设置了背面可见或不可见属性- backface-visibility,具体可以看我这篇文章,专门讲解了一下这个方法 了解 css中 backface-visibility 属性
- 前面那个卡片使用图片进行填充, 后面那个卡片进行内容的展示, 具体使用到的布局方式: 相对定位和绝对定位.
- 然后外层是一个图片边框
2.2 样式和布局 总结
布局和样式倒没有什么可以说的,唯一就是那个卡片3d翻转效果, 主要用到了backface-visibility 属性
2.3 祝福文案随机
祝福文案我让chatGpt 给我生成了一份json格式的数据, 别说,真的蛮方便的. 而且质量也很可以.
- 通过fetch 读取到这个json 文件,拿到数据, 进行随机获取, 然后将获取到的数据,插入到页面Dom元素上
js
const btn = document.querySelector('.btn'); const card = document.querySelector('.card'); // 获取到龙图元素 const long = document.getElementById('logo'); // 获取到祝福文本元素 const greetings = document.querySelector('.greetings'); // 获取新年文案的方法 const getGreet = async () => { const res = await fetch('./assets/data.json'); const data = await res.json(); // 随机取出data的某一项 const randomIndex = Math.floor(Math.random() * data.length); const randomtext = data[randomIndex].text; return randomtext } // 插入新年文案 const insertText = async () => { greetings.innerHTML = await getGreet(); } // 点击龙切换祝福语 long.addEventListener('click', function () { // 随机文本插入 insertText() // 发出音效 var audio = new Audio(); audio.src = './assets/long.mp3'; audio.autoplay = true; })
2.4 祝福人和祝福语,可以直接编辑
contenteditable 是一个 HTML 属性，用于使元素可编辑。当将 contenteditable 属性设置为 "true" 时，元素的内容可以被用户编辑。
html
<div class="title" contenteditable="true">亲爱的掘友们</div> <br> <div class="greetings" contenteditable="true">春节到了, 愿您携一份开朗的心情,过好每一天, 做一个积极乐观的人, 展望一个金灿灿的未来. 身体健康, 万事如意, 心想事成,早日暴富 </div>
contenteditable 属性在大多数现代浏览器中得到支持，但在某些旧版本的浏览器中可能存在不一致的行为。因此，在使用时要进行兼容性测试，并确保所需的功能在目标浏览器中正常工作。
2.5 截取指定元素的内容,保存图片到本地
这里我们使用到了两个第三方库
html2canvas：它是一个流行的 JavaScript 库，用于在浏览器中将 DOM 元素转换为canvas。它的主要功能是将网页中的可见内容（包括 HTML 元素、CSS 样式、图像等）绘制到一个canvas元素中，从而实现截图、快照或生成图像等功能。FileSaver.js：它是一个用于在浏览器中保存文件的 JavaScript 库。它提供了一种简单的方法来生成Blob对象，并将其保存为本地文件。FileSaver.js支持在浏览器中保存各种类型的文件，例如文本文件、图像文件、PDF 文件等。
下面展示一下基本的用法:
- html2canvas
js
const targetElement = document.getElementById('target'); html2canvas(targetElement).then(function(canvas) { document.body.appendChild(canvas); // 在页面中插入生成的 canvas 元素 });
- FileSaver.js
js
const blob = new Blob(['Hello, World!'], { type: 'text/plain;charset=utf-8' }); saveAs(blob, 'hello.txt');
创建一个包含字符串 'Hello, World!' 的 Blob 对象，并使用 saveAs 函数将其保存为名为 'hello.txt' 的文本文件。
介绍完基本用法之后, 看看我们的demo 里面如何写的
- 获取卡片内容元素,使用html2canvas转换为一个
canvas对象，然后使用FileSaver.js库将canvas转换为Blob对象并保存为本地文件。
js
function captureAndSave() { const targetElement = document.getElementById('target'); html2canvas(targetElement).then(function (canvas) { canvas.toBlob(function (blob) { // 使用 FileSaver.js 保存 Blob 对象到本地文件 saveAs(blob, 'screenshot.png'); }); }); }
3. 本Demo使用到的网站
3.1 渐变
3.2 按钮
3.3 调色板
4. Demo地址
5. 结语
祝大家在新的一年里面, 工作顺利, 身体健康🥰🥰🥰. 向着自己向往的样子而努力奋斗!!!✊✊✊
