关于之前说的MUD游戏的LOG框

feihu233 · 发表于 2021-5-30 08:33:14

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

先把图放上,就是中间有蓝字的那个框

登录/注册后可看大图

解决方案就类似这种,先制造一个容器,然后在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>

复制代码

feihu233 · 发表于 2021-5-30 08:42:34

出现了一个新问题：如果用户在线时间过长，这么搞终究会导致溢出。现在的想法是内置一个计数器，到计数器上限就删去最前面的一些行，那这个可能要用到队列结构。。。我再看看吧

feihu233 · 发表于 2021-6-2 13:52:54

解决了
首先不能用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>

<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>

<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,不用看上面引入的,一个都没用到,就占个坑

账号		自动登录	找回密码
密码			立即注册

[技术交流] 关于之前说的MUD游戏的LOG框

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块