console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>哲途成长</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
(function (doc, win, pwidth, prem) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = clientWidth / pwidth * prem + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window, 1920, 100);
</script>
<header class="">
<img class="logo" src="img/logo.png" />
<div class="slogn">
<h3>C++信息学课程</h3>
<p> >>> CSP非专业级软件能量认证</p>
<p> >>> 课程及在线编程系统</p>
</div>
</header>
<div class="container">
<div class="video" id="videoBox">
<div id="videoList"></div>
<div id="nodata" style="display: none;">
<h2 class="list-title">课程列表</h2>
<div class="error-box" style="display: block;"><img src="img/error.png" />暂时还没有课程哦</div>
</div>
<div id="pullup" class="error-box"><img src="img/pullup.png" />上拉显示更多</div>
<div id="nomore" class="error-box"><img class="mR3" src="img/error.png" />没有更多数据了</div>
</div>
<div class="code">
<ace-playground></ace-playground>
<div id="ace-host">
<div id="edit-code">
<h2 class="list-title">输入C++语言程序</h2>
<div id="ace-code"></div>
</div>
<div id="run-code">
<div id="ace-buttons">
<button id="compileBtn" onclick="compile()"><img src="img/run.png" />运行</button>
<button class="img-btn btn-codefull" onclick="codeFull(true)"><img src="img/full.png" /></button>
<button class="img-btn btn-esccodefull" onclick="codeFull(false)" style="display: none;"><img src="img/escfull.png" /></button>
</div>
<h2 class="list-title">运行结果</h2>
<div id="ace-preview"></div>
<p class="ace-preview-text">CPU时间：<span id="cpuTime"></span>秒 占用内存：<span id="memory"></span>KB</p>
</div>
</div>
</div>
</div>
<div id="footer" class="footer">
Copyright © 2020 Zenitour lnc All Rights Reserved 版权所有-哲途教育
<a href="http://beian.miit.gov.cn/" target="_blank">渝ICP备19012400号-1</a>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50010302002798" target="_blank"><img src="img/beian.jpg" />渝公网安备 50010302002798号</a>
</div>
<script src="https://www.zenitour.com/mini/lib/jquery-2.1.1.min.js"></script>
<script src="https://www.zenitour.com/mini/plugins/layer/layer.min.js"></script>
<script src="./js/ace.js"></script>
<script src="https://www.zenitour.com/mini/js/service/HttpService.js"></script>
<script>
var codeEditor = null,
previewEditor = null,
ajax = new HttpService(),
loadEnd = true,
pageSize = 5;
$(function() {
loadVideo(1);
$('.container').css({
height: window.innerHeight - $('header').outerHeight() - $('#footer').outerHeight()
})
setTimeout(function(){
$('.container').css({
height: window.innerHeight - $('header').outerHeight() - $('#footer').outerHeight()
})
},50)
codeEditor = ace.edit(document.getElementById("ace-code"), {
theme: "ace/theme/xcode",
mode: "ace/mode/c_cpp",
value: '#include <iostream>\nusing namespace std;\n\nint main() {\nint x=10;\nint y=25;\nint z=x+y;\ncout<<"Sum of x+y = " << z;\n}',
autoScrollEditorIntoView: true
});
codeEditor.renderer.attachToShadowRoot();
previewEditor = ace.edit(document.getElementById("ace-preview"), {
theme: "ace/theme/twilight",
mode: "ace/mode/c_cpp",
value: "",
autoScrollEditorIntoView: true,
readOnly: true,
showLineNumbers: false,
showGutter: false,
});
$('#videoBox').scroll(function(e) {
var nopage = $(this).data('nopage'),
thisPage = $(this).data('thisPage'),
totalPage = $(this).data('totalPage'),
viewH = $(this).height(),
contentH = $('#videoList').outerHeight(),
scrollTop = $(this).scrollTop();
if (!loadEnd) return;
if (nopage) return;
if (scrollTop / (contentH - viewH) >= 0.95) {
thisPage++;
if (thisPage <= totalPage) {
loadVideo(thisPage);
}
}
});
});
function compile() {
layer.load(1);
ajax.post("compile/v1/excute/cpp17", {
script: codeEditor.getValue()
}, function(data) {
if (data.code == "1001") {
previewEditor.setValue(data.result.output);
$('.ace-preview-text').show();
$('#cpuTime').text(data.result.cpuTime);
$('#memory').text(data.result.memory);
} else {
layer.msg(data.result);
}
layer.closeAll();
});
}
function codeFull(full){
if(full){
$('.container,header').addClass('code-full');
$('.btn-codefull').hide();
$('.btn-esccodefull').show();
}else{
$('.container,header').removeClass('code-full');
$('.btn-codefull').show();
$('.btn-esccodefull').hide();
}
}
function loadVideo(pageNo) {
layer.load(1);
loadEnd = false;
ajax.post("project/list", {
pageNo: pageNo,
pageSize: pageSize
}, function(data) {
pageNo == 1 ? ($('#videoList').html(''), $('#pullup').hide(), $('#nomore').hide()) : '';
$('#videoBox').data('thisPage', pageNo);
loadEnd = true;
layer.closeAll();
var res = data.result;
if (data.code == "1001" && res.list && res.list.length > 0) {
res.list.map(function(item, i){
$('#videoList').append(
'<h2 class="list-title">' + item.name +
'</h2>'+
'<div class="list-video">'+
'<video src="' + item.vedioUrl +
'" width="100%" controls="controls">'+
'</video>'+
'</div>');
});
var totalPage = Math.ceil(res.total / pageSize);
$('#videoBox').data('totalPage', totalPage);
pageNo < totalPage ? ($('#videoBox').data('nopage', false), $('#pullup').show(), $('#nomore').hide()) : ($(
'#videoBox').data('nopage', true), $('#pullup').hide(), $('#nomore').show());
} else {
$('#nodata').show();
}
});
}
</script>
</body>
</html>