js实现打字机效果

最新推荐文章于 2024-05-14 23:18:04 发布

他说不会。

最新推荐文章于 2024-05-14 23:18:04 发布

阅读量415

点赞数

分类专栏： js 打字机文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45852743/article/details/115294927

版权

HTML CSS JavaScript 交互设计网页特效

关键词由CSDN通过智能技术生成

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

打字机

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: url("./image/7.jpg");
            -moz-user-select: none;
            background-size: 100%;
            background-repeat: no-repeat;
        }

        #box {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            padding: 10px;
            text-indent: 2em;
            overflow: hidden;
            font-size: 28px;
        }

        #btn {
            position: fixed;
            top: 540px;
            left: 50%;
            width: 240px;
            height: 45px;
            transform: translateX(-50%);
            background-color: #87CEFA;
        }

        #btn1 {
            position: fixed;
            top: 540px;
            left: 60%;
            transform: translateX(-60%);
            height: 45px;
            background-color: #87CEFA;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <button id="btn">开始打字</button>
    <button id="btn1">清空</button>
    <script>
        document.onselectstart = new Function("event.returnValue=false;"); //禁止选择,也就是无法复制
        let str = "秋起，有bai微风滑过的清du香，有阳光照射的明媚，有树叶儿滑落的声响，还有，一抹抹微凉拂过心头的舒畅。微风，轻掀起衣角，轻吻着发丝，不经意间，那些春花夏梦的记忆，就感染这个多情的秋季。于是，心，慢慢的沉浸，轻轻的驻足，让心停歇，聆听风，倾听雨，原来，岁月处处都充满着暖意。"
        let btn = document.getElementById("btn")
        let btn1 = document.getElementById("btn1")
        let box = document.getElementById("box")
        btn1.disabled = true
        btn.addEventListener("click", function () {
            btn.disabled = true;//按钮禁用
            btn1.disabled = true;
            let index = 0;//默认下标
            let timer = setInterval(function () {
                box.innerHTML += str[index];//设置内容
                box.style.color = Color()//文字随机颜色
                box.style.textShadow = `5px 5px 5px ${Color()}`;
                index++;//下标的累加
                if (index > str.length - 1) {
                    clearInterval(timer)//清楚定时器
                    btn1.disabled = false
                }
            }, 100)
        })
        function Color() {
            return '#' + Math.random().toString(16).substr(2, 6);
        }
        btn1.addEventListener("click", function () {
            btn.disabled = false;
            box.innerHTML = ""
        })
    </script>
</body>

</html>

直接复制不废话，代码有注释！背景图片自己加即可！！！
效果展示
在这里插入图片描述

他说不会。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现打字机效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body {
复制链接

扫一扫

专栏目录