你知不知道


2011-12-31

html模拟console效果

在jquery的基础上用js模拟console的表表闪烁与字符输入
目前不支持中文输入,有谁有更好的方法?
特殊功能键未支持,想支持直接在keypress方法里写就可以了,比如backspace键

<!DOCTYPE >
<html>
	<head>
		<title>~@viperasi</title>
		<meta charset="UTF-8" />
		<link href="css/css.css" rel="stylesheet" type="text/css" />
<style>
#inputbar{
	margin-left: 10px;
	position: absolute;
	bottom: 0px;
	height:20px;
}

.inputcursor{
	background-color: #000000;
}
</style>
		<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
		<script>
			var showInterval;
			$(function(){
				$(document).keypress(function(e){
					var inputbarText = $("#inputbar").html();
					var inputText = String.fromCharCode(e.which);
					if(inputbarText.indexOf("<span")!=-1){
						inputbarText = inputbarText.substring(0,inputbarText.indexOf("<span"));
						$("#inputbar span").before(inputText);
					}else{
						$("#inputbar").append(inputText);
					}
				});
				showInterval = setInterval("showInputCursor()",500);
			});

			function showInputCursor(){
				$("#inputbar").append("<span class='inputcursor'>&nbsp;</span>");
				clearInterval(showInterval);
				setTimeout(hideInputCursor,500);
			}

			function hideInputCursor(){
				$("#inputbar span").remove();
				showInterval = setInterval("showInputCursor()",1000);
			}
		</script>
	</head>
	<body>
		<div id="inputbar">viperasi.github.com $</div>
	</body>
</html>


Leave a Reply

Your email address will not be published. Required fields are marked *

*