For my personal challenge I am trying to re-create a lo-fi house room. In the room I would like to display a analog clock with the current time, completely programmed with PHP.
I am currently able to "hardcode" it through if statements, but now I would like to move the minutes section every minute at the right time. I couldn't find it on internet, so I hope you can help me out here! Somehow I need to make this a for loop, but I don't know how to iterate through the css section.
Would appreciate any help!
<div class="clock">
<?php
$m = date("i");
echo date("h:i:s");
//Need to become a for/while loop
if ($m == 14){
echo '<div id="mins" style="transform: rotate(60deg);"</div>';
}
?>
<div id="mins"></div>
</div>
.clock{
height: 150px;
width: 150px;
border-radius: 50%;
background: white;
position: absolute;
left: 45%;
top: 20%;
}
#mins{
height: 60px;
width: 5px;
left: 50%;
position: relative;
transform: translateX(-50%);
background: black;
transform: rotate(0deg);
transform-origin: bottom center;
}
My solution with Javascript for an analog script. No PHP needed.
index.php
<div class="clock">
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>
javascript
const updateInMS = 1000;
// Get the HTML elements from the page.
const clock = document.getElementsByClassName('clock')[0];
const htmHours = document.getElementById('hours');
const htmMinutes = document.getElementById('minutes');
const htmSeconds = document.getElementById('seconds');
// Start the timer
startTimer();
function startTimer() {
// Trigger the tick function that loops the clock
tick();
}
function tick() {
setTimeout(function() {
// Retrieve the date
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const secondsInDegrees = (360 * seconds) / 60;
const minutesInDegrees = (360 * minutes) / 60;
const hoursInDegrees = (360 * hours) / 12;
htmHours.style.transform = 'rotate(' + hoursInDegrees + 'deg)';
htmMinutes.style.transform = 'rotate(' + minutesInDegrees + 'deg)';
htmSeconds.style.transform = 'rotate(' + secondsInDegrees + 'deg)';
tick();
}, updateInMS);
}
css
.clock {
height: 150px;
width: 150px;
border-radius: 50%;
background: white;
position: absolute;
left: 45%;
top: 20%;
}
.clock div {
height: 60px;
width: 5px;
left: 50%;
/* UPDATED THIS TO FIXED: */
position: fixed;
transform: translateX(-50%);
background: black;
transform: rotate(0deg);
transform-origin: bottom center;
}
#hours {
background: black;
}
#minutes {
background: red;
}
#seconds {
background: blue;
}
Hope you like my solution.
Related
So I have an Interval that activates a function function Seifenblasen_blasen() every 100ms. I stop this Interval or function with clear Interval by running function function Bouny_Ball() when clicking the Button Bounce.
Now when I click the Button Bubble again it should start generating Bubbles every 100ms. But it doesn't, as it was cleared AND is not in the function Seifenblasen_blasen() therefore it still is cleared. But neither putting it in the function Seifenblasen_blasen() or making a seperate function and calling it with the same button press makes a difference. This is where I need your Help.
Thanks in advance.
This is not the only problem tho. I will make separate questions for these but if you have time feel free to ask and i'll provide them in a comment. I need to wait 90 minutes after all.
whole code
Function Seifenblasen_blasen() with Interval:
function Seifenblasen_blasen(){
document.getElementById("screen2").style.display = "none";
document.getElementById("screen").style.display = "block";
const section = document.querySelector('#screen')
const createElement = document.createElement('spawn')
var size = Math.random() * 60;
createElement.style.width = 30 + size + 'px';
createElement.style.height = 30 + size + 'px';
createElement.style.left = Math.random() * innerWidth + "px";
section.appendChild(createElement);
setTimeout(() => {
createElement.remove()
},8000)
}
const Blaseninterval = setInterval(Seifenblasen_blasen, 100)
Resulting CSS of function Seifenblasen_blasen()
#screen {
width: 100%;
height: 90vh;
overflow: hidden;
background-image: linear-gradient(#008CBA, #030a19);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#screen spawn {
position: absolute;
bottom: -80px;
background: transparent;
border-radius: 50%;
pointer-events: none;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
animation: animate 4s linear infinite;
}
#screen spawn:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform: scale(0.25) translate(-70%, -70%);
background: radial-gradient(#fff, transparent);
opacity: 0.6;
border-radius: 50%;
}
#keyframes animate {
0% {
transform: translateY(0%);
opacity: 1;
}
99% {
opacity: 1;
}
100% {
transform: translateY(-2000%);
opacity: 0;
}
}
#screen span {
margin-top: 700px;
font-size: 1em;
color: #333;
margin: 0 auto;
font-family: consolas;
background-color: #1F69FA;
border: none;
position: absolute;
}
clearence of Interval:
function Bouncy_Ball() {
clearInterval(Blaseninterval);
document.getElementById("screen").style.display = "none";
document.getElementById("screen2").style.display = "block";
}
I was following this challenge which ended with fixing this clocks hands.
Whenever the second's hand reaches the 12 o'clock position, the entire animation restarts but pulls the hand backwards so the next tick at 1-second isnt seamless, and it looks ugly.
how can I achieve this?
const secondHand = document.querySelector('.second-hand');
function setDate(){
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
}
setInterval(setDate, 1000);
setDate();
.clock {
width: 30rem;
height: 30rem;
border: 20px solid white;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock hands */
}
.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.38, 2.9, 0.58, 1);
}
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<br>
You need to set your seconds hand to 360 degrees, disable its transition, set it to 0 degrees, then enable its transition. Note that you should only disable the transition after the previous transition is over:
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
if(secondsDegrees == 0) {
secondHand.style.transform = "rotate(360deg)";
setTimeout(function() {
secondHand.style.transition = "0s";
secondHand.style.transform = "rotate(0deg)";
secondHand.style.transition = "";
},50);
} else {
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
}
}
You will probably need to do this for the minutes and hours hands too.
I am making a mock website to practice using HTML, CSS and javascript. I want the user to be able to click on an image an overlay will appear and an appointment date will displayed on screen. When i try to display the output of the function nothing happens.
I have tried calling the function, the specific output var and just the "Date.prototype.getNextWeekDate" itself.
<script>
Date.prototype.getNextWeekDay = function(d) {
if (d) {
var next = this;
next.setDate(this.getDate() - this.getDay() + 7 + d);
return next;
}
}
var now = new Date();
var nextMonday = now.getNextWeekDay(1); // 0 = Sunday, 1 = Monday, ...
return nextMonday;
</script>
<style>
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
<div id="overlay" onclick="off()">
<div id="text">
<p>Your appointment is at:<script>fucntion(d);</script></p>
</div>
</div>
<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
<img src="images/m&R_Idk.jpg" width="500" height="298" alt="Mechanic Appointment"
onClick="on()" >
This current date in 7 days should be outputted onto the overlay but nothing outputs at all.
So I've got my site more or less responsive. Everything stays centered and nice sizes when full screen desktop or mobile. But when I try to incorporate some device orientation javascript everything goes haywire. I'm sure it's something obvious that I'm missing since I'm a newbie but any insights would be appreciated :) Sorry in advance for the mess (been trying many different things without success and still getting my bearings with everything).
CSS:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
width: 100%;
height: 100%;
min-width: 375px;
min-height: 375px;
}
.barbox {
position: relative;
flex: 1;
}
.colorbars {
margin:auto;
position: absolute;
top: 50%;
left: 50%;
width: 60vw;
height: 60vw;
max-width: 700px;
max-height: 700px;
transform: translate(-50%, -50%);
border: 4px solid black;
}
.coverart {
flex: 1;
position: absolute;
width: 80%;
top: 10%;
left: 10%;
display: block;
border: 2px solid black;
box-shadow: 11px 9px 41px 0px rgba(0,0,0,0.75);
margin: auto;
}
.bgimg {
background-size:cover;
background-repeat: repeat;
width: 100vw;
height: 100vh;
overflow: hidden;
}
HTML:
<body class="bgimg">
<div class="barbox">
<div class="colorbars">
<a href=""> <img class="coverart" src="css/images/RET001.jpg"/>
</a>
</div>
</div>
</body>
JS:
<script type="text/javascript">
var colorbars = document.querySelector('.colorbars');
var barbox = document.querySelector('.barbox');
var output = document.querySelector('.output');
var maxX = barbox.clientWidth - colorbars.clientWidth;
var maxY = barbox.clientHeight - colorbars.clientHeight;
function handleOrientation(event) {
var x = event.beta; // In degree in the range [-180,180]
var y = event.gamma; // In degree in the range [-90,90]
output.innerHTML = "beta : " + x + "\n";
output.innerHTML += "gamma: " + y + "\n";
if (x > 90) { x = 90};
if (x < -90) { x = -90};
x += 90;
y += 90;
colorbars.style.top = (maxX*x/180 - 10) + "px";
colorbars.style.left = (maxY*y/180 - 10) + "px";
}
window.addEventListener('deviceorientation', handleOrientation);
</script>
JS Commented Out:
JS Added Back In:
I'm working on a project that calls for a circular progress bar. I found one that will do the trick here:
http://codepen.io/shankarcabus/pen/GzAfb
But what I need to do is animate it on page load so that it will go up in value each time:
<div class="progress-pie-chart" data-percent="43">
So on "page1.htm", I need the data-percent value to automatically increase incrementally from 0-20. On "page2.htm" from 20-33, etc. I'm pretty new to jQuery, so I honestly have no idea where to begin on that.
How do I create a function that will increase the data-percent value over say, 500 milliseconds?
Using a setInterval we can produce something like. We also use some math to calculate the steps based on the fps to create a smooth animation. Decimals can also be used for the percent
var start = 0;
var end = 30;
var time = 800; //in ms
var fps = 30;
var increment = ((end-start)/time)*fps;
$('.progress-pie-chart')[0].dataset.percent = start;
var timer = setInterval(function() {
$('.progress-pie-chart')[0].dataset.percent = parseFloat($('.progress-pie-chart')[0].dataset.percent) + increment;
if (parseFloat($('.progress-pie-chart')[0].dataset.percent) >= end) {
clearInterval(timer);
}
var $ppc = $('.progress-pie-chart'),
percent = parseFloat($ppc[0].dataset.percent),
deg = 360 * percent / 100;
if (percent > 50) {
$ppc.addClass('gt-50');
}
$('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
$('.ppc-percents span').html(parseInt(percent, 10) + '%');
}, fps);
.progress-pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #E5E5E5;
position: relative;
}
.progress-pie-chart.gt-50 {
background-color: #81CE97;
}
.ppc-progress {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 100px);
top: calc(50% - 100px);
width: 200px;
height: 200px;
clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 100px);
top: calc(50% - 100px);
width: 200px;
height: 200px;
clip: rect(0, 100px, 200px, 0);
background: #81CE97;
transform: rotate(60deg);
}
.gt-50 .ppc-progress {
clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
clip: rect(0, 200px, 200px, 100px);
background: #E5E5E5;
}
.ppc-percents {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 173.91304px/2);
top: calc(50% - 173.91304px/2);
width: 173.91304px;
height: 173.91304px;
background: #fff;
text-align: center;
display: table;
}
.ppc-percents span {
display: block;
font-size: 2.6em;
font-weight: bold;
color: #81CE97;
}
.pcc-percents-wrapper {
display: table-cell;
vertical-align: middle;
}
body {
font-family: Arial;
background: #f7f7f7;
}
.progress-pie-chart {
margin: 50px auto 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-pie-chart" data-percent="0">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div>