<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>自动打字机</title>
<style>
*{
margin:0;
padding:0;
}
body{
background:#000;
}
.word{
margin:100px;
width:500px;
height:30px;
padding:2px10px;
font-size:26px;
color:#FFF;
font-weight:bold;
}
</style>
</head>
<body>
<divclass="word"></div>
<script>
varwordStr='2023年，喜迎新春，玉兔吉祥';
varwordDom=document.querySelector('.word');
varnum=0;
varwordTimeout=null;
varwLength=wordStr.length;
varshowWord='';
functionautoWord(){
wordTimeout=setTimeout(()=>{
showWord+=wordStr.charAt(num);
wordDom.innerHTML=showWord;
num++;
if(num<wLength){
autoWord();
}else{
window.clearTimeout(wordTimeout);
wordTimeout=null;
}
},300)
}
autoWord();
</script>
</body>
|
Copyright©2000-2023