JavaScript封装数据双向绑定实现字体随机变色

1.书写好DOM

<script>
    // 第一个参数代表一段话  第二个参数代表存放的标签
    function randomSize(e, place) {
        console.log(e)
        var newSize = e.split("");
        for (i = 0; i < newSize.length; i++) {
            var hex = ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
            var S = document.createElement('span');
            S.innerHTML = newSize[i]
            S.style.color = '#' + hex
            place.appendChild(S)
        }
    }
    var inputObj = document.getElementById('userName')
    var box = '我是一段话'
    var tag = document.getElementsByClassName('box')[0]
    // 简易数据双向绑定
    var obj = {};
    Object.defineProperty(obj, 'test', {
        set: (newVal) => {
            inputObj.value = newVal;
        }
    });
    inputObj.addEventListener('keyup', (e) => {
        console.log(e)
        this.tag.innerHTML = ''
        randomSize(e.target.value, this.tag)
    })
    randomSize(box, tag)
</script>
2.HTML代码
    <input type="text" placeholder="输入字体" id="userName">
<div class="box"></div>