用代码给孩子造“钱”

起因

作为家里有两个娃的奶爸,时长为了孩子乱花钱而焦虑不已。然后最近看到一段短视频说了这么段话。

父母不要被动给孩子买东西,而是定期给孩子钱。让孩子自己管钱培养她对于钱的认知和理财的观念。

突然感觉大师我悟了。感觉值得一试。于是就打算给他们一些钱,以后想买什么玩具都花他们自己的钱。但是发真钱呢怕她们乱丢,而且说真的家里真没啥现金,于是就有了做代币的想法。

做法

一开始打算用 word 来做代币进行打印的,结果发现想实现点复杂的效果就很麻烦…………还不如发挥传统艺能直接用网页来搞,感觉作为前端写 HTML 和 CSS 实现界面可要比 Word、PPT、PS 快多了……)。

代码

其实可以用纯 DOM 来写的,但还是感觉用 Vue 写更顺手,反正也就插个 /vue.global.js 文件的事儿。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Cache-Control" content="no-cache" /><meta http-equiv="Expires" content="0" /><title>Money</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style>html {padding: 0;margin: 0;}body {padding: 0;margin: 0;height: 100vh;}.money {display: flex;flex-wrap: wrap;align-items: center;}.money-item {position: relative;width: 28%;height: 80px;padding: 10px;margin: 2px;border: solid 1px #000;border-radius: 5px;background: #fff;text-align: right;}.money-item-title {font-size: 16px;line-height: 20px;}.money-item-value {font-size: 32px;line-height: 40px;-webkit-text-stroke: 1px black;-webkit-text-fill-color: transparent;color: #fff;}.money-item-key {font-size: 12px;line-height: 20px;}.money-item-img {width: 100px;height: 80px;position: absolute;top: 10px;left: 10px;}</style></head><body><div id="app"><div class="money"><div v-for="index in amount" class="money-item"><div class="money-item-title">奶昔布丁代币</div><div class="money-item-value">{{ value }}</div><div class="money-item-key">NO.{{ genMoneyKey(index) }}</div><img class="money-item-img" src="./100.png" /></div></div></div><script>String.prototype.hashCode = function () {var hash = 0,i,chr;if (this.length === 0) return hash;for (i = 0; i < this.length; i++) {chr = this.charCodeAt(i);hash = (hash << 5) - hash + chr;hash |= 0; // Convert to 32bit integer}return hash;};const { createApp } = Vue;createApp({data() {return {value: 100,amount: 27,};},methods: {genMoneyKey(index) {const time = new Date().getTime();return time + "-" + index;},},}).mount("#app");</script></body>
</html>

效果图

界面上,由于是给孩子们的代码,自然要来点卡通元素的图片。而在货币面值的数字上,用到了 -webkit-text-stroke-webkit-text-fill-color 做了一个镂空的效果。最后用时间戳当做代币唯一编码。看着就想那么回事儿了。

image

最后

用 chrome 打开 .html 文件,使用浏览器的打印功能将代币打印出来就大功告成了。后面就可以剪开来给孩子们发“钱”啦~

技术实现上其实完全没啥难度,反倒是其他方面有些感悟:

  • 技术开发不止是用来工作的工具,也可以用到日常生活中。
  • 我经常在遇到一些问题、或者在用一些软件的时候在想:这个问题我可不可以用代码来提高效率?我是不是可以自己用代码实现这个功能?感觉前端可以折腾的事儿还挺多的。
  • 因兴趣而写的代码虽然没有产生经济利益,但是很有趣,也会在将脑中一个个想法实现的过程中收获心流和成就感。

总之,享受代码给我们带来的超能力吧~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/2500.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在官网查看Qt5的所有模块?

2024年4月23日&#xff0c;周二上午 如果你不想一步步来的话&#xff0c;可以直接去这个Qt官方链接 https://doc.qt.io/qt-5/qtmodules.html 第一步&#xff1a;去到Qt官网 https://www.qt.io/ 第二步&#xff1a;点击文档链接 第三步&#xff1a;选择文档中的“Qt5” 第四步…

