How to control the stopwatch through functions or keystrokes?

1. The html code of a stopwatch is glued on the Internet, but you want to control the start and pause of the stopwatch by executing a function or pressing a key. 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">

<style type="text/css">
body{
 background:white;
}
.container {
 padding: 50px;
 text-align: center;
}

.timer {
 padding: 10px;
 background: -webkit-linear-gradient(top, -sharp222, -sharp444);
 background: -moz-linear-gradient(top, -sharp222, -sharp444);
 background: -ms-linear-gradient(top, -sharp222, -sharp444);
 background: -o-linear-gradient(top, -sharp222, -sharp444);
 background: linear-gradient(top, -sharp222, -sharp444);
 overflow: hidden;
 display: inline-block;
 border: 7px solid -sharpefefef;
 border-radius: 5px;
 position: relative; 
 box-shadow: inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 0 5px 20px -10px rgba(0, 0, 0, 1);
}

.cell {
 /*.  =  = */
 width: 0.60em;
 height: 40px;
 font-size: 50px;
 overflow: hidden;
 position: relative;
 float: left;
}

.numbers {
 width: 0.6em;
 line-height: 40px;
 font-family: digital, arial, verdana;
 text-align: center;
 color: -sharpfff;
 position: absolute;
 top: 0;
 left: 0;
 /**/
 text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}

/**/
-sharptimer_controls {
 margin-top: -5px;
}
-sharptimer_controls label {
 cursor: pointer;
 padding: 5px 10px;
 background: -sharpefefef;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 border-radius: 0 0 3px 3px;
}
input[name="controls"] {display: none;}

/*Control code*/
/**/
-sharpstop:checked~.timer .numbers {
 -webkit-animation-play-state: paused;
 -moz-animation-play-state: paused;
 -o-animation-play-state: paused;
 -ms-animation-play-state: paused;
 animation-play-state: paused;
}
/**/
-sharpstart:checked~.timer .numbers {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  -ms-animation-play-state: running;
  animation-play-state: running;
}
/**/
-sharpreset:checked~.timer .numbers {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  -ms-animation: none;
  animation: none;
}

.moveten {
 /*1010*/
 -webkit-animation: moveten 1s steps(10, end) infinite;
 -moz-animation: moveten 1s steps(10, end) infinite;
 -o-animation: moveten 1s steps(10, end) infinite;
 -ms-animation: moveten 1s steps(10, end) infinite;
 animation: moveten 1s steps(10, end) infinite;
 /**/
 -webkit-animation-play-state: paused;
 -moz-animation-play-state: paused;
 -o-animation-play-state: paused;
 -ms-animation-play-state: paused;
 animation-play-state: paused;
}
.movesix {
 -webkit-animation: movesix 1s steps(6, end) infinite;
 -moz-animation: movesix 1s steps(6, end) infinite;
 -o-animation: movesix 1s steps(6, end) infinite;
 -ms-animation: movesix 1s steps(6, end) infinite;
 animation: movesix 1s steps(6, end) infinite;
}

/**/
/**/
.second {
 -webkit-animation-duration: 10s;
 -moz-animation-duration: 10s;
 -o-animation-duration: 10s;
 -ms-animation-duration: 10s;
 animation-duration: 10s;
}
.tensecond {
  /*60 times .second*/
  -webkit-animation-duration: 60s;
  -moz-animation-duration: 60s;
  -o-animation-duration: 60s;
  -ms-animation-duration: 60s;
  animation-duration: 60s;
} 

.milisecond {
  /*1/10th of .second*/
  -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 -ms-animation-duration: 1s;
 animation-duration: 1s;
} 
.tenmilisecond {
  -webkit-animation-duration: 0.1s;
  -moz-animation-duration: 0.1s;
  -ms-animation-duration: 0.1s;
  -o-animation-duration: 0.1s;
  animation-duration: 0.1s;
}
.hundredmilisecond {
  -webkit-animation-duration: 0.01s;
  -moz-animation-duration: 0.01s;
  -o-animation-duration: 0.01s;
  -ms-animation-duration: 0.01s;
  animation-duration: 0.01s;
}

.minute {
  /*60 times .second*/
  -webkit-animation-duration: 600s;
 -moz-animation-duration: 600s;
 -o-animation-duration: 600s;
 -ms-animation-duration: 600s;
 animation-duration: 600s;
} 
.tenminute {
  /*60 times .minute*/
  -webkit-animation-duration: 3600s;
 -moz-animation-duration: 3600s;
 -ms-animation-duration: 3600s;
 -o-animation-duration: 3600s;
 animation-duration: 3600s;
} 

.hour {
  /*60 times .minute*/
  -webkit-animation-duration: 36000s;
 -moz-animation-duration: 36000s;
 -ms-animation-duration: 36000s;
 -o-animation-duration: 36000s;
 animation-duration: 36000s;
} 
.tenhour {
  /*10 times .hour*/
  -webkit-animation-duration: 360000s;
 -moz-animation-duration: 360000s;
 -o-animation-duration: 360000s;
 -ms-animation-duration: 360000s;
 animation-duration: 360000s;
} 
@-webkit-keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-webkit-keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 /*height = 40. digits = 6. hence -240 to move it completely to the top*/
}

@-moz-keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-moz-keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 /*height = 40. digits = 6. hence -240 to move it completely to the top*/
}
@-o-keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-o-keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 /*height = 40. digits = 6. hence -240 to move it completely to the top*/
}
@-ms-keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@-ms-keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 /*height = 40. digits = 6. hence -240 to move it completely to the top*/
}
@keyframes moveten {
 0% {top: 0;}
 100% {top: -400px;} 
 /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@keyframes movesix {
 0% {top: 0;}
 100% {top: -240px;} 
 /*height = 40. digits = 6. hence -240 to move it completely to the top*/
}
/*Lets use a better font for the numbers*/
@font-face {
 font-family: "digital";
 src: url("http://thecodeplayer.com/uploads/fonts/DS-DIGI.TTF");
 
} 
 </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="page">
 <section class="demo">
  <div class="container">
   <!-- time to add the controls -->
   <input id="start" name="controls" type="radio"  />
   <input id="stop" name="controls" type="radio" />
   <input id="reset" name="controls" type="radio" />
   <div class="timer">
    <div class="cell">
     <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell">
     <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell divider"><div class="numbers">:</div></div>
    <div class="cell">
     <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
    </div>
    <div class="cell">
     <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell divider"><div class="numbers">:</div></div>
    <div class="cell">
     <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
    </div>
    <div class="cell">
     <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell divider"><div class="numbers">:</div></div>
    <div class="cell">
     <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell">
     <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
    <div class="cell">
     <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
    </div>
   </div>
   <!-- Lables for the controls -->
   <div id="timer_controls">
    <label for="start"></label>
    <label for="stop"></label>
    <label for="reset"></label>
    
   </div>
  </div>
</div>


</body>
</html>

currently, you can only start and pause by clicking label. When JavaScript dynamically changes the value attribute of input, oninput and onchange events are automatically triggered, but without success. Is there an easier way to do it?
https://codeshelper.com/q/10.

Html javascript
Mar.04,2021

use self-defined events to trigger input and change

in fact, you see, the key attribute it controls is: 

/*Control code*/
/**/
-sharpstop:checked~.timer .numbers {
 -webkit-animation-play-state: paused;
 -moz-animation-play-state: paused;
 -o-animation-play-state: paused;
 -ms-animation-play-state: paused;
 animation-play-state: paused;
}
/**/
-sharpstart:checked~.timer .numbers {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  -ms-animation-play-state: running;
  animation-play-state: running;
}
/**/
-sharpreset:checked~.timer .numbers {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  -ms-animation: none;
  animation: none;
}

is to use : checked pseudo class to trigger .timer within the sibling element .timer to change the style and state of animation, then you can also change the style for .timer .

Previous: How does Vue display the data on a web page?

Next: Php uses curl, and the counterpart is also php. How can I get it?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu