时间戳

首页 > 技术文章 > js实现逐字打印效果

js实现逐字打印效果

lqqmigo 2020-08-29 19:19 原文

 逐字打印利用js的charAt(i)，利用定时器和i++ 把字一个个添加到div中实现逐字打印效果

function huan() {
                setTimeout(function () {
                    $(st)[0].innerHTML += ele.charAt(i)
                    i++
                    if (i <= ele.length) {
                        huan()
                    }
                }, 80)
            }
            huan()

 

这里做了个文字选择游戏游戏，有兴趣可以复制代码看看 这是线上版本  http://101.200.166.211/ye/block/wenzi

代码如下，这里要引用jquery文件

<!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,
        html {
            margin: 0;
            height: 0;
            width: 100%;
            height: 100%;
        }

        .t {
            position: relative;
            width: 100%;
            height: 100%;

        }



        .btn1,
        .btn2 {
            position: absolute;
            width: 200px;
            height: 50px;
            border: 1px solid #ccc;
            cursor: pointer;
            background-color: rgba(255, 255, 255, .3);
        }

        .btn66 {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 20px;
            width: 200px;
            height: 50px;
            border: 1px solid #ccc;
            cursor: pointer;
            background-color: rgba(255, 255, 255, .3);
        }

        .btn1 {
            left: 400px;
            bottom: 20px;
        }

        .btn2 {
            right: 400px;
            bottom: 20px;
        }

        .y_right {
            position: absolute;
            width: 400px;
            height: 100px;
            padding: 10px;
            border-radius: 10px;
            font-size: 24px;
            background-color: #ddd;
        }

        .y_left {
            position: absolute;
            width: 400px;
            height: 100px;
            padding: 10px;
            border-radius: 10px;
            font-size: 24px;
            background-color: #ddd;
        }

        /* 气泡 */
        .y_right::after {
            content: '';
            position: absolute;
            left: 100%;
            bottom: 0px;
            width: 42px;
            height: 16px;
            border-width: 0;
            border-style: solid;
            border-color: transparent;
            margin-left: -6px;
            border-top-width: 18px;
            border-top-color: currentColor;
            border-radius: 0 32px 0 0;
            color: #dddddd;
        }

        .y_left:after {
            content: '';
            position: absolute;
            right: 100%;
            bottom: 0px;
            width: 16px;
            height: 16px;
            border-width: 0;
            border-style: solid;
            border-color: transparent;
            border-top-width: 10px;
            border-top-color: currentColor;
            border-radius: 32px 0 0 0;
            color: #dddddd;
        }

        /* 第一题 */
        .t1 {
            background: url(../img1/1.dpg) no-repeat center;
        }

        .y_t1 {
            top: 100px;
            right: 160px;
        }

        /* 第二题 */
        .t2 {
            background: url(../img1/2.dpg) no-repeat;
            background-size: cover;
        }

        .y_t2 {
            top: 100px;
            left: 10px;
        }

        /* 第三题 */
        .t3 {
            background: url(../img1/3.dpg) no-repeat;
            background-size: cover;
        }

        .y_t3 {
            top: 100px;
            left: 10px;
        }

        /* 第四题 */
        .t4 {
            background: url(../img1/4.dpg) no-repeat;
            background-size: cover;
        }

        .y_t4 {
            top: 100px;
            left: 10px;
        }

        /* 第五题 */
        .t5 {
            background: url(../img1/5.dpg) no-repeat;
            background-size: cover;
        }

        .y_t5 {
            top: 100px;
            right: 10px;

        }

        /* 第六题 */
        .t6 {
            background: url(../img1/6.dpg) no-repeat;
            background-size: cover;
        }

        .y_t6 {
            top: 30px;
            right: 400px;

        }

        /* 第七题 */
        .t7 {
            background: url(../img1/7.dpg) no-repeat;
            background-size: cover;
        }

        .y_t7 {
            top: 30px;
            right: 400px;

        }

        /* 第八题 */
        .t8 {
            background: url(../img1/8.dpg) no-repeat;
            background-size: cover;
        }

        .y_t8 {
            top: 30px;
            right: 400px;

        }

        /* 第九题 */
        .t9 {
            background: url(../img1/9.dpg) no-repeat;
            background-size: cover;
        }

        .y_t9 {
            top: 30px;
            right: 500px;

        }

        /* 第十题 */
        .t10 {
            background: url(../img1/10.dpg) no-repeat;
            background-size: cover;
        }

        .y_t10 {
            top: 200px;
            right: 500px;

        }

        /* 正确 */
        .success {
            background: url(../img1/66.dpg) no-repeat;
            background-size: cover;
        }

        .y_t11 {
            top: 50px;
            right: 700px;

        }

        /* 错误 */
        .fd {
            background: url(../img1/44.dpg) no-repeat;
            background-size: cover;
        }

        .y_t12 {
            top: 50px;
            right: 200px;

        }

        .yin {
            display: none;
        }
    </style>
