用代码给孩子造“钱”-编程知识

用代码给孩子造“钱”

起因

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

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

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

做法

一开始打算用 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>