简易网页打卡页面.

这几天小组合作做一个公司管理系统,恰好把我分配在了打卡这部分,下图是我做的简易网页打卡页面图...

其实打卡页面是很简单的一部分,我的思路是依次是输入编号,点击打卡,获取后台数据,做对比,判断,存储

$('#but').click(function(){
                        if($('#inp').val()){
                            if($('#inp').val()==val.id){
                                var pau=' ';
                                var va=$('#inp').val();

                                var year=new Date().getFullYear(), month=1+new Date().getMonth(), day=new Date().getDate(), hour=new Date().getHours(), minute=new Date().getMinutes(), second=new Date().getSeconds();//上班时打卡时间

                                var year1=new Date().getFullYear(), month1=1+new Date().getMonth(), day1=new Date().getDate(), hour1=new Date().getHours(), minute1=new Date().getMinutes(), second1=new Date().getSeconds();//下班时打卡时间

                                var tim=year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
                                var tim1=year1+'/'+month1+'/'+day1+' '+hour1+':'+minute1+':'+second1;
                                if(idc=val.idCard){
                                    idc=val.idCard;
                                    if(!val.workTime){
                                        alert('打卡成功!  上班时间为:"'+tim+'"');//第一次打卡
                                        $('#inp').val(' ');
                                        pau='上班已打卡';
                                        da(va,pau,tim);
                                        console.log(val.daKa);
                                    }
                                    else if(!val.closingTime){
                                        alert('打卡成功!  下班时间为:"' + tim1 + '"');//第二次打卡
                                        $('#inp').val(' ');
                                        pau = '上下班已打卡';
                                        da(va, pau, '', tim1);
                                        console.log(val.daKa);
                                    }
                                    else if(val.workTime&&val.closingTime){
                                        alert('每天只能打卡两次!');//第三次打卡
                                        $('#inp').val(' ');
                                        console.log(val.daKa);
                                    }
                                    else{
                                        alert('打卡失败!');
                                        da(va);
                                        $('#inp').val(' ');
                                        console.log(val.daKa);
                                    }
                                }
                            }
                        }
                    })

(图中以val开头的变量都是数据库里获取的)我首先做的是是否有编号输入的判断,不管有没有都可以点击打卡,但是如果没有内容,那么是不会再执行的(如果编号错误也一样).我声明了一个变量pau赋值为字符空格,每次点击了打卡按钮就将输入的内容清空,主要是为了方便,因为打卡不只是一个人打卡,上一个人打了卡,如果不清空,下一个人打卡还需要删除前一个人输入的内容.我声明了一个叫va的变量,用来获取输入的内容,之前我也试过直接用$('#inp').val()将输入的内容传输到数据库,但是发现不行,于是添加了变量(应该是我代码有问题),year和year1分别是获取上班时间和下班时间,我是利用上班时间或下班时间是否为空判断的,如果上班时间为空,那么打卡成功的话就显示上班时间,如果上班时间有值,就执行下班的判断,如果下班时间也有值,再次点击就会提示每天只能打卡两次.

function da(id,pause,worktime,closingtime){
        $.ajax({
            url: 'http://192.168.0.172:80/daKaGet',
            data: {id:id,daKa:pause,workTime: worktime, closingTime: closingtime},
            dataType: 'jsonp',
            success: function (data){
                console.log(data);
            }
        })
    }

最后将获取的数据传输到数据库.

$('#but').click(function(){
       location.reload();
    });

写到这里我发现,每次点击打卡按钮弹出的都是相同的提示框,需要刷新一次,可能是因为数据没有传输到.于是我在点击事件里添加了一个刷新,这样便解决了传输问题.