js+css实现秒表计时器代码-html代码-BFW代码库

js+css实现秒表计时器代码

代码语言：html

所属分类：其他

代码描述：js+css实现秒表计时器代码，开始按钮和停止按钮、还有一个重新开始按钮。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html body {
  height: 100vh;
  overflow: hidden;
  background: #9bafd9;
  background: linear-gradient(330deg, #006275 20%, #099295 100%);
  display: grid;
  place-content: center;
}
html body .timer {
  margin: 2rem 0;
  font-size: 3.75rem;
  font-family: monospace;
  background-color: #00121a;
  border: 1px solid #e9d8a5;
  color: #e9d8a5;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 4px 4px 0px 2px #f09c00, 6px 6px 0px 4px #ffbf47, 7px 7px 0px 5px #e9d8a5;
}
html body .controls {
  width: 100%;
  display: flex;
  justify-content: center;
  perspective: 600px;
  transform-style: preserve-3d;
}
html body .controls button {
  transition: all 90ms ease-in;
  width: 80px;
  height: 80px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 50%;
  margin: 1rem;
  font-family: "Raleway", sans-serif;
  border: 2px solid #e9d8a5;
  transform: rotatex(25deg);
  box-shadow: 0px 4px 0px #e9d8a5, 0px 8px 2px 2px #ba3d03;
}
html body .controls button:active {
  transform: rotatex(20deg) translatey(5px);
  box-shadow: 0px 2px 0px #e9d8a5;
}
html body .controls #start {
  background-color: #6d8505;
  color: #ffffff;
}
html body .controls #start:hover {
  background-color: #617604;
}
html body .controls #stop {
  background-color: #af1f12;
  color: #ffffff;
  display: none;
}
html body .controls #stop:hover {
  background-color: #9b2226;
}
html body .controls #clear {
  background-color: #93d2bd;
  color: #00121a;
}
html body .controls #clear:hover {
  background-color: #61bd9e;
}
</style>

  
  
</head>

  <body>
	<div class="timer" id='timer'>00:00:00:00</div>
	<div class="controls" id='controls'>
		<button onclick='startTimer()' id='start'>START</button>
		<button onclick='stopTimer()' id='stop'>STOP</button>
		<button class="reset" onclick='clearTimer()' id='clear'>RESET</button>
	</div>


  
      <script>
T = {};
T.timerDiv = document.getElementById("timer");

function displayTimer() {
  // initilized all local variables:
  var hours = "00",
  minutes = "00",
  miliseconds = 0,
  seconds = "00",
  time = ".........完整代码请登录后点击上方下载按钮下载查看