彩色打字效果

博主： Xherlock
发布时间：2021 年 12 月 25 日
565 次浏览
暂无评论
4145字数
分类： Web前端

# 彩色打字效果

效果如图

![请输入图片描述](http://xherlock.top/usr/uploads/2021/12/672142370.png)

## 学习代码

~~~html

<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&times;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的平方根

### 使用案例：

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

~~~js
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可以实现随机字符

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

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

## DOM

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

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

## 三目运算

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

~~~js
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

~~~js
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知识

最后修改：2021 年 12 月 25 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Reverse（十一）
浏览次数: 2629
Win11新机鼓捣记录
浏览次数: 2382
栈~数制转换
浏览次数: 1604
C++学习
浏览次数: 1603
Python实现文件管理系统（重命名和删除）
浏览次数: 1575

顶点软件
你写得非常清晰明了，让我很容易理解你的观点。
mars
博主你好，请问怎么知道的alloc函数属于Buffer下的方法...
lj
该评论仅登录用户及评论双方可见
Mr.Guan
:@(赞一个)
Typecho
欢迎加入 Typecho 大家族

CH1 静态分析
浏览次数: 400
简单控件
浏览次数: 698
pytorch数据迁移、转换
浏览次数: 375
js逆向爬虫1
浏览次数: 1372
机试Day2
浏览次数: 296

彩色打字效果

Xherlock • 2021 年 12 月 25 日

# 彩色打字效果

效果如图

![请输入图片描述](http://xherlock.top/usr/uploads/2021/12/672142370.png)

## 学习代码

## js中的Math对象

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

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

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

Math.round():	四舍五入

Math.round(value&times;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的平方根

### 使用案例：

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

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

## js中的String对象

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

unicode中32-126是字符char

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

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

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

## DOM

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

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

## 三目运算

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

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

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

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

发表评论 取消回复

彩色打字效果

发表评论取消回复