结对编程

结对项目

参与者201421122090丘雨晨和201421122083黄鸿伟

码云地址

需求分析(完成其中任意两项即可)

  1. 记录用户的对错总数,程序退出再启动的时候,能把以前的对错数量保存并在此基础上增量计算(文件导入或者是用户根据历史记录选择?)。
  2. 有计时功能,能显示用户开始答题后的消耗时间(实时显示或者退出时显示)。
  3. 界面支持中文简体/中文繁体/英语,用户可以选择一种。

功能设计

  1. 计时与显示时间

在点击生成题目按钮后即开始计时,在函数中添加计时器timer,调用setInterval函数对每1000毫秒进行计时器内容改变。

  1. 简繁英语言切换

在屏幕中添加简繁英按钮,点击后触发点击事件,对文本域内容进行切换。

命名规范

编码规范
(对项目中可能出现的编码状况进行规范,对目前尚未使用到的日后再进行添加)
一、基本约定
1.程序编写采用驼峰命名法+英文简写命名+动词名词命名,可以显示变量内容,方法作用
如:
var calcResult ,var timer
2.对每个方法前进行方法说明注释,对于方法中的形参命名同上
如:

// 随机数据(分数和整数)
var ranNum = function () {
    //...
}

3.在变量声明区提前声明变量,在方法中声明的变量最好不使用i,j,x,y,z,使用准确计数名称来反映变量作用
如:

//变量声明区
var timer = document.getElementById("timer")
//...
//方法实现区
var ranData = function(){
    var data;
}

4.注释规范
注释中需要将方法作用写出,对于晦涩难懂的实现细节需要详细说明

5.对显示出的标签和文字使用简体中文展示,编码字符集使用UTF-8

二、使用模板
1.css模板

<style>
    body{
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: skyblue;
    }
    #main{
        margin: 20px auto;
        width: 800px;
        text-align: center;
        background-color: white;
    }
    li{
        width: 100%;
        height: 20px;
        list-style: none;
    }
    #myform{
        margin: 20px auto;  
        width: 80%;
        text-align: left;
        text-align: center;
        /*background-color: skyblue;*/
    }
    label{
        font-size: 14px;
    }
    #calm{
        text-align: left;
    }
    li{
        width: 100%;
        height: 25px;
        margin: 2px 0;
        line-height: 25px;
        padding: 00px;
        padding-left: 20PX;
    }
    .name{
        position: absolute;
        /*left: 700px;*/
        /*display: inline-block;*/
        margin-top: 2.5px;
        width: 85px;
        height: 20px;
        /*border: 0;*/
        line-height: 20px;
        padding: 0;
        box-sizing: border-box;
    }
    .liSpan{
        display: inline-block;
        width: 120px;
        height: 20px;
        /*background-color: white;*/
        text-indent: 2em;
        line-height: 20px;
    }
    .liSpan1{
        display: inline-block;
        width: 240px;
        height: 20px;
        line-height: 20px;
        /*background-color: red;*/
    }
    .span{
        display: inline-block;
        width: 100px;
        margin-left: 100px;
        text-indent: 3em;
    }
    #button2{
        margin: 10px;
        display: inline-block;
        width: 95px;
    }
    #grade{
        height: 35px;
    }
    #timetable{
        position: absolute;
        top: 20px;
        left: 40px;
    }
</style>
  1. 主要代码说明

js代码

var timetable=document.getElementById("timetable");
var time =document.getElementById("time");
var timer =document.getElementById("timer");
tim = setInterval(function() {
    ti++;
    timer.innerHTML = ti + "s";
}, 1000);
time.innerHTML = "您的用时:"

html代码

<div id="timetable">
    <span id="time">点击确认后开始计时</span>
    <br>
    <span id="timer"></span>
</div>
  1. 语言切换
    js代码
    var intel = ["请输入你要的范围(默认10)","請輸入您要的範圍(默認10)","Please enter your range (default 10)"];
        intel1 = ["请输入您要的算式数(默认10)","請輸入您要的算式數(默認10)","Please enter the number of calculations you want (default 10)"];
        intel2 = ["确认","確認","Confirm"];
        intel3 = ["提交","提交", "Submit"];
        intel4 = ["正确题目数为:","正確題目數為:","The correct number of items is:"];
        intel5 = ["错误题目数为:","錯誤題目數為:","The wrong number of items is:"];

    var btns = document.querySelectorAll(".btn");
    for(var i = 0;i < btns.length;i++){
        console.log(111111);
        var btn = btns[i];                  //获取i的div标签元素
        btn.onclick=function(nm){
            return function(){
                label1.innerHTML = intel[nm];
                label2.innerHTML = intel1[nm];
                button1.innerHTML = intel2[nm];
                button2.innerHTML = intel3[nm];
                contentR.innerHTML = intel4[nm];
                contentW.innerHTML = intel5[nm];
            }
        }(i);
    }

html代码

     <div id="cLanguage">
        <button class="btn">简体中文</button>
        <button class="btn">繁体中文</button>
        <button class="btn">英文</button>
    </div>

程序运行

计时器正在左上角
简体中文
简体中文
繁体中文
繁体中文
英语
英语

思维导图

PSP

PSP2.1 Personal Software Process Stages Time Senior Student Time
Planning 计划 20 20
Estimate 估计这个任务需要多少时间 5 5
Development 开发 500 700
Analysis 需求分析 (包括学习新技术) 30 10
Design Spec 生成设计文档 5 1
Design Review 设计复审 2 1
Coding Standard 代码规范 1 1
Design 具体设计 20 30
Coding 具体编码 400 470
Code Review 代码复审 10 8
Test 测试(自我测试,修改代码,提交修改) 60 150
Reporting 报告 20 60
测试报告 12 45
计算工作量 3 5
并提出过程改进计划 8 10

小结感受

在团队中交流,改变了我之前总是一个人自己做自己的方式,在交流过程中,发现了自己之前没有想到、没有注意到的东西。js实现这次的功能比较方便,所以没有明显的感受到效率的增加,但是如果有更多的功能需要实现的话,那么结对编程这样的方式将会带来很高的效率。

队友评价

雨晨的逻辑很强,编程能力也很强,虽然之前没有写过js代码,但是很快就上手了。很有耐心,在问他关于括号如何去掉的问题上,他给我讲了许久。写的字有点丑,但还是能很好的给我讲解。

合作时刻

posted @ 2017-10-22 15:00  被水淹死的大白鲨  阅读(207)  评论(0编辑  收藏  举报