Python项目开发实战:如何自动化读取Excel数据文件并用可视化分析

注意:本文的下载教程,与以下文章的思路有相同点,也有不同点,最终目标只是让读者从多维度去熟练掌握本知识点。 下载教程:Python项目开发实战_自动化读取Excel数据文件并用可视化分析_编程案例实例课程教程.pdf 1、可视化分析的特点 在Python项目开发实战中,可视化分析扮…

Python中的tkinter工具包帮助文档查询以及Python其他GUI工具包分类

Python中的tkinter工具包帮助文档查询以及Python其他GUI工具包分类 虽然Python支持许多GUI工具包&#xff0c;然而Tkinter是Python的实际标准GUI&#xff08;图形用户界面&#xff09;包&#xff0c;也是最常用的一种。本文简要介绍tkinter工具包帮助文档查询以及Python其他GU…

SpanBert学习

SpanBERT: Improving Pre-training by Representing and Predicting Spans 核心点 提出了更好的 Span Mask 方案&#xff0c;也再次展示了随机遮盖连续一段字要比随机遮盖掉分散字好&#xff1b;通过加入 Span Boundary Objective (SBO) 训练目标&#xff0c;增强了 BERT 的性…

flask_apscheduler 定时任务框架

简介 Flask_apscheduler是一个在Flask框架中使用的APScheduler库的扩展。APScheduler是一个用于调度任务的Python库&#xff0c;可以在指定的时间间隔调度函数、方法或任意可调用对象的执行。 Flask_apscheduler对APScheduler进行了集成&#xff0c;使得在Flask应用中可以简便…

FFmpeg 源码分析:av_seek_frame()

