JS打字机效果

正文 4460字数 260,046阅读
<!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;


	<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>
Run code
Cut to clipboard
lizhenqiu blog

相关日志

有过 1 条评论 »

留下評論
