js实现逐字打印效果
作者：互联网
逐字打印利用js的charAt(i)，利用定时器和i++ 把字一个个添加到div中实现逐字打印效果
function huan() { setTimeout(function () { $(st)[0].innerHTML += ele.charAt(i) i++ if (i <= ele.length) { huan() } }, 80) } huan()
这里做了个文字选择游戏游戏，有兴趣可以复制代码看看
代码如下，这里要引用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)
标签：right,逐字,top,打印,js,dpg,background,border,size 来源： https://www.cnblogs.com/lqqmigo/p/13583163.html