[TOC](FFmpeg 源码分析&#xff1a;av_seek_frame()) FFmpeg 源码分析&#xff1a;av_seek_frame() 函数原型 av_seek_frame() 是 FFmpeg 中的一个函数&#xff0c;位于 libavformat/avformat.h&#xff0c;用于定位媒体文件中的某一帧。 下面是 av_seek_frame() 的函数定义…

Python小功能实现(链接下载图品并存储到EXCEL中)

import os import requests from openpyxl import Workbook from openpyxl.drawing.image import Image from concurrent.futures import ThreadPoolExecutor# 图片链接列表 image_urls ["https://uploads/file/20230205/f85Lpcv8PXrLAdmNUDE1Hh6xqkp0NHi2gSXeqyOb.png&q…

ctfshow——XSS

文章目录 XSS介绍什么是xss&#xff1f;XSS危害XSS的分类常用XSSpayload web316——反射型XSSweb317——过滤<script> web318——过滤script、imgweb319——不止过滤script、imgweb320——过滤空格web321——不止过滤空格web322——不止过滤空格web323web324web 325web32…

【笔记】短信服务设计记录

模块拆分&#xff1a; - 服务配置 - 模板 - 计费 - 日志 - 验证码管理 - 发送任务的管理 思考点 怎么与用户&#xff08;手机&#xff09;绑定&#xff0c;如何防止频繁调用。 策略模式来适配多种不同短信发送通道的场景。 短信任务管理&#xff0c;轮询和异步对生产者消…

报名 | Qt汽车及工业行业解决方案及实战训练 深圳站(5月15日 星期三)

加入我们的Qt技术培训&#xff0c;探索跨平台应用开发的无限可能&#xff01;本次培训将深入Qt框架&#xff0c;涵盖从基础概念到高级功能的全方位知识&#xff0c;无论您是刚入门的新手还是希望提升技能的资深开发者&#xff0c;都能在此找到适合自己的学习路径。通过实践案例…

OpenTelemetry-2.Go接入Jaeger(grpc,gin-http)

目录 1.什么是OpenTelemetry 2.搭建jaeger 3.链路追踪 本地调用 远程调用 GRPC proto server端 client端 Gin-HTTP 调用流程 api1 api2 grpc 4.完整代码 1.什么是OpenTelemetry 参考&#xff1a;OpenTelemetry-1.介绍-CSDN博客 2.搭建jaeger 参考&#xff1a;…

Node.js 环境变量动态获取和静态获取的区别

Node.js 环境变量动态获取和静态获取的区别 Node.js 环境 vs 浏览器环境 process.env.SERVICE_PORTAL: 适用环境&#xff1a;Node.js 环境。用途&#xff1a;访问操作系统的环境变量。 import.meta.env.SERVICE_PORTAL: 适用环境&#xff1a;浏览器环境&#xff0c;特别是在使…

齐护K210系列教程(八)_LCD显示图片

LCD显示图片 文章目录 LCD显示图片1&#xff0c;显示单张图片2&#xff0c;通过按键切换显示SD卡内的图片3&#xff0c;通过传感器切换图片4&#xff0c;画中画显示&#xff0c;并缩放5&#xff0c;课程资源 联系我们 AIstart 显示的图片的默认分辨率为&#xff1a;320*240 &am…

使用ROC指标100次盈利交易后,众汇才明白的道理

使用ROC指标100次盈利交易后才明白的道理&#xff0c;众汇外汇认为盈利的基本就是考虑这些指标。 ①.资产波动性 需要考虑到资产波动性&#xff0c;根据资产的波动性更改设置&#xff0c;设置的结果会告诉投资者这段时间的平均波动率。 ②添加过滤器。交易系统的主要指标是趋…

MySQL无法打开情况下读取frm文件的表结构

一、背景&#xff1a; 开发人员通过MySQL客户端工具&#xff0c;可以访问MySQL5.7.6&#xff0c;可以访问具体的DB&#xff0c;可以查看小写表的数据&#xff0c;但是无法查看大写表的数据&#xff0c;报错信息为“table does not exist”。 二、检查与分析&#xff1a; ssh登录…

AXI4 ---排序模型

1. 排序模型的定义 AXI4协议支持一种基于AXI ID事务标识符使用的排序模型。原则是对于具有相同ID的事务&#xff1a; 针对任何单个外围设备的事务&#xff0c;必须按照它们被发出的顺序到达外围设备&#xff0c;无论事务的地址是什么。使用相同或重叠地址的内存事务必须按照它…

matlab代码

&#xff08;一&#xff09; % 你可以根据实际的分隔符进行设置 opts delimitedTextImportOptions(Delimiter, ,); % 读入(.txt)文档&#xff0c;文档以分隔符进行分离 -> table data readtable(D:\QT_Project\servo\recvData.txt, opts);% table -> cell dataMatr…

圈子交友系统话题设置-免费圈子社区论坛交友系统-圈子交友系统功能介绍-APP小程序H5多端源码交付!

1. 圈子的独特创造与精心管理 源码赋予用户创造独特圈子的能力&#xff0c;为志同道合的人们打造一个分享兴趣、交流见解的平台。每个圈子都可以个性化定制主题、标签和规则&#xff0c;以确保圈子具备个性特点和强烈的社群感。作为圈子的创建者&#xff0c;您将享有自由编辑资…

Ableton Live 12 Suite for Mac/Win:引领音乐制作新纪元的创意神器

在数字音乐制作领域&#xff0c;Ableton Live 12 Suite无疑是一颗璀璨的明星。这款强大的音乐制作工具&#xff0c;无论你是Mac用户还是Windows用户&#xff0c;都能为你带来前所未有的音乐创作体验。 Ableton Live 12 Suite的出色之处在于其全面而精细的功能设计。从音频录制…

计算机考研|25科软值得冲吗?会不会炸?

给大家看一串数字&#xff1a;3300 4300 1400 3300 3900 没错&#xff0c;这就是科软这几年的报考学生的实际情况&#xff0c;21年的时候&#xff0c;报考人数达到了峰值&#xff0c;有4300人&#xff0c;当年复试线388分真的可以说是炸穿地心。24年报考人数3900人&#xff0c…