Display Time using Js and Css3

By Sidharth Patnaik -
This is a sample post in which you can create a Java script which can display the current time. Basically it fetches the local time from the system every 1 second using setInterval method.



Things we have used :
  • Css3 shadows and Hover Properties
  • Date Class with toLocaleTimeString() method
  • setInterval() method.

Demo:


As you can see when you hover the mouse over it, the color changes. This affect is added using css3.

The Code: 
<html>
<style>
body {
background-color:black;
}
#time{
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: none;
  font: normal 48px/normal "Warnes", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

#time:hover {
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
}
</style>
<body>
<center><p id="time"></p></center>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("time").innerHTML = t+"<br/><br/><br/>Time Using JS and Css3";
}
</script>

</body>
</html>

Found Bugs or wanna share your thoughts, Comment them !

Comments

Post a Comment

Popular posts from this blog

Non Restoring Division Algorithm Implementation in C

By Sidharth Patnaik -
Image
This  is a Dynamic program for the implementation of the NON RESTORING Division Algorithm in C Language. Non Restoring Division uses Left Shift Operations, Twos' Compliment and Binary Addition. Screenshots[Demo] The Code #include<stdio.h> #include<malloc.h> int *a,*q,*m,*mc,*c,n,d; int powr(int x,int y) { int s=1,i; for(i=0;i<y;i++) s=s*x; return s; } void print(int arr[],int n) { int i; for(i=0;i<n;i++) printf("%d ",arr[i]); } void bin(int n, int arr[]){ int r, i = 0; do{ r = n % 2; n /= 2; arr[i] = r; i++; }while(n > 0); } void set(int array[], int x){ int i,tmp[20]={0}; for(i = x -1; i >=0; i--) tmp[x-1-i]=array[i]; for(i=0;i<x;i++) array[i]=tmp[i]; } int len(int x) { int i=0; while(powr(2,i)<=x) i++; return ++i; } void addBinary(int a1[], int a2[]) { int bi[2]={0},ca[20]={0}; int t=len(n),tmp=0; int *su=(int*)malloc(sizeof(int)*len(n)); while(t...
Read more

Bit Stuffing Code Implementation in Java

By -
Image
This is an implementation of the Bit Stuffing popularly used in data communication, also known as one of the concepts of Framing data bits. To know more please  click here. Sample Output: This is a sample output with data binary data entered as 11001111110. Program Code: import java.util.*; public class BitStuffing { public static void main(String[] args) { System.out.print("Enter the Binary message: "); Scanner sn=new Scanner(System.in); String data = sn.nextLine(); String res = new String(); String out=new String(); int counter = 0; for(int i=0;i<data.length();i++) { if (data.charAt(i)!='1' && data.charAt(i)!='0') { System.out.println("Enter only Binary values!!!"); return; } ...
Read more

Hackerrank Modified Kaprekar Numbers Solution

By Sidharth Patnaik -
Image
This is the solution to the Modified Kaprekar Numbers found in the implementation section of the algorithm domain in Hackerrank. A modified Kaprekar number is a positive whole number n with d digits, such that when we split its square into two pieces - a right hand piece r with d digits and a left hand piece l that contains the remaining d or d−1 digits, the sum of the pieces is equal to the original number (i.e. l + r = n) . Screenshot The Code def sendKap(x,s): y=x*x y=str(y) s1=y[:len(y)/2:] s2=y[len(y)/2::] s3=int(s1)+int(s2) if(s3==x): s.append(str(x)) st=input() en=input() s=[] for i in range(st,en+1): if(i>9): sendKap(i,s) elif(i==1): s.append(str(i)) elif(i==9): s.append(str(i)) if(len(s)==0): print 'INVALID RANGE' else: print ' '.join(s) Got any problems feel free to comment them here !
Read more