时间戳

首页 > 解决方案 > Javascript 秒表希望时钟元素成为 div 而不是输入

javascript - Javascript 秒表希望时钟元素成为 div 而不是输入

问题描述

所以我有以下代码，正如您在 HTML 中看到的那样，我有一个 id=clock 的 div 和一个 id=clock 的输入元素，基本上如果我删除 div 或将其注释掉，输入元素工作正常，在html 页面输入元素中的时钟将显示时间，我希望它使用 div 元素进行样式设置；但是，如果我注释掉输入元素并使用它不计数的 div，我想我明白为什么但我似乎无法修复它。有人可以帮助解释我如何使用以下代码执行此操作吗？

var flagclock = 0;
var flagstop = 0;
var stoptime = 0;
var splitcounter = 0;
var currenttime;
var splitdate = '';
var output;
var clock;

// Start-Stop Function

function startstop() {
  var startstop = document.getElementById('startstopbutton');
  var startdate = new Date();
  var starttime = startdate.getTime();
  if (flagclock == 0) {
    startstop.value = 'Stop';
    flagclock = 1;
    counter(starttime);
  } else {
    startstop.value = 'Start';
    flagclock = 0;
    flagstop = 1;
    splitdate = '';
  }
}

//Increment function     

function counter(starttime) {
  output = document.getElementById('output');
  clock = document.getElementById('clock');
  currenttime = new Date();
  var timediff = currenttime.getTime() - starttime;
  if (flagstop == 1) {
    timediff = timediff + stoptime
  }
  if (flagclock == 1) {
    clock.value = formattime(timediff, '');
    refresh = setTimeout('counter(' + starttime + ');', 10);
  } else {
    window.clearTimeout(refresh);
    stoptime = timediff;
  }
}

function formattime(rawtime, roundtype) {
  if (roundtype == 'round') {
    var ds = Math.round(rawtime / 100) + '';
  } else {
    var ds = Math.floor(rawtime / 100) + '';
  }
  var sec = Math.floor(rawtime / 1000);
  var min = Math.floor(rawtime / 60000);
  ds = ds.charAt(ds.length - 1);
  if (min >= 60) {
    startstop();
  }
  sec = sec - 60 * min + '';
  if (sec.charAt(sec.length - 2) != '') {
    sec = sec.charAt(sec.length - 2) + sec.charAt(sec.length - 1);
  } else {
    sec = 0 + sec.charAt(sec.length - 1);
  }
  min = min + '';
  if (min.charAt(min.length - 2) != '') {
    min = min.charAt(min.length - 2) + min.charAt(min.length - 1);
  } else {
    min = 0 + min.charAt(min.length - 1);
  }
  return min + ':' + sec + ':' + ds;
}

// reset function      

function resetclock() {
  flagstop = 0;
  stoptime = 0;
  splitdate = '';
  window.clearTimeout(refresh);
  output.value = '';
  splitcounter = 0;
  if (flagclock == 1) {
    var resetdate = new Date();
    var resettime = resetdate.getTime();
    counter(resettime);
  } else {
    clock.value = "00:00:0";
  }
}

//Split function

function splittime() {
  if (flagclock == 1) {
    if (splitdate != '') {
      var splitold = splitdate.split(':');
      var splitnow = clock.value.split(':');
      var numbers = new Array();
      var i = 0
      for (i; i < splitold.length; i++) {
        numbers[i] = new Array();
        numbers[i][0] = splitold[i] * 1;
        numbers[i][1] = splitnow[i] * 1;
      }
      if (numbers[1][1] < numbers[1][0]) {
        numbers[1][1] += 60;
        numbers[0][1] -= 1;
      }
      if (numbers[2][1] < numbers[2][0]) {
        numbers[2][1] += 10;
        numbers[1][1] -= 1;
      }
      var mzeros = (numbers[0][1] - numbers[0][0]) < 10 ? '0' : '';
      var szeros = (numbers[1][1] - numbers[1][0]) < 10 ? '0' : '';
      output.value += '\t+' + mzeros + (numbers[0][1] - numbers[0][0]) + ':' + szeros + (numbers[1][1] - numbers[1][0]) + ':' + (numbers[2][1] - numbers[2][0]) + '\n';
    }
    splitdate = clock.value;
    output.value += (++splitcounter) + '. ' + clock.value + '\n';
  }
}
<input id="startstopbutton" class="buttonZ" style="width: 120px;" type="button" name="btn" id='btn' value="Start" onclick="startstop()" ;>
<input id="resetbutton" class="buttonZ" style="width: 120px;" type="button" name="btnRst1" id='btnRst1' value="Reset" onclick="resetclock()" ;>
<div id="clock" class="timerClock">00:00:00</div><br>
<!-- Clock 2 -->
<input id="clock" class="timerClock" type="text" value="00:00:0" style="text-align: center;" readonly=""><br>
<!-- Split Button -->
<input id="splitbutton" class="buttonZ" style="width: 120px; margin-right: 170px" type="button" value="Split Time" onclick="splittime();">
<!-- output for split times -->
<textarea id="output" spellcheck="false"></textarea>

标签： javascripthtmlcss

解决方案

您clock.value用于设置元素的内容<input>。这不适用于<div>元素；您将需要innerHTML改用：

clock = document.getElementById('clock'); //div#clock

// ...

clock.innerHTML = formattime(timediff, '');

推荐阅读