Javascript秒表到MySQL数据库

时间:2011-04-19 00:09:04

标签: php javascript mysql countdown stopwatch

所以我需要做的是在我创建的html页面上有一个开始时间和一个结束时间。这样技术人员可以在他开始工作时开始计时,当他结束那天他会停止并计算经过的总时间。现在我发现了一堆代码可以做到这一点,但我需要更进一步。我需要花时间过去并通过我的PHP文件POST它,以便它保存在我们的MySQL数据库中创建的表中。

<script type="text/javascript">
var duration = 0;

// Javascript to compute elapsed time between "Start" and "Finish" button clicks
function timestamp_class(this_current_time, this_start_time, this_end_time, this_time_difference) { 
        this.this_current_time = this_current_time;
        this.this_start_time = this_start_time;
        this.this_end_time = this_end_time;
        this.this_time_difference = this_time_difference;
        this.GetCurrentTime = GetCurrentTime;
        this.StartTiming = StartTiming;
        this.EndTiming = EndTiming;
    }

    //Get current time from date timestamp
    function GetCurrentTime() {
    var my_current_timestamp;
        my_current_timestamp = new Date();              //stamp current date & time
        return my_current_timestamp.getTime();
        }

    //Stamp current time as start time and reset display textbox
    function StartTiming() {
        this.this_start_time = GetCurrentTime();        //stamp current time
        document.TimeDisplayForm.TimeDisplayBox.value = 0;      //init textbox display to zero
        }

    //Stamp current time as stop time, compute elapsed time difference and display in textbox
    function EndTiming() {
        this.this_end_time = GetCurrentTime();          //stamp current time
        this.this_time_difference = (this.this_end_time - this.this_start_time) / 1000; //compute elapsed time
        document.TimeDisplayForm.TimeDisplayBox.value = this.this_time_difference;      //set elapsed time in display box
        }

var time_object = new timestamp_class(0, 0, 0, 0);  //create new time object and initialize it

//-->

function assignDuration()
{
   document.stopform.duration.value = duration;
}
</script>

    <form>
        <input type="button" value="Start" onClick="time_object.StartTiming()"; name="StartButton">
    </form>
    <form>
        <input type="button" value="Finish" onClick="time_object.EndTiming()"; name="EndButton">
    </form>

<form name="stopform" action="process-form.php" method="POST">
   <input type="hidden" name="duration" value="0"/>
   <input type="submit" name="dostop" onClick="assignDuration()" value="Stop"/>
</form>

提前致谢!

1 个答案:

答案 0 :(得分:1)

只要您依赖于启用JavaScript,就可以创建隐藏的表单元素,并在用户单击“停止”时为其分配计算的持续时间。这本身应该是一个提交按钮。

所以你的Javascript会是这样的:

<script type="text/javascript">
var duration = 0;
...YOUR TIME CALCULATION CODE...

function assignDuration()
{
   document.stopform.duration.value = duration;
}

</script>

您的HTML也会:

<form name="stopform" action="process-stop.php" method="POST">
   <input type="hidden" name="duration" value="0"/>
   <input type="submit" name="dostop" onClick="assignDuration()" value="Stop"/>
</form>

您还需要一个处理持续时间值的PHP文件:

$duration = $_POST['duration'];
mysql_query('INSERT INTO MyTable (duration, technician) VALUES ('.$duration.', '.$technicianId.')');

上述代码假设您已经有了识别用户的方法。

对于记录,我同意先前关于在服务器上记录开始时间和结束时间然后计算持续时间的评论。在客户端这样做的问题 - 如前所述 - 是用户能够通过操纵JavaScript代码甚至只是他们的系统时间和日期来改变数据。此外,如果未启用JavaScript,则根本没有任何计时器功能可以正常工作。

如果你肯定会一直启用JavaScript并且用户不会操作它,那么上面的解决方案(或者非常类似的东西)应该可以工作。

P.S。您可能需要仔细检查JavaScript和PHP的语法,因为我只是在脑海中输入它并且没有在代码编辑器中看到它。