<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
@keyframes blink {
0%,
100% {
opacity: 1
}
50% {
opacity: 0
}
}
@-webkit-keyframes blink {
0%,
100% {
opacity: 1
}
50% {
opacity: 0
}
}
@-moz-keyframes blink {
0%,
100% {
opacity: 1
}
50% {
opacity: 0
}
}
.wrap {
width: 1000px;
text-align: center;
margin: 100px auto;
}
.wrap h1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
.word {
font-weight: 700;
}
.typed-cursor {
opacity: 1;
-webkit-animation: blink .7s infinite;
-moz-animation: blink .7s infinite;
animation: blink .7s infinite;
display: none;
}
.saySection {
margin-top: 50px;
}
.saySection input {
font-size: 30px;
}
.saySection .txtSay {
padding-left: 10px;
}
.saySection .btnSay {
display: inline-block;
padding: 0 20px;
cursor: pointer;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function () {
var str="红鲤鱼与绿鲤鱼与驴";
var arr=str.split("");
var str2="";
var num=0;
var timer=null;
$(".typed-cursor").show();
timer= setInterval(function () {
if(arr[num]===undefined){
clearInterval(timer);
$(".typed-cursor").hide();
}else {
str2+=arr[num];
$(".word").text(str2);
num++;
}
},200);
$("#btnSay").click(function () {
str=$("#inValue").val();
var arr=str.split("");
var str2="";
var num=0;
$(".typed-cursor").show();
timer= setInterval(function () {
if(arr[num]===undefined){
clearInterval(timer);
$(".typed-cursor").hide();
}else {
str2+=arr[num];
$(".word").text(str2);
num++;
}
},200);
});
})
</script>
</head>
<body>
<div class="wrap">
<h1>
你想说的话:<span class="word"></span><span class="typed-cursor">|</span>!
</h1>
<div class="saySection">
<input type="text" id="inValue" class="txtSay">
<input type="button" value="say" id="btnSay" class="btnSay">
</div>
</div>
</body>
</html>
动态输入案例-text,val练习
最新推荐文章于 2021-05-11 22:22:10 发布