如图,我想实现以下界面:
但是使用以下代码会出现很多问题:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#input {
height: 50%;
width: 98%;
border: 1px solid #ccc;
overflow: auto;
background-color: white;
position: absolute;
top: 0px;
left: 2%;
}
#line {
height: 50%;
width: 2%;
size: 60px;
background-color: #f6f6f6;
position: absolute;
top: 0px;
left: 1px;
border: 1px solid #ccc;
overflow: auto;
text-align: right;
}
#buttons {
position: absolute;
top: 53%;
left: 0px;
background-color: #f6f6f6;
line-height: 50px;
}
.button {
height: 40px;
width: 150px;
border: 1px solid #45d93c;
color: black;
background-color: #f6f6f6;
font-size: 16px;
}
#output {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
position: absolute;
top: 53%;
left: 15%;
border: 2px solid #ccc;
background-color: #fefefe;
height: 28%;
width: 85%;
}
</style>
</head>
<body>
<pre id="line">1</pre>
<pre id='input' contenteditable='true'>//main.js</pre>
<div id="buttons">
<button onclick='execute()' class='button'>运行 ›</button>
<br/>
<button onclick='cler()' class='button'>清空</button>
<br/>
<button onclick="location.reload()" class='button'>刷新</button>
<br/>
<button class="button" click-type="copycode" data-clipboard-target="#output">复制结果</button>
</div>
<div id='output'></div>
<script>
function sam(str, n) {
const parts = str.split('\n');
return parts.slice(0, -n);
}
document.getElementById("input").addEventListener('keydown', function(event){
if(event.key==="Enter" || event.key==="Backspace"){
var a=document.getElementById('line').innerHTML.split('\n').length;
if(event.key==="Enter"){
document.getElementById("line").innerHTML+='\n'+(a+1);
} else if((document.getElementById('line').innerHTML.split('\n').length)>(document.getElementById('input').innerHTML.split('\n').length)){
var c=document.getElementById('line').innerHTML;
document.getElementById('line').innerHTML=c.substring(0, (c.length-1-(String(a).length)));
}
}
});
var module1 = document.getElementById('input'),module2 = document.getElementById('line');
module1.addEventListener('scroll', function() {
module2.scrollTop = module1.scrollTop;
});
module2.addEventListener('scroll', function() {
module1.scrollTop = module2.scrollTop;
});
function execute(){
document.getElementById('output').innerHTML = '';
try {eval("const console={'log':function(ve){document.getElementById('output').innerHTML = document.getElementById('output').innerHTML+'> '+ve+'<br/>'}};"+document.getElementById('input').innerHTML);}catch(e){document.getElementById('output').innerHTML = 'Error:'+e.message};
}
function cler(){
document.getElementById('output').innerHTML = '';
}
</script>
</body>
</html>
)