起因
作为家里有两个娃的奶爸，时长为了孩子乱花钱而焦虑不已。然后最近看到一段短视频说了这么段话。
父母不要被动给孩子买东西，而是定期给孩子钱。让孩子自己管钱培养她对于钱的认知和理财的观念。
突然感觉大师我悟了。感觉值得一试。于是就打算给他们一些钱，以后想买什么玩具都花他们自己的钱。但是发真钱呢怕她们乱丢，而且说真的家里真没啥现金，于是就有了做代币的想法。
做法
一开始打算用 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 做了一个镂空的效果。最后用时间戳当做代币唯一编码。看着就想那么回事儿了。
最后
用 chrome 打开 .html 文件，使用浏览器的打印功能将代币打印出来就大功告成了。后面就可以剪开来给孩子们发“钱”啦~
技术实现上其实完全没啥难度，反倒是其他方面有些感悟：
- 技术开发不止是用来工作的工具，也可以用到日常生活中。
- 我经常在遇到一些问题、或者在用一些软件的时候在想：这个问题我可不可以用代码来提高效率？我是不是可以自己用代码实现这个功能？感觉前端可以折腾的事儿还挺多的。
- 因兴趣而写的代码虽然没有产生经济利益，但是很有趣，也会在将脑中一个个想法实现的过程中收获心流和成就感。
总之，享受代码给我们带来的超能力吧~
