彩色打字效果

效果如图

学习代码

<!-- 彩色打字效果 -->
<span class="text-muted text-xs block">
    <div id="chakhsu"></div>    <!-- 设置占位 -->
    <script> 
    var chakhsu = function (r) { 
        function t() { 
            return b[Math.floor(Math.random() * b.length)]; // 随机颜色
        } 
        function e() { 
            return String.fromCharCode(94 * Math.random() + 33) 
        } 
        function n(r) { 
            for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                var l = document.createElement("span"); 
                l.textContent = e(), 
                l.style.color = t(), 
                n.appendChild(l) 
            } 
            return n 
        } 
        function i() { 
            var t = o[c.skillI]; 
            c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), 
            r.textContent = c.text, 
            r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), 
            setTimeout(i, d) 
        } 
        /*以下内容自定义修改*/ 
        var l = "(~￣▽￣)~", 
        o = ["A student of cybersecurity"].map(function (r) { return r + "" }), 
        a = 2, g = 1, s = 5, d = 75, 
        b = ["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)"], 
        c = { text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g }; 
        i(); 
    }; 
    chakhsu(document.getElementById('chakhsu')); 
    </script>
</span> 

js中的Math对象

Math.random(): 随机选取大于等于0.0小于1.0的double类型值

Math.floor(): 对数进行下舍入

Math.ceil(): 对数进行上舍入

Math.round(): 四舍五入

Math.round(value×10$^{a}$)/10$^{a}$: 四舍五入a位小数

Math.max(x, y): 返回xy最大值

Math.min(x, y): 返回xy最小值

Math.abs(): 返回绝对值

Math.pow(x, y): 返回x的幂次方

Math.sqrt(): 返回x的平方根

使用案例：

随机获取数组中的一个颜色

return b[Math.floor(Math.random() * b.length)]; 

js中的String对象

String.fromCharCode(): 将Unicode编码转换为一个字符，里面也可以是一连串分割unicode编码

unicode中32-126是字符char

• 32是空格
• 33-47是各种字符
• 48-57是0-9的数字
• 58-64还是各种字符
• 65-90是26个小写英文字母
• 91-96还是各种字符
• 97-122是26个大写英文字母
• 123：{
• 124：|
• 125：}
• 126：~

结合前面的random可以实现随机字符

return String.fromCharCode(94 * Math.random() + 33);

String.charCodeAt(): 返回指定位置的字符的Unicode编码

DOM

document.createElement() 每次创建都要刷新

document.createDocumentFragment() 创建一个文档片段最后将所有结点加入，只需一次刷新

三目运算

这是我碰上的最恶心的三目运算，但我相信一定有更恶心的，写这个的代码的人思维能力实在是太强了

c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), 

我费了半个小时多把它改写成了正常if-else

if(c.step)
{
    c.step--;
}
else
{
    c.step = g;
    if(c.prefixP<l.length)
    {
        if(c.prefixP>=0)
        {
            c.text+=l[c.prefixP];
        }
        c.prefixP++;
    }
    else
    {
        if("forward" === c.direction)
        {
            if(c.skillP<t.length)
            {
                c.text+=t[c.skillP];
                c.skillP++;
            }
            else
            {
                if(c.delay)
                {
                    c.delay--;
                }
                else
                {
                    c.direction="backward";
                    c.delay=a;
                }
            }
        }
        else
        {
            if(c.skillP>0)
            {
                c.text=c.text.slice(0,-1);
                c.skillP--;
            }
            else
            {
                c.skillI=(c.skillI+1)%o.length;
                c.direction="forward";
            }
        }
    }
}

经过这个改写，我感觉我的三目运算得到了极大的进步

学习这个本来希望了解如何写出这样的代码，发现设计方法过于复杂，故只学习了其中涉及的js知识