Question

我想实现一个简单的计时器（HH：MM：SS）来计算用户执行在线任务所花费的时间，计时器应该在页面加载时启动，当用户按下按钮提交结果时停止他的任务。 HH：小时 MM：分钟 SS：秒

Answer 1

维持时间的守则： -

$(document).ready(function() {
  updateClock(); 
  setInterval('updateClock()', 250 );
});


function updateClock ( )
{
  //Set Current Time Variables
  var currentTime = new Date ( );
  var currentHours = currentTime.getHours();
  var currentMinutes = currentTime.getMinutes();
  var currentSeconds = currentTime.getSeconds();
  var currentMiliSeconds = currentTime.getMilliseconds();
  var rounded = currentSeconds + (currentMiliSeconds / maxmilisecs);

  //Get Color Percentages based off time.
  //Percentage of 255 for Color
  //Percentage of 100 for Position
  rednum = (Math.round(255 * ((currentHours) / maxnumhours)));   
  rednum100 = (Math.round(100 * ((currentHours) / maxnumhours)));
  greennum = (Math.round(255 * ((currentMinutes) / maxnummins)));
  greennum100 = (Math.round(100 * ((currentMinutes) / maxnummins)));
  bluenum = (Math.round(255 * ((rounded) / maxnumsecs)));
  bluenum100 = (Math.round(100 * ((rounded) / maxnumsecs)));

  //convert to HEX
  redhex = hexifyWithZeroLead(rednum);
  greenhex = hexifyWithZeroLead(greennum);
  bluehex = hexifyWithZeroLead(bluenum);

  //Create the Hex Strings
  var hex = "#" + redhex + greenhex + bluehex;      //Total HEX Value
  var fullredhex = "#"+redhex+"0000";               //RED Only Hex
  var fullgreenhex = "#00"+greenhex+"00";           //GREEN Only Hex
  var fullbluehex = "#0000"+bluehex;                //BLUE Only Hex

  //Text to indvidual color sliders
  jQuery("#red_display").html(redhex);
  jQuery("#green_display").html(greenhex);
  jQuery("#blue_display").html(bluehex);

  //Position and animate color sliders
  leftpos = (rednum100 * 0.01 * 575) + 25;
  jQuery('#red_display').animate({left: leftpos}, 200);
  jQuery('#red_display').css('background-color',fullredhex);

  leftpos = (greennum100 * 0.01 * 575) + 25;
  jQuery('#green_display').animate({left: leftpos}, 200);
  jQuery('#green_display').css('background-color',fullgreenhex);

  leftpos = (bluenum100 * 0.01 * 575) + 25;
  jQuery('#blue_display').animate({left: leftpos}, 200);
  jQuery('#blue_display').css('background-color',fullbluehex);


  //zerolead the time for display
  currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  //append the values
  jQuery("#clock").html("<span id='hours'>"+ currentHours + "</span>:<span id='minutes'>" + currentMinutes + "</span>:<span id='seconds'>" + currentSeconds + '</span>');
  jQuery("#hex").html(hex);

  //change the background of the page to current HEX color
  //jQuery('.skin-blue .logo').css('background-color',hex);
  //jQuery('.skin-blue .navbar').css('background-color',hex);
  //jQuery('.skin-blue .sidebar a').css('color',hex);
}

这是你的div元素

<div id="clock" style="color: white;width"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></div>

Answer 2

我不会为你写出整个代码，因为你没有展示你自己的任何作品，但我会让你顺利。

您可以在页面加载时创建日期对象var firstDate = new Date;。创建一个创建另一个日期对象的函数，并获得它们之间的差异。这给出了以毫秒为单位的时间。可以使用mod和Math.floor（）将其转换为秒，分钟和小时。然后，您可以使用.innerHTML或.textContent将其打印到页面。然后使用window.setTimeout("yourTimerFunction()",1000);每秒重新调用你的函数。

定时器（HH：MM：SS），带有用于在线任务的javascript

2 个答案: