持續(xù)兩周的課程設(shè)計結(jié)束了，本次已經(jīng)是我們小組第三次合作了，相比以前大家都進(jìn)步了很多，所以合作還是很順利的。我們這次做的是一個OJ（Online Judge在線檢測代碼的平臺）。我想作為一個喜愛編程或者學(xué)習(xí)編程的人或多或少都有接觸過算法，本人曾經(jīng)也刷過一些算法，可是相對組長的題量簡直是九牛一毛，我想一個對于算法這么有研究的大神，肯定特別想做個自己的OJ，這是一種情懷，最近覺得好像學(xué)習(xí)計算機(jī)的人都特別有情懷。廢話不多說了，我是寫前端的，所以后臺就讓專業(yè)的人說，我就總結(jié)下自己的前端知識。

一. 代碼編輯框

我想大家最在乎的應(yīng)該就是代碼編輯框應(yīng)該怎么實現(xiàn)，當(dāng)然這不是我自己寫的，畢竟只有兩周的時間，造輪子搞出來個這個肯定是不可能的，所以就去github找了個開源的代碼編輯器，然后搜了下用過的人還是挺多的。支持多種語言，像C/C++，Java等當(dāng)然不在話下，這是鏈接：https://github.com/ajaxorg/ace
需要的直接下載就行，下來就簡單的說下怎么用吧：

html部分代碼：

<div class="code">
    <form role="form">
        <div class="editor-header">
            <select class="form-control form-control-plus"onchange="choiceLang(this)">
                <option value="ace/mode/c_cpp">語言</option>
                <option value="ace/mode/c_cpp" selected="selected">C/C++語言</option>
                <option value="ace/mode/java">JAVA語言</option>
                <option value="ace/mode/javascript">JavaScript語言</option>
            </select>
            <select class="form-control form-control-plus" onchange="choiceBack(this)">
                <option>環(huán)境配色</option>
                <option value="ace/theme/xcode" selected="selected">高亮</option>
                <option value="ace/theme/monokai">暗色</option>
            </select>
            <select class="form-control form-control-plus" onchange="choiceSJ(this)">
                <option value="4">代碼縮進(jìn)</option>
                <option>2</option>
                <option selected="selected">4</option>
                <option>8</option>
            </select>
            <div class="flex-btn" onclick="expand('spanid')">
            <span class="glyphicon glyphicon-resize-full" id="spanid"></span>
            </div>
        </div>
    </form>
    <pre id="editor" style="height:400px"></pre> 
    <button class="btn btn-primary" onclick="submit()">提交</button>
</div>

form表單中的下拉框是用來選擇語言，編輯器背景，以及代碼的縮進(jìn)的，將下拉框中的value值設(shè)為指定的值，傳入對應(yīng)的接口就可以了。
下面來簡單的講一下所要用到的接口：

初始化：將語言默認(rèn)為C/C++，背景默認(rèn)為高亮，縮進(jìn)默認(rèn)為4

var editor = ace.edit("editor");  //該值為編輯框的id值
window.onload = (function () {
    editor.setTheme("ace/theme/xcode"); //設(shè)置背景色為高亮
    editor.session.setMode("ace/mode/c_cpp");  //設(shè)置默認(rèn)語言為c/c++
    editor.getSession().setTabSize(4);  //設(shè)置默認(rèn)縮進(jìn)大小
})();

更改語言，背景色，縮進(jìn)大小，value為下拉框的值：

 //設(shè)置語言
function choiceLang(select){
    editor.session.setMode(select.value);
}
//設(shè)置背景色
function choiceBack(select){
    editor.setTheme(select.value); 
}
//設(shè)置縮進(jìn)大小
function choiceSJ(select){
    editor.getSession().setTabSize(select.value);
}

獲得所要提交的代碼：

function submit(){
    var code  = editor.getValue();
}

放幾張圖看下效果：

這里寫圖片描述

這里寫圖片描述

