关于之前说的MUD游戏的LOG框
先把图放上,就是中间有蓝字的那个框https://ftp.bmp.ovh/imgs/2021/05/ae49eba3f96d3ef1.jpg
解决方案就类似这种,先制造一个容器,然后在innerHTML中增加行数.
这里最好的是用textarea,比较符合HTML5的规范(多行文本输入).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
function printLog(){
pPrint=document.getElementById("Pprint");
old = pPrint.innerHTML
pPrint.innerHTML = old + "wwww" + "<br />";
}
</script>
<style>
#Pprint{
width: 15rem;
height: 30rem;
overflow-y: auto;
}
</style>
</head>
<body>
<p id="Pprint">iiii</p>
<button onclick="printLog()">打印</button>
</body>
</html> 出现了一个新问题： 如果用户在线时间过长，这么搞终究会导致溢出。现在的想法是内置一个计数器，到计数器上限就删去最前面的一些行，那这个可能要用到队列结构。。。我再看看吧 解决了
首先不能用textarea,功能限制太死,还是得请div出山
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" charset="utf-8"></script>
<script src="../js/less.min.js" charset="UTF-8"></script>
<script src="../js/vue.js" charset="UTF-8"></script>
<script src="../js/anime.js" charset="UTF-8"></script>
<title>滚动消息框</title>
<!-- CSS -->
<style>
#logBox{
width: 10rem;
height: 40rem;
resize: none;
background-color: aliceblue;
padding: 0.1875rem;
border: 0.0625rem solid #a0b3d6;
word-wrap: break-word;
overflow-y: auto;
}
.important{
color: #00BFFF;
}
</style>
<!-- JS -->
<script>
window.onload = function(){ }
var printLog = function(text="www",maxLength=20){
var addin = document.createElement("span");
addin.innerHTML = text + "<br />";
addin.className = "normal";
var logBox = document.getElementById("logBox");
logBox.appendChild(addin);
if (logBox.children.length > logBox.maxLength){
logBox.removeChild(logBox.firstElementChild);
}
}
var clearLog = function(){
var logBox = document.getElementById("logBox");
while(logBox.hasChildNodes()){
logBox.removeChild(logBox.lastElementChild);
}
logBox.setAttribute("placeholder","已清空!");
}
</script>
</head>
<body>
<div id="logBox"></div>
<button onclick="printLog()">打印</button>
<button onclick="clearLog()">清空</button>
</body>
</html>
原生JS,不用看上面引入的,一个都没用到,就占个坑
页:
[1]