Rajneesh Tutorials
Clock Design
By HTML CSS and JavaScript
By Rajneesh
1th June, 2020
Introduction
Title clock design by html css and js
Author Rajneesh
Why did you choose this blog comment?
Reading Rainbow Tip: Was the title interesting? Did the cover spark your curiosity? Was it something else?
Output
Tips : you can change that clock design by yourself.
The Special Thing in it
What Special ?
You can use it in your website to make your site more awesome and attractive
You can use it in your game
There are many uses of a clock in site
Practice and amazed your friends with it
CODE
Instructions : Don't misused this code. Use it for learning purpose only
Html
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
// css code here
</style>
</head>
<body>
<div class="showtime"></div>
<script>
//js code here
</script>
</body>
</html>
Css
body{
background:#222;
display:flex;
}
.showtime{
font-size:25px;
color:#fff;
position:absolute;
top:50%;
left:50%;
background:linear-gradient(to top left,skyblue,yellow);
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
padding:5px 10px;
border:1px solid #ddd;
box-shadow:inset 0px 0px 2px rgba(255,255,255,0.5),0px 10px 10px -10px rgba(0,0,0,0.5);
transform:translate(-50%,-50%);
}
.showtime{
-webkit-reflect-: bottom;
}
JavaScript
var st = document.querySelector(".showtime");
function s(){
var sct = new Date();
var h = sct.getHours();
if(h > 12){
h = h-12;
}
else if(h == 0){
h = 12;
}
var m = sct.getMinutes();
var s = sct.getSeconds();
var dt = h+" : "+m+" : "+s;
st.innerHTML = dt;
}
s();
setInterval(s,1000);
Next Topic
Amazing css 3D loading Animation
Follow us for more like This
Thanks to see our blog
Follow me to get more like this
© Rajneesh Tutorials
Facebook id Rajneesh
Website Rajneesh home
Facebook page Rajneesh Tutorials
Blog Top 10s
Blog Rajneesh Tutorials
Comments
Post a Comment