二. 動態(tài)更改代碼運行狀態(tài)

先上圖：

這里寫圖片描述

這里用到了一個加載轉(zhuǎn)圈的插件，下載鏈接：https://github.com/fgnass/spin.js

//動畫
window.onload = function(){
    //加載轉(zhuǎn)圈，插件提供的配置接口
    var opts = {
          lines: 13, //小長條的數(shù)量
          length: 13, //小長條的長度
          width: 3, //小長條的寬度
          radius: 15, //內(nèi)環(huán)的半徑長
          corners: 1, // Corner roundness (0..1)
          rotate: 0, //旋轉(zhuǎn)角度
          direction: 1, //1：順時針方向 -1：逆時針方向
          color: '#000', //顏色
          speed: 1, //每秒轉(zhuǎn)多少圈
          trail: 60, //余暉效果百分比
          shadow: false, //渲染陰影
          hwaccel: false, //加速
          className: 'spinner', //類名spinner
          zIndex: 2e9, //顯示在最頂層
          top: 'auto', //相對父元素的top
          left: 'auto' //相對父元素的left ，默認(rèn)情況spinner是顯示于父元素居中位置

        };
        //foo為動畫的載體
        var target = document.getElementById('foo');
        //實例化之后開始轉(zhuǎn)圈
        var spinner = new Spinner(opts).spin(target);

    //進(jìn)度條的變化
    var arr = ['正在上傳Uploading','等待測試Pending','正在編譯Compiling','正在評測Running','測試通過Accepted'];
    var colors = ['black', '#bbb', '#FC8A15', '#4FC1E9', 'rgb(39, 194, 76)'];
    var progress = document.getElementById('progress');
    var status = document.getElementById('status');
    for (var i = 0; i < 5; i++){
        (function (j){
            setTimeout(function (){
                progress.style.width = 20 * (j + 1) + '%';
                progress.innerHTML = 20 * (j + 1) + '%';
                status.innerHTML = arr[j];
                status.style.color = colors[j];
            }, 1000 * j);
        })(i);
    }

    //5s后停止旋轉(zhuǎn)
    setTimeout(function (){
        spinner.stop();  //轉(zhuǎn)圈停止
    }, 5000);
} 

這里只是一個模擬，具體的改變要根據(jù)后臺傳來的狀態(tài)而定。

三. 提交代碼記錄的餅狀圖分布

運行截圖：

這里寫圖片描述

這里用了一個很有名的插件，chart.js，可以引用cdn，也可以去github下載，cdn：https://cdn.bootcss.com/Chart.js/2.6.0/Chart.min.js
github下載鏈接：https://github.com/chartjs/Chart.js

代碼示例：

var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["submit-failed", "pending", "judging", "accepted", "ComplieError", "RuntimeError"],
        datasets: [{
            label: '# of Votes',
            data: [12, 8, 3, 5, 2, 3],
            backgroundColor: [
                '#BE3144',
                '#bbb',
                '#4797B1',
                'rgb(39, 194, 76)',
                '#FC8A15',
                '#FF847C'
            ],
            borderWidth: 1
        }]
    },
    options: {
        
    }
});

具體的選項運行一下就很明白了，建議大家去看英文文檔，很多中文的文檔都過時了，不然肯定不能正確運行，英文文檔鏈接：http://www.chartjs.org/

以上是自己在項目中所用到的插件，大大減小了代碼的編寫難度，這也是第一次在項目中用別人寫好的插件，確實寫得很棒，向?qū)懖寮拇笈Ｖ戮?。在上面的陳述中都附有鏈接，希望對有需要的同學(xué)會有幫助，畢竟尋找更改還是很費功夫的。

備注：這是一個完整的項目，本人負(fù)責(zé)的是前端界面部分，后臺的業(yè)務(wù)邏輯，以及判題部分都很全，另外項目已經(jīng)上傳至github，歡迎大家fork和start。項目鏈接：https://github.com/shiyi1996/OJ