Digital Watch
<div class="watch">
<div class="days">
<span id="day-1">Mn</span>
<span id="day-2">Tu</span>
<span id="day-3">Wd</span>
<span id="day-4">Th</span>
<span id="day-5">Fr</span>
<span id="day-6">Sa</span>
<span id="day-0">Sn</span>
</div>
<div class="time">
<div class="number">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
<div class="number">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
<div class="sec">
<i></i><i></i>
</div>
<div class="number">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
<div class="number">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
</div>
</div>
.watch {
width: 300px;
height: 150px;
border: 2px solid #d4525c;
border-radius: 7px;
}.days {
display: flex;
justify-content: space-between;
width: 100%;
padding: 10px 20px;
}.days span {
font-size: 14px;
color: #d4525c;
}.time {
display: flex;
justify-content: space-between;
width: calc(100% - 40px);
height: 80px;
margin: 10px 20px 20px 20px;
}.number {
position: relative;
width: 20%;
height: 100%;
}.sec {
position: relative;
width: 10%;
height: 100%;
}.number i {
position: absolute;
display: block;
width: calc(100% - 2px);
height: calc(50% - 2px);
}.number i:nth-child(1) {
top: 0;
left: 1px;
border-top: 8px solid #d4525c;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}.number i:nth-child(2) {
top: 1px;
right: 0;
border-top: 8px solid transparent;
border-bottom: 4px solid transparent;
border-right: 8px solid #d4525c;
}.number i:nth-child(3) {
bottom: 1px;
right: 0;
border-top: 4px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #d4525c;
}.number i:nth-child(4) {
bottom: 0;
left: 1px;
border-bottom: 8px solid #d4525c;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}.number i:nth-child(5) {
bottom: 1px;
left: 0;
border-top: 4px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #d4525c;
}.number i:nth-child(6) {
top: 1px;
left: 0;
border-top: 8px solid transparent;
border-bottom: 4px solid transparent;
border-left: 8px solid #d4525c;
}.number i:nth-child(7) {
top: 2px;
left: 1px;
border-bottom: 4px solid #d4525c;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
width: calc(100% - 2px);
}.number i:nth-child(8) {
bottom: 2px;
left: 2px;
border-top: 4px solid #d4525c;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
width: calc(100% - 2px);
}.sec i {
position: absolute;
display: block;
width: 8px height;
border-radius: 50%;
background-color: #d4525c;
left: 50%;
transform: translateX(-50%);
}.sec i:nth-child(1) {
top: 30%;
}.sec i:nth-child(2) {
bottom: 30%;
}
const eldays = document.getElementsByClassName('days')[0];
const elday = eldays.getElementsByTagName('span');
//
function setOpacity(b){
return (b == 1) ? '1' : '0.1';
}
function setNumber(ind, num){
let el = document.getElementsByClassName('number')[ind];
let elp = el.getElementsByTagName('i');
let arrnum0 = [1,1,1,1,1,1,0,0];
let arrnum1 = [0,1,1,0,0,0,0,0];
let arrnum2 = [1,1,0,1,1,0,1,1];
let arrnum3 = [1,1,1,1,0,0,1,1];
let arrnum4 = [0,1,1,0,0,1,1,1];
let arrnum5 = [1,0,1,1,0,1,1,1];
let arrnum6 = [1,0,1,1,1,1,1,1];
let arrnum7 = [1,1,1,0,0,0,0,0];
let arrnum8 = [1,1,1,1,1,1,1,1];
let arrnum9 = [1,1,1,1,0,1,1,1];
let arr = [arrnum0, arrnum1, arrnum2, arrnum3, arrnum4, arrnum5, arrnum6, arrnum7, arrnum8, arrnum9];
for(var i=0; i<8; i++){
elp[i].style.opacity = setOpacity(arr[num][i]);
}
}
function getStrNumber(n){
return n.toString().padStart(2, '0');
}
function showTime(time){
var hour = getStrNumber(time.getHours());
var min = getStrNumber(time.getMinutes());
var arrH = hour.split('');
var arrM = min.split('');
var h1 = Number(arrH[0]);
var h2 = Number(arrH[1]);
var m1 = Number(arrM[0]);
var m2 = Number(arrM[1]);
setNumber(0, h1);
setNumber(1, h2);
setNumber(2, m1);
setNumber(3, m2);
var day = time.getDay();
for(var i=0; i<7; i++){
elday[i].style.opacity = '0.1';
}
document.getElementById('day-'+day).style.opacity = '1';
}
var start = false;
function Seconds(){
var time = new Date();
var sec = time.getSeconds();
if(sec == 0) showTime(time);
if(!start){
showTime(time);
start = true;
}
var elsec = document.getElementsByClassName('sec')[0].getElementsByTagName('i');
elsec[0].style.opacity = '1';
elsec[1].style.opacity = '1';
setTimeout(_=>{
elsec[0].style.opacity = '0.1';
elsec[1].style.opacity = '0.1';
},300);
}
Seconds();
setInterval(Seconds,1000);