</head>

<body>
    <div class="t1 t">
        <div class="y_left y_t1"></div>
        <button class="btn1 t1_btn1">没问题！</button>
        <button class="btn2 t1_btn2">我就不！</button>
    </div>
    <div class="t2 t yin">
        <div class="y_right y_t2"></div>
        <button class="btn1 t2_btn1">当然救你啦~</button>
        <button class="btn2 t2_btn2">我救我妈！</button>
    </div>
    <div class="t3 t yin">
        <div class="y_right y_t3"></div>
        <button class="btn1 t3_btn1">肯定会拉傻瓜~</button>
        <button class="btn2 t3_btn2">滚！打车滚！</button>
    </div>
    <div class="t4 t yin">
        <div class="y_right y_t4"></div>
        <button class="btn1 t4_btn1">我心爱的东西只有你~</button>
        <button class="btn2 t4_btn2">那得看什么东西了</button>
    </div>
    <div class="t5 t yin">
        <div class="y_left y_t5"></div>
        <button class="btn1 t5_btn1">不回他</button>
        <button class="btn2 t5_btn2">敷衍聊着</button>
    </div>
    <div class="t6 t yin">
        <div class="y_right y_t6"></div>
        <button class="btn1 t6_btn1">哄你哄你~</button>
        <button class="btn2 t6_btn2">你还敢生我气？</button>
    </div>
    <div class="t7 t yin">
        <div class="y_right y_t7"></div>
        <button class="btn1 t7_btn1">打电话，打通为止</button>
        <button class="btn2 t7_btn2">你不理我也不理</button>
    </div>
    <div class="t8 t yin">
        <div class="y_right y_t8"></div>
        <button class="btn1 t8_btn1">当然答应啦</button>
        <button class="btn2 t8_btn2">姐看中的不是钱！</button>
    </div>
    <div class="t9 t yin">
        <div class="y_right y_t9"></div>
        <button class="btn1 t9_btn1">我知难而退</button>
        <button class="btn2 t9_btn2">一世追随</button>
    </div>
    <div class="t10 t yin">
        <div class="y_right y_t10"></div>
        <button class="btn1 t10_btn1">爱</button>
        <button class="btn2 t10_btn2">艾拉五油</button>
    </div>
    <div class="t success yin">
        <div class="y_right y_t11"></div>
        <button class="btn66">重新开始</button>
    </div>
    <div class="t fd yin">
        <div class="y_left y_t12"></div>
        <button class="btn66">重新开始</button>
    </div>

    <script>
        var layer = layui.layer
        // 重新开始
        $(".btn66").on("click", function () {
            da("你是坏蛋吗？？？？重新来过吧略略略(￢︿̫̿￢☆)", ".y_t12")
            $(this).parent().hide()
            $(".t1").show()
        })
        // 第一题
        // 打印
        function da(ele, st) {
            var i = 0
            $(st).html("")
            function huan() {
                setTimeout(function () {
                    $(st)[0].innerHTML += ele.charAt(i)
                    i++
                    if (i <= ele.length) {
                        huan()
                    }
                }, 80)
            }
            huan()
        }

        da("老公给你准备了9个送命题哟，你敢玩不", ".y_t1")
        $(".t1_btn1").on("click", function () {
            da("1，我和你妈同时掉水里，你先救谁？", ".y_t2")
            $(".t1").hide()
            $(".t2").show()
            layer.msg("有胆量~")

        })
        $(".t1_btn2").on("click", function () {
            da("你是坏蛋吗？？？？重新来过吧略略略(￢︿̫̿￢☆)", ".y_t12")
            $(".t1").hide()
            $(".fd").show()
        })
        // 第二题
        $(".t2_btn1").on("click", function () {
            da("2，如果因为吵架，我离家出走，你会不会主动联系我？", ".y_t3")
            $(".t2").hide()
            $(".t3").show()
            layer.msg("很棒嘛~")
        })
        $(".t2_btn2").on("click", function () {
            da("你是坏蛋吗？？？？重新来过吧略略略(￢︿̫̿￢☆)", ".y_t12")
            $(".t2").hide()
            $(".fd").show()
        })
        // 第三题
        $(".t3_btn1").on("click", function () {
            da("3，我要是弄坏了你最心爱的东西，你会不会生我气？", ".y_t4")
            $(".t3").hide()
            $(".t4").show()
            layer.msg("这题对你小意思了~")
        })
        $(".t3_btn2").on("click", function () {
            da("你是坏蛋吗？？？？重新来过吧略略略(￢︿̫̿￢☆)", ".y_t12")
            $(".t3").hide()
            $(".fd").show()
        })
        // 第四题
        $(".t4_btn1").on("click", function () {
            da("4，如果有个男同事加你找你聊闲天你会怎么做？", ".y_t5")
            $(".t4").hide()
            $(".t5").show()
            layer.msg("老婆真好~")
        })
        $(".t4_btn2").on("click", function () {
            da("你是坏蛋吗？？？？重新来过吧略略略(￢︿̫̿￢☆)", ".y_t12")
            $(".t4").hide()
            $(".fd").show()
        })
        // 第五题
        $(".t5_btn1").on("click", function () {
            da("5，有一天你惹我生气了，我不理你咋整？", ".y_t6")
            $(".t5").hide()
            $(".t6").show()
            layer.msg("继续哟老婆~")
        })
        $(".t5_btn2").on("click", function () {
            da("你是坏蛋吗？？？？重新来过吧略略略(￢︿̫̿￢☆)", ".y_t12")
            $(".t5").hide()
            $(".fd").show()
        })
        // 第六题
        $(".t6_btn1").on("click", function () {
            da("6，如果有一天我突然没理你咋整？", ".y_t7")
            $(".t6").hide()
            $(".t7").show()
            layer.msg("老婆真好~")
        })
        $(".t6_btn2").on("click", function () {
            da("你是坏蛋吗？？？？重新来过吧略略略(￢︿̫̿￢☆)", ".y_t12")
            $(".t6").hide()
            $(".fd").show()
        })
        // 第七题
        $(".t7_btn1").on("click", function () {
            da("7，如果有个很有钱的追你，并且打算娶你咋整？", ".y_t8")
            $(".t7").hide()
            $(".t8").show()
            layer.msg("爱你哟~")
        })
        $(".t7_btn2").on("click", function () {
            da("你是坏蛋吗？？？？重新来过吧略略略(￢︿̫̿￢☆)", ".y_t12")
            $(".t7").hide()
            $(".fd").show()
        })
        // 第八题
        $(".t8_btn2").on("click", function () {
            da("8，我爸妈死活不同意我们在一起，但是我很坚持不放弃，你会放弃吗", ".y_t9")
            $(".t8").hide()
            $(".t9").show()
            layer.msg("爱死你了~")
        })
        $(".t8_btn1").on("click", function () {
            da("你是坏蛋吗？？？？重新来过吧略略略(￢︿̫̿￢☆)", ".y_t12")
            $(".t8").hide()
            $(".fd").show()
        })
        // 第九题
        $(".t9_btn2").on("click", function () {
            da("9，恭喜你！最后一个！送分题，你爱我吗", ".y_t10")
            $(".t9").hide()
            $(".t10").show()
            layer.msg("最后一题咯~")
        })
        $(".t9_btn1").on("click", function () {
            da("你是坏蛋吗？？？？重新来过吧略略略(￢︿̫̿￢☆)", ".y_t12")
            $(".t9").hide()
            $(".fd").show()
        })
        // 第十题

        $(".t10_btn1").on("click", function () {
            da("这些答案很简单，就三个字，我爱你", ".y_t11")
            $(".t10").hide()
            $(".success").show()
            layer.msg("不亏是我老婆丫~")
        })
        $(".t10_btn2").on("click", function () {
            da("这些答案很简单，就三个字，我爱你", ".y_t11")
            $(".t10").hide()
            $(".success").show()
            layer.msg("不亏是我老婆丫~")
        })
    </script>
</body>

</html>

 

setTimeout(function () {
                    $(st)[0].innerHTML += ele.charAt(i)
                    i++
                    if (i <= ele.length) {
                        huan()
                    }
                }, 80)

推荐阅读