Skip to content

Instantly share code, notes, and snippets.

@WaffleGnome

WaffleGnome/RainyClock.html

Last active November 2, 2022 07:01
Show Gist options
  • Save WaffleGnome/6226878 to your computer and use it in GitHub Desktop.
Save WaffleGnome/6226878 to your computer and use it in GitHub Desktop.
Download ZIP
Rainy Clock - just playing around with bonsai.js to make rain drops and then got the idea to add a clock. A CodePen by waffle.
Raw
RainyClock.html
<html>
<head>
<meta charset=utf-8 />
<title>Rainy Clock</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js"></script>
</head>
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
<div id = "contents"><span id="clock">&nbsp;</span>
<span id="TOD">&nbsp;</span>
<span id="date">&nbsp;</span>
<span id="secs">&nbsp;</span>
</div>
<script type="text/javascript">
function updateClock ( )
{
var tod = ( hours < 12 ) ? "AM" : "PM";
var currentTime = new Date()
// hours//
var hours = currentTime.getHours();
var hours = ( hours > 12 ) ? hours - 12 : hours;
var hours = ( hours == 0 ) ? 12 : hours;
// date//
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var currentSeconds = currentTime.getSeconds ( );
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
var minutes = currentTime.getMinutes()
if (minutes < 10){
minutes = "0" + minutes
}
var currentTimeString = hours + ":" + minutes + " "; // + currentSeconds;
var currentDateString = month + "/" + day + "/" + year;
document.getElementById("clock").firstChild.nodeValue =currentTimeString;
document.getElementById("TOD").firstChild.nodeValue = tod;
document.getElementById("date").firstChild.nodeValue = currentDateString;
document.getElementById("secs").firstChild.nodeValue = currentSeconds;
}
</script>
</body>
</html>
Raw
script.js
bonsai.run(document.body, {
height: 670,
width: 930,
code: function() {
function draw() {
var color = bonsai.color('white');
var circle = new Circle(
0,
0,
Math.random() * 2 + 5
).attr({
opacity: 0,
fillColor: color,
zindex: -100,
x: Math.random() * 900,
}).addTo(stage);
var k = new KeyframeAnimation('1s', {
'0%': {
scaleX: .1,
scaleY: 1,
opacity: .1,
},
'50%': {
scaleX: .1,
scaleY: 1.2,
opacity: .2,
},
'90%': {
scaleX: .1,
scaleY: .3,
opacity: .3,
y: 630,
},
'100%': {
scaleX: 1.5,
scaleY: .1,
opacity: .1,
strokeWidth:3,
strokeColor: '#99FFFF'
}
});
k.on('end', function(){
circle.destroy();
draw();
});
circle.animate(k);
}
for (var i = 0; i < 150; ++i) {
setTimeout(function(){
draw();
}, i * 100);
}
}
});
Raw
style.css
@font-face{
font-family: digital-7;
src: url(https://dl.dropboxusercontent.com/u/161826274/for%20fun/WidgetClock/Resources/font/digital-7.ttf);
}
body{
background-image:url(http://wallpaperpassion.com/upload1/32550/rain-night-wallpaper.jpg);
background-size:cover 100%;
background-position: 50%;
background-repeat: no-repeat;
overflow:hidden;
font-family:digital-7;
}
#contents{
position:absolute;
margin-left:270px;
margin-top: 200px;
color:rgba(0, 0, 0, 0.9);
font-family:digital-7;
z-index:100;
background-color:rgba(255, 255, 255, 0.2);
border: solid 2px rgba(255, 255, 255, 0.2);
height:230px;
width:395px;
}
#clock{
position:absolute;
font-size:140px;
margin-left:80px;
margin-top:50px;
}
#TOD{
font-size:25px;
position:absolute;
margin-left:320px;
margin-top:100px;
text-decoration:underline;
}
#date{
z-index:100;
font-size:25px;
position:absolute;
margin-left:150px;
line-height:95px;
font-weight:bold;
}
#secs{
font-size:25px;
z-index:100px;
margin-left: 320px;
margin-top:120px;
position:absolute;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment