计数计时器，记录在页面上花费的时间

Question

我有一个代码，可以计算从点击到现在页面所花费的时间，我的问题是如何记录单击“提交”按钮并将其发送到数据库的时间

< script >
  var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {
  ++totalSeconds;
  secondsLabel.innerHTML = pad(totalSeconds % 60);
  minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}

function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }
}
</script>

<div id="navbar" class="collapse navbar-collapse">
 <ul class="nav navbar-nav">
<label id="minutes">00</label>:<label id="seconds">00</label><label id="houres">:00</label><li>
</ul>
</div>
<input type="submit" name="register" class="btn btn-info" value="Submit" />

Answer 1

尝试分解问题。首先分析您的程序流程：

当前，每秒（1000毫秒）：

• setTime函数被称为（ update ）
• 这会增加变量totalSeconds（（数据）模型/状态）
• 将其转换为几分钟和几秒钟
• 使用pad（视图模型）
将值格式化为填充字符串
• 使用新值（渲染 视图）更新视图（文档对象模型，DOM，HTML）

现在，您要将一些数据发送到数据库...让我们分解一下：

• 从客户端（例如网页）开始
• 用户点击提交按钮（视图中的互动会触发动作/事件）
• （在此之前，该事件的处理程序/监听器应该已经注册）
调用
• 已注册为事件监听器的 handler 函数
• 在处理程序中，对数据进行格式化（服务器喜欢的方式，例如JSON或url的 query 部分中的纯文本）
• 将数据发送到服务器（例如，作为 http请求使用 AJAX 通过 XMLHTTPRequest 通过新的 fetch < / em> api）
• 服务器收到请求，并将其传递给“处理程序”
• 在PHP中，可以使用“ .htaccess”（可选）将请求路由到PHP文件来完成，该文件中提供/预设了一些包含有关请求信息的变量 参见https://www.php.net/manual/en/reserved.variables.php 有关json解码的信息，请参见：PHP decode JSON POST 有关简单查询变量的信息，请参见https://www.php.net/manual/en/reserved.variables.get.php
• 然后，“处理程序”可以处理请求数据（例如，对其进行验证并将其保存在数据库中），并返回响应
然后，
• 客户端会收到响应，并且可以忽略或采取行动。通过显示错误/成功消息

上面提到的流程在Web开发的世界中很普遍，更普遍的是：

• 初始状态已加载
• 加载或更新状态时：
  • 视图模型已更新（基于状态）
  • 视图是渲染的（基于视图模型）
• 触发事件（例如用户交互或计时器）时：
  • 处理程序被调用，
    • 更新状态（从而更新视图）
    • ，并有选择地将一些数据发送到服务器

按照此模式，可以重写代码：

<span class="time">
  <span class="mm"></span>:<span class="ss"></span>
</span>
<button class="submit-time">Save time</button>

<script>

const view = {
  mm: document.querySelector('.time .mm'),
  ss: document.querySelector('.time .ss'),
  submit: document.querySelector('.submit-time'),
}

const render = ()=> {
  const viewModel = viewModelFromState(state)
  view.mm.innerText = viewModel.mm
  view.ss.innerText = viewModel.ss
}

const viewModelFromState = state=> ({
  mm: pad(Math.floor(state.secondsTotal / 60)),
  ss: pad(state.secondsTotal % 60),
})

const state = {
  secondsTotal: 0,
}

const update = ()=> {
  state.secondsTotal += 1
}

const eventListeners = {
  submit: ()=> {
    alert('value is '+state.secondsTotal)

    const onSuccess = (text)=> {
      alert("Saved! "+text)
    }

    const onFail = (error)=> {
      alert("Couldn't save!\n" + error)
    }

    saveSecondsTotal(state.secondsTotal)
      .then(res=> res.text()).then(onSuccess)
      .catch(err=> onFail(err))
  },
}

const setupEventListeners = ()=> {
  view.submit.addEventListener('click', eventListeners.submit)
}


// api

const saveSecondsTotal = (secondsTotal)=> {
  const val = ''+secondsTotal // explicitly convert number to string (unnecessary)
  const url = '/save-seconds-total'
  const queryString = 'val='+val
  const fullUrl = url+'?'+queryString
  return fetch(fullUrl)
}


// helpers

const pad = (val)=> {
  const str = ''+val
  return str.length < 2? '0' + str: str
}


// start

setupEventListeners()
setInterval(()=> {
  update()
  render()
}, 1000)

</script>

我通过删除未使用的内容（例如小时和一些标记）来“简化”示例。我还使用了一些语言功能，例如箭头功能，对象，const，三元运算符，promise等，这些功能可能看起来不错。

尽管如此，对于此示例，“简单”的显式解决方案可能是：

<span>
  <span id="mm"></span>:<span id="ss"></span>
</span>
<button onclick="submitTime">Save time</button>

<script>

// state + render

var mmElement = document.getElementById('mm')
var ssElement = document.getElementById('ss')

var secondsTotal = 0

function update () {
  secondsTotal += 1

  var mm = pad(Math.floor(secondsTotal / 60))
  var ss = pad(secondsTotal % 60)

  mmElement.innerText = mm
  ssElement.innerText = ss
}


// submit

function onSubmitSuccess (text) {
  alert("Saved! "+text)
}

function onSubmitFail (error) {
  alert("Couldn't save!\n" + error)
}

function saveSecondsTotal (secondsTotal) {
  return fetch('/save-seconds-total?val='+secondsTotal)
    .then(function (response) {return response.text()})
}

function submitTime () {
  alert('value is '+secondsTotal)
  saveSecondsTotal(state.secondsTotal)
    .then(onSuccess)
    .catch(onFail)
}


// helpers

function pad (val) {
  var str = ''+val
  if (str.length < 2) {
    return '0' + str
  }
  return str
}


// start

setInterval(update, 1000)

</script>

在这里，回答您的问题的有趣部分是“提交”部分。 PHP方面看起来像：

<?php // in http-root/save-seconds-total.php

$val = $_GET["val"];
$secondsTotal = intval($val);

// ... database specific code ...

echo "Saved ".$secondsTotal." seconds!"

?>

---

我建议您阅读并阅读更多示例/教程。在此处提问时，请显示您尝试过的内容以及可能的假设。尝试去除所有不必要的细节，以获取问题的核心。希望您问的原因是您对理解感兴趣，而不是因为您想为您完成一些功课...