HOW TO MAKE 7 SEGMENT STOPWATCH
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="test.css">
<title>Document</title>
</head>
<body>
<div class="s7">
<input value="">
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
</div>
<div class="s7">
<input value="">
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
</div>
<div class="s7">
<input value="">
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
</div>
<div class="dot">
<seg></seg>
<seg></seg>
</div>
<div class="s7">
<input value="">
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
</div>
<div class="s7">
<input value="">
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
<seg></seg>
</div>
<div id="controller">
<button id="start" onclick="start()">Start Timer</button>
<button id="stop" onclick="stop()">Stop Timer</button>
<button id="reset" onclick="reset()">Reset Timer</button>
</div>
<script src="test.js"></script>
</body>
</html>
CSS:
body{
background-color: #666;
text-align: center;
margin-top: 10%;
}
:root {
--ia-color: #222;
--a-color: red;
--padding-p: 4px;
--bar-w: 16px;
--bar-pad: 8px;
--padding: calc(var(--padding-p) * 2);
--bar-h: calc(var(--bar-w) * 4);
--bar-r: calr(var(--bar-w) / 2);
--bar-p: calc(var(--padding-p) + var(--bar-w));
--c-w: calc(var(--bar-p) * 2 + var(--bar-h));
--c-h: calc(var(--bar-p) * 2 + var(--bar-h) * 2 + var(--padding-p) + var(--bar-pad));
}
input{
display: none;
}
.s7, .dot{
display: inline-block;
width: var(--c-w);
height: var(--c-h);
position: relative;
margin: 0;
}
.dot seg{
background: var(--a-color);
border-radius: 50%;
height: calc(var(--bar-h)/3);
width: var(--bar-w);
position: absolute;
}
.dot seg:nth-of-type(1){
top: calc(var(--padding)*6);
}
.dot seg:nth-of-type(2){
bottom: calc(var(--bar-p)*2);
}
.dot{
width: calc(var(--c-w)/2);
}
.s7{
display: inline-block;
width: var(--c-w);
height: var(--c-h);
position: relative;
margin: 0;
}
/*control all segment*/
.s7 seg{
background-color: var(--ia-color);
border-radius: var(--bar-r);
height: var(--bar-h);
width: var(--bar-w);
}
/*control horizontal segment: 1,4,7*/
.s7 seg:nth-of-type(3n+1){
height: var(--bar-w);
width: var(--bar-h);
left: 50%;
margin-left: calc(var(--bar-h)/ -2);
}
.s7 seg:nth-of-type(1){
position: absolute;
top: var(--padding);
}
.s7 seg:nth-of-type(2){
position: absolute;
top: var(--bar-p);
right: var(--padding);
}
.s7 seg:nth-of-type(3){
position: absolute;
bottom: var(--bar-p);
right: var(--padding);
}
.s7 seg:nth-of-type(4){
position: absolute;
bottom: var(--padding);
}
.s7 seg:nth-of-type(5){
position: absolute;
bottom: var(--bar-p);
left: var(--padding);
}
.s7 seg:nth-of-type(6){
position: absolute;
top: var(--bar-p);
left: var(--padding);
}
.s7 seg:nth-of-type(7){
position: absolute;
top: 45%;
margin-top:calc(var(--bar-r)*-1);
}
input[value="0"]~seg:nth-of-type(1){
background: var(--a-color);
}
input[value="0"]~seg:nth-of-type(2){
background: var(--a-color);
}
input[value="0"]~seg:nth-of-type(3){
background: var(--a-color);
}
input[value="0"]~seg:nth-of-type(4){
background: var(--a-color);
}
input[value="0"]~seg:nth-of-type(5){
background: var(--a-color);
}
input[value="0"]~seg:nth-of-type(6){
background: var(--a-color);
}
/*-------------------------------------------*/
input[value="1"]~seg:nth-of-type(2){
background: var(--a-color);
}
input[value="1"]~seg:nth-of-type(3){
background: var(--a-color);
}
/*-------------------------------------------*/
input[value="2"]~seg:nth-of-type(1){
background: var(--a-color);
}
input[value="2"]~seg:nth-of-type(2){
background: var(--a-color);
}
input[value="2"]~seg:nth-of-type(4){
background: var(--a-color);
}
input[value="2"]~seg:nth-of-type(5){
background: var(--a-color);
}
input[value="2"]~seg:nth-of-type(7){
background: var(--a-color);
}
/*-------------------------------------------*/
input[value="3"]~seg:nth-of-type(1){
background: var(--a-color);
}
input[value="3"]~seg:nth-of-type(2){
background: var(--a-color);
}
input[value="3"]~seg:nth-of-type(3){
background: var(--a-color);
}
input[value="3"]~seg:nth-of-type(4){
background: var(--a-color);
}
input[value="3"]~seg:nth-of-type(7){
background: var(--a-color);
}
/*----------------------------------------------*/
input[value="4"]~seg:nth-of-type(2){
background: var(--a-color);
}
input[value="4"]~seg:nth-of-type(3){
background: var(--a-color);
}
input[value="4"]~seg:nth-of-type(6){
background: var(--a-color);
}
input[value="4"]~seg:nth-of-type(7){
background: var(--a-color);
}
/*----------------------------------------------
*/input[value="5"]~seg:nth-of-type(1){
background: var(--a-color);
}
input[value="5"]~seg:nth-of-type(3){
background: var(--a-color);
}
input[value="5"]~seg:nth-of-type(4){
background: var(--a-color);
}
input[value="5"]~seg:nth-of-type(6){
background: var(--a-color);
}
input[value="5"]~seg:nth-of-type(7){
background: var(--a-color);
}
/*------------------------------------------------*/
input[value="6"]~seg:nth-of-type(1){
background: var(--a-color);
}
input[value="6"]~seg:nth-of-type(3){
background: var(--a-color);
}
input[value="6"]~seg:nth-of-type(4){
background: var(--a-color);
}
input[value="6"]~seg:nth-of-type(5){
background: var(--a-color);
}
input[value="6"]~seg:nth-of-type(6){
background: var(--a-color);
}
input[value="6"]~seg:nth-of-type(7){
background: var(--a-color);
}
/*---------------------------------------------*/
input[value="7"]~seg:nth-of-type(1){
background: var(--a-color);
}
input[value="7"]~seg:nth-of-type(2){
background: var(--a-color);
}
input[value="7"]~seg:nth-of-type(3){
background: var(--a-color);
}
/*------------------------------------------*/
input[value="8"]~seg:nth-of-type(1){
background: var(--a-color);
}
input[value="8"]~seg:nth-of-type(2){
background: var(--a-color);
}
input[value="8"]~seg:nth-of-type(3){
background: var(--a-color);
}
input[value="8"]~seg:nth-of-type(4){
background: var(--a-color);
}
input[value="8"]~seg:nth-of-type(5){
background: var(--a-color);
}
input[value="8"]~seg:nth-of-type(6){
background: var(--a-color);
}
input[value="8"]~seg:nth-of-type(7){
background: var(--a-color);
}
/*----------------------------------------*/
input[value="9"]~seg:nth-of-type(1){
background: var(--a-color);
}
input[value="9"]~seg:nth-of-type(2){
background: var(--a-color);
}
input[value="9"]~seg:nth-of-type(3){
background: var(--a-color);
}
input[value="9"]~seg:nth-of-type(4){
background: var(--a-color);
}
input[value="9"]~seg:nth-of-type(6){
background: var(--a-color);
}
input[value="9"]~seg:nth-of-type(7){
background: var(--a-color);
}
JAVASCRIPT:
function display7(number){
var els = document.querySelectorAll(".s7 input");
for(let i =0;i < els.length; i++){
temp = number.toString().padStart(els.length, 0);
els[i].setAttribute("value", temp[i]);
}
return els.length;
}
display7(0);
var i = 0;
var timer = null;
function start(){
if(!timer){
timer = setInterval(() => {
var len = display7(i);
i = (i + 1)% Math.pow(10,len);
}, 10);
}
return timer;
}
function stop(){
clearInterval(timer);
timer=null;
}
function reset(){
stop();
i = 0;
display7(i);
}
