js實現逐字列印效果

這裡做了個文字選擇遊戲遊戲，有興趣可以複製程式碼看看
程式碼如下，這裡要引用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>
js實現逐字列印效果

js實現逐字列印效果

js實現櫥窗展示效果

js實現蒙版效果

JS實現滑動導航效果

JS實現瀑布流效果

js實現簡單放大鏡效果

js實現選項卡效果

原生js實現瀑布流效果

JS實現煙花爆炸效果

JS實現放煙花效果

JS實現碰撞檢測效果

js實現點贊效果

HTML+JS實現“程式碼雨”效果原始碼（黑客帝國文字下落效果）

js實現小時鐘效果

JS實現圖片幻燈片效果程式碼例項

js實現星星打分效果

js實現瀏覽器列印功能的示例程式碼

js實現彈窗效果

JQuery的turn.js實現翻書效果

js實現3D旋轉效果

js實現逐字列印效果

相關推薦
