Develop A Digital Watch By Using HTML,CSS And JavaScript
HTML:
_____________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Digital Watch</title>
</head>
<body>
<div class="main-container">
<div class="f"></div>
<div class="e"></div>
<div class="a"></div>
<div class="g"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="second">
<div class="f"></div>
<div class="e"></div>
<div class="a"></div>
<div class="g"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
<div class="dots">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
<div class="third">
<div class="f"></div>
<div class="e"></div>
<div class="a"></div>
<div class="g"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
<div class="fourth">
<div class="third">
<div class="f"></div>
<div class="e"></div>
<div class="a"></div>
<div class="g"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
<div class="dots" id="dot">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
<div class="sixth">
<div class="f"></div>
<div class="e"></div>
<div class="a"></div>
<div class="g"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
<div class="seven">
<div class="f"></div>
<div class="e"></div>
<div class="a"></div>
<div class="g"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
<div class="dates">
<div><span id="day">02</span><span id="month">06</span><span id="year">2019</span></div>
</div>
<h3 id="copy">© Developed By Waseem</h3>
</div>
<script>
var a=document.getElementsByClassName('a');
var b=document.getElementsByClassName('b');
var c=document.getElementsByClassName('c');
var d=document.getElementsByClassName('d');
var e=document.getElementsByClassName('e');
var f=document.getElementsByClassName('f');
var g=document.getElementsByClassName('g');
var day1=document.getElementById('day');
var month1=document.getElementById('month');
var year1=document.getElementById('year');
var x=setInterval(function core(){
var hours=new Date().getHours();
var minutes=new Date().getMinutes();
var seconds=new Date().getSeconds();
var year=new Date();
var year2=year.getFullYear();
var month=new Date();
var month2=month.getMonth();
var day=new Date();
var day2=day.getDay()
day1.innerHTML=day2;
month1.innerHTML=month2;
year1.innerHTML=year2;
for(var be=0;be<6;be++){
a[be].style.background="black";
b[be].style.background="black";
c[be].style.background="black";
d[be].style.background="black";
e[be].style.background="black";
f[be].style.background="black";
g[be].style.background="black";
}
var totalHour=hours.toString();
var totalMinute=minutes.toString();
var totalSeconds=seconds.toString();
var firstHour=Number(totalHour[0]);
display(firstHour,0);
var secondHour=Number(totalHour[1]);
display(secondHour,1);
var firstMinute=Number(totalMinute[0]);
display(firstMinute,2);
var secondMinute=Number(totalMinute[1]);
display(secondMinute,3);
var firstSecond=Number(totalSeconds[0]);
display(firstSecond,4);
var secondSecond=Number(totalSeconds[1]);
display(secondSecond,5);
},1000);
function display(nill,i){
if(nill==0||nill==2||nill==3||nill==5||nill==6||nill==7|nill==8||nill==9){
a[i].style.background="red";
}
if(nill==0||nill==1||nill==2||nill==3||nill==4||nill==7||nill==8||nill==9){
b[i].style.background="red";
}
if(nill==0||nill==2||nill==6||nill==8){
e[i].style.background="red";
}
if(nill==0||nill==4||nill==5||nill==6||nill==8||nill==9){
f[i].style.background="red";
}
if(nill==2||nill==3||nill==4||nill==5||nill==6||nill==8||nill==9){
g[i].style.background="red";
}
}
</script>
</body>
</html>
CSS:
______________________________________________________
body{
margin:0px;
padding:0px;
background-color:black;
}
.main-container{
margin:50px auto;
height:500px;
width:70%;
}
.f{
position:relative;
top:150px;
left:100px;
height:80px;
width:10px;
background-color:white;
border-radius:30px;
}
.e{
margin-top:16px;
position:relative;
top:148px;
left:100px;
height:80px;
width:10px;
background-color:white;
border-radius:30px;
}
.a{
margin-top:16px;
position:relative;
top:-50px;
left:110px;
height:10px;
width:80px;
background:white;
border-radius:30px;
}
.g{
margin-top:16px;
position:relative;
top:15px;
left:110px;
height:10px;
width:80px;
background:white;
border-radius:30px;
}
.b{
position:relative;
top:-75px;
left:185px;
height:80px;
width:10px;
background:white;
border-radius:30px;
}
.c{
position:relative;
top:-63px;
left:185px;
height:80px;
width:10px;
background:white;
border-radius:30px;
}
.d{
margin-top:16px;
position:relative;
top:-78px;
left:110px;
height:10px;
width:80px;
background:white;
border-radius:30px;
}
.second{
position:absolute;
top:50px;
left:310px;
}
.dot1{
position:absolute;
top:260px;
left:530px;
height:30px;
width:10px;
background-color:red;
border-radius:30px;
}
.dot2{
position:absolute;
top:300px;
left:530px;
height:30px;
width:10px;
background-color:red;
border-radius:30px;
}
.third{
position:absolute;
top:50px;
left:462px;
}
.fourth{
position:absolute;
top:0px;
left:118px;
}
.fifth{
position:absolute;
top:425px;
left:700px;
color:white;
font-family:courier;
font-size:40px;
}
.sixth{
position:absolute;
top:48px;
left:605px;
}
#dot{
position:absolute;
top:0px;
left:145px;
}
.seven{
position:absolute;
top:48px;
left:725px;
}
.dates{
color:red;
font-family:courier;
position:absolute;
top:428px;
left:215px;
font-size:30px;
}
#day,#month,#year{
margin-right:20px;
}
#copy{
display:flex;
color:red;
font-family:courier;
font-size:30px;
font-weight:400;
margin:427px 0px 0px 460px;
}
0 Comments