给你的文章加上炫酷的打字机特效

效果展示

相关代码

<div id="typing"></div>
<script>
    function typing(element) {
        let rgbColors = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"]
        let start = "遇上你啊，遇上你啊！";
        let content = ["要时间嘉许，等春风得意，我正好遇上你！"]
        let option = { text: "", prefixP: -5, skillI: 0, skillP: 0, direction: "forward", delay: 2, step: 1 };
        init()
        function fromCharCode() {
            return String.fromCharCode(94 * Math.random() + 33)
        }
        function getRgbColor() {
            return rgbColors[Math.floor(Math.random() * rgbColors.length)]
        }
        function getFragment(times) {
            let fragment = document.createDocumentFragment()
            for (let i = 0; i < times; i++) {
                let span = document.createElement("span");
                span.textContent = fromCharCode()
                span.style.color = getRgbColor()
                fragment.appendChild(span)
            }
            return fragment
        }
        function init() {
            let text = content[option.skillI];
            option.step ? option.step-- : (option.step = 1, option.prefixP < start.length ? (option.prefixP >= 0 && (option.text += start[option.prefixP]), option.prefixP++) : "forward" === option.direction ? option.skillP < text.length ? (option.text += text[option.skillP], option.skillP++) : option.delay ? option.delay-- : (option.direction = "backward", option.delay = 2) : option.skillP > 0 ? (option.text = option.text.slice(0, -1), option.skillP--) : (option.skillI = (option.skillI + 1) % content.length, option.direction = "forward")), element.textContent = option.text, element.appendChild(getFragment(option.prefixP < start.length ? Math.min(5, 5 + option.prefixP) : Math.min(5, text.length - option.skillP))), setTimeout(init, 75)
        }
    };
    typing(document.getElementById('typing'));
</script>