起因

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

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

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

做法

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

代码

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

html 复制代码

<!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 文件，使用浏览器的打印功能将代币打印出来就大功告成了。后面就可以剪开来给孩子们发"钱"啦~

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

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

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

用代码给孩子造“钱”

起因

做法

代码

效果图

最后