在最近这几天，由于我下一步主要工作负责SDUVJ前端的开发以及前段和前端与后台之间的通信，所以在通读对Django框架有了足够的了解之后，主要集中在进一步阅读SDUOJ的源码，希望能够从中借鉴OlineJudge的相关开发经验。

Contest前端####

{% extends "base.html" %}

{% block title %}{{ contest.name }}{% endblock %}

{% block navbar %}{% include "include/navbar-contest.html" %}{% endblock %}

{% block header %}
    <h1 class="text-center text-info">{{ contest.name }}</h1>
    <ul class="text-center" style="list-style:none;">
        <li>Start Time: {{ contest.start_time }}   Duration Time: {{ contest.duration_time }}</li>
    <li id="current">Current Time: 1970-01-01 00:00:00</li>
    </ul>

<div id="current2" style="width: 0%; text-align: right; float; left;"><span></span></div>
<div class="progress">
    <div class="progress-bar progress-bar-success " role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" id ="progress" style="width:0%">
    </div>
</div>
<script type="text/javascript">
function getServerTime(){  
//     return new Date()
     return new Date($.ajax({async: false}).getResponseHeader("Date"));
//     var xmlHttp = false;  
//     try {  
//       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
//     } catch (e) {  
//       try {  
//          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
//       } catch (e2) {  
//          xmlHttp = false;  
//       }  
//     }  
//     if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {  
//       xmlHttp = new XMLHttpRequest();  
//     }  
//     xmlHttp.open("GET", window.location.href.toString(), false);  
//     xmlHttp.setRequestHeader("Range", "bytes=-1");  
//     xmlHttp.send(null);  
//     var severtime=new Date(xmlHttp.getResponseHeader("Date"));  
//     return severtime  
}  
    var start;
    var duration;
    var current;
    var servertime;
    $(document).ready(function () {
         $.ajax({
             type: "post",
             url: "/contest/" + {{ contest.id }} + "/time/",
             dataType: "json",
             success: function(data){
                start=new Date(data.start);
                duration=data.duration;
                syncServerTime();
                setInterval(function(){syncServerTime();},1000*60);
                setInterval(function(){refreshtime(start);},1000);
             }
         });

    });

    function str_pad_left(string,pad,length) {
        return (new Array(length+1).join(pad)+string).slice(-length);
    }

    function secondsToTime(secs)
    {
        var hours = Math.floor(secs / (60 * 60));
        var divisor_for_minutes = secs % (60 * 60);
        var minutes = Math.floor(divisor_for_minutes / 60);
        var divisor_for_seconds = divisor_for_minutes % 60;
        var seconds = Math.ceil(divisor_for_seconds);
        return hours + ":" + str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2);;
    }
    function syncServerTime(){
        servertime=getServerTime();
        current=servertime;
    }
    function refreshtime(start){
        var tmpTime = current.getTime();
        current.setTime(tmpTime+1000);
        var elapsed;
        elapsed=(current-start.getTime())/1000;
        var cutdown;
        cutdown=duration-elapsed;
        var elapsedrate;
        elapsedrate2=(elapsed/duration+0.01)*100+"%"
        elapsedrate=(elapsed/duration)*100+"%";
        var cutdowntime= secondsToTime(cutdown);
        $("#current").html("Current Time: "+current);
        if(elapsed>duration){
        $("#current2").html("<span></span>");
            $("#current2").css("width", "101%");
            $("#progress").css("width", "100%");
        } else if(elapsed<0){
            $("#current2").html("<span>-"+(secondsToTime(-elapsed))+"</span>");
            $("#current2").css("width", "1%");
            $("#progress").css("width", "0%");
        } else {
            $("#current2").html("<span>"+cutdowntime+"</span>");
            $("#current2").css("width", elapsedrate2);
            $("#progress").css("width", elapsedrate);
        } 
        if(elapsed==0){
            parent.location.reload();
        }
        



    }

</script>
{% endblock %}
{% block content %}
    <div class="tabbable" id="contest_content">
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#panel-overview" id="overview">Overview</a>
            </li>
            <li id="Contest_Problem">
                <a data-toggle="tab" href="#panel-problem" id="problem_detail">Problem</a>
            </li>
            <li>
                <a data-toggle="tab" href="#panel-status" id="get_status">Status</a>
            </li>
            <li>
                <a data-toggle="tab" href="#panel-submit">Submit</a>
            </li>
            <li>
                <a data-toggle="tab" href="#panel-rank" id="get_rank">Rank</a>
            </li>
            <li>
                <a data-toggle="tab" href="#panel-clar" id="get_rank">Clarification</a>
            </li>

        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="panel-overview">
                {% include "contest/contest_overview.html" %}
            </div>
            <div class="tab-pane" id="panel-problem">
                {% include "contest/contest_problem.html" %}
            </div>
            <div class="tab-pane" id="panel-status">
                {% include "contest/contest_status.html" %}
            </div>
            <div class="tab-pane" id="panel-submit">
                {% include "contest/contest_submit.html" %}
            </div>
            <div class="tab-pane" id="panel-rank">
                {% include "contest/contest_rank.html" %}
            </div>
            <div class="tab-clar" id="panel-clar">
                {% include "contest/contest_clar.html" %}
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var start;
        var duration;
        $(document).ready(function () {
        $.ajax({
            type: "post",
            url: "/contest/" + {{ contest.id }} + "/time/",
            dataType: "json",
            success: function(data){
            start=new Date(data.start);
            duration=data.duration;
//              setInterval(function(){refreshtime(start);},1000);
            }
        });
        $('#get_status').click(function () {
//                alert("Hello!");
            contest_id = {{contest.id}};
            $.ajax({
                type: 'post',
                url: "/contest/" + contest_id + "/status/",
                success: function (responseData) {
                    $('#panel-status').html(responseData);
        //MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
                }
            })
        })
        $('#get_rank').click(function(){
                refreshRankList();
        })
        $('#submit_button').click(function(){
            var current=getServerTime();
            var elapsed;
            elapsed=(current-start.getTime())/1000;
            if(elapsed>duration){
                alert("Contest is Over!");
                return false;
            }else{
                $('#submit_form').ajaxForm(
                    $.ajax({
                        type: 'post',
                        url: "/contest/" + {{ contest.id }} + "/status/",
                        success: function (responseData) {
                            $('#panel-status').html(responseData);
                            $('#overview').tab('show');
                        }
                    })
                )
            }
        })
            $('#overview').tab('show');
        })
    </script>
{% endblock %}

Contest问题显示####

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    processEscapes: true,
    skipTags: ['script', 'noscript', 'style', 'textarea', 'code']
    },
    messageStyle: "none",
    "HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] }
});
</script>

<style type="text/css">
pre{
    word-break: keep-all;
    word-wrap: break-word;
    white-space: pre-wrap;
} 
</style>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

<div class="text-center">
    <h1 class="text-success">{{ problem.title }}</h1>
    <ul class="list-inline">
        <li>Time Limit: {{ problem.limit_time }}s</li>
          
        <li>Memory Limit: {{ problem.limit_memory|filesizeformat }}</li>
    </ul>
</div>

<h3 class="text-info" >Description</h3>
{% autoescape off %}
<pre>{{ problem.content }}</pre>

<h3 class="text-info" >Input</h3>
<pre>{{ problem.input }}</pre>

<h3 class="text-info" >Output</h3>
<pre>{{ problem.output }}</pre>

{% endautoescape %}

{% if problem.samples %}
    {% for s in problem.samples %}
        <h3 class="text-info" >Sample Input {{ forloop.counter }}</h3>
        <pre>{{ s.input }}</pre>

        <h3 class="text-info" >Sample Output {{ forloop.counter }}</h3>
        <pre>{{ s.output }}</pre>
    {% endfor %}
{% endif %}

{% autoescape off %}
<h3 class="text-info" >Note</h3>
<pre>{{ problem.note }}</pre>

<h3 class="text-info" >Source</h3>
<pre>{{ problem.source }}</pre>
{% endautoescape %}