<!DOCTYPE html>
<html lang="en">
<head>
<meta name='viewport' content='width=device-width'>
<meta charset="UTF-8">
<title>打字机</title>
<style>
body{
margin: 0;
padding: 0 0 50px;
background: #CDDC39;
font-family: 'STXinwei';
color: #333;
font-size: 16px;
}
div:first-child{
padding: 35px 0 15px;
text-align: center;
}
button{
margin: 0 50px;
width: 100px;
height: 35px;
border: 0;
outline: 0;
background: #fff;
font-weight: 800;
border-radius: 5px;
font-size: inherit;
font-family: inherit;
}
#wrap{
margin: 0 auto;
padding: 20px 15px;
width: 800px;
max-width: 85%;
background: #fff;
border-radius: 10px;
text-align: justify;
line-height: 1.3em;
font-family: inherit;
}
</style>
</head>
<body>
<div>
<button id="start">开始打字</button>
<button id="change">切换光标</button>
</div>
<pre id="wrap">
//打字机
function Typewriter(arg){
//options
var el = arg.el;
var cursorFlash = arg.cursorFlash;
var wordFlash = arg.wordFlash instanceof Array? arg.wordFlash : [0,400];
var m = wordFlash[0];
var n = wordFlash[1];
//创建过就不要再创建了
if(!el.typewriter){
el.typewriter = true;
}else{
return false;
}
//初始化
var text = el.innerHTML;
var len = 0;
var text_box = document.createElement('span');
var cursor_box = document.createElement('span');
cursor_box.innerHTML = '|';
el.innerHTML = '';
el.appendChild(text_box);
el.appendChild(cursor_box);
//光标闪闪
setInterval(function (){
if(cursor_box.show){
cursor_box.style.opacity = 1;
cursor_box.show = false;
}else{
cursor_box.style.opacity = 0;
cursor_box.show = true;
}
},cursorFlash);
//添加字符
function addWords(){
if(len<=text.length){
text_box.innerHTML = text.slice(0,len);
len++;
setTimeout(addWords,Math.random()*(n-m)+m);
}
}
//API
this.changeCursor = function (){
cursor_box.innerHTML = cursor_box.innerHTML == '|'? '_' : '|';
}
this.startWrite = function(){
if(!text_box.canadd){
text_box.canadd = true;
addWords();
}
}
}
var wrap = document.querySelector('#wrap');
var start = document.querySelector('#start');
var change = document.querySelector('#change');
//创建打字机
var tw = new Typewriter({
el: wrap,
cursorFlash: 400,
wordFlash: [0,400]
});
//开始
start.onclick = tw.startWrite;
//切换光标
change.onclick = tw.changeCursor;
</pre>
<script>
//打字机
function Typewriter(arg){
//options
var el = arg.el;
var cursorFlash = arg.cursorFlash;
var wordFlash = arg.wordFlash instanceof Array? arg.wordFlash : [0,400];
var m = wordFlash[0];
var n = wordFlash[1];
//创建过就不要再创建了
if(!el.typewriter){
el.typewriter = true;
}else{
return false;
}
//初始化
var text = el.innerHTML;
var len = 0;
var text_box = document.createElement('span');
text_box.id = 'typewriter-text';
var cursor_box = document.createElement('span');
cursor_box.id = 'typewriter-cursor';
cursor_box.innerHTML = '|';
el.innerHTML = '';
el.appendChild(text_box);
el.appendChild(cursor_box);
//光标闪闪
setInterval(function (){
if(cursor_box.show){
cursor_box.style.opacity = 1;
cursor_box.show = false;
}else{
cursor_box.style.opacity = 0;
cursor_box.show = true;
}
},cursorFlash);
//添加字符
function addWords(){
if(len<=text.length){
text_box.innerHTML = text.slice(0,len);
len++;
setTimeout(addWords,Math.random()*(n-m)+m);
}
}
//API
this.changeCursor = function (){
cursor_box.innerHTML = cursor_box.innerHTML == '|'? '_' : '|';
}
this.startWrite = function(){
if(!text_box.canadd){
text_box.canadd = true;
addWords();
}
}
}
var wrap = document.querySelector('#wrap');
var start = document.querySelector('#start');
var change = document.querySelector('#change');
//创建打字机
var tw = new Typewriter({
el: wrap,
cursorFlash: 400,
wordFlash: [0,400]
});
//开始
start.onclick = tw.startWrite;
//切换光标
change.onclick = tw.changeCursor;
</script>
</body>
</html>
Article Detail
JS打字机效果
打字机 body{ margin: 0; padding: 0 0 50px; background: #CDDC39; font-family: 'STXin...
简单自动打字机效果，打完清空从头开始