I'm trying to get my minute number and hour number animation fire one second early. As you will see, the animation currently occurs when the seconds roll off '00', I'd like the animation's to occur when the seconds roll off '59'.
I've tried altering the seconds to display one second faster to correct this useing.
date.setSeconds(date.getSeconds + 1)
But the number goes crazy. I'm converting the timer numbers to background positions, which is probably lazy, but it seems a simple answer if I can get it to work properly. Any ideas would be greatly appreciated. Working demo can be found here. Clock
<script>
setInterval(function() {
var date = new Date();
var hours = date.getHours() * 100;
var minutes = date.getMinutes() * 100;
var seconds = date.getSeconds() * 100;
var milliseconds = date.getMilliseconds() / 10;
/* var minutesNormal = date.getMinutes();*/
var minCounter = 0;
var hourCounter = 0;
if (seconds === 0) {
minCounter = milliseconds - 100;
} else {
minCounter = 0;
}
if (minutes === 0) {
hourCounter = milliseconds - 100;
} else {
hourCounter = 0;
}
var compClock = document.getElementById("compareClock").innerHTML = "<p>" + hours / 100 + " " + minutes / 100 + " " + seconds / 100 + "</p>"
/* + "<p>Nomral Minute: " + minutesNormal + " Altered Minute: " + minutes / 100*/;
var hoursBar = document.getElementById("hours").style.backgroundPosition = "0px " + (hours + hourCounter) + "px";
var minutesBar = document.getElementById("minutes").style.backgroundPosition = "0px " + (minutes + minCounter) + "px";
var secondsBar = document.getElementById("seconds").style.backgroundPosition = "0px " + (seconds + milliseconds) + "px";
/* alert(secondsBar);*/
}, 10);
#charset "utf-8";
#container {
width: 960px;
position:relative;
margin:auto;
}
#containerCover {
height:100px;
width:300px;
position:absolute;
z-index:1;
background-image: url(images/clock_front.png);
background-repeat: no-repeat;
}
#clock {
position:absolute;
width:300px;
height:100px;
background:#616161;
}
#hours {
width:100px;
height:100px;
background-image: url(images/hours.jpg);
background-repeat: repeat-y;
float: left;
}
#minSecContainer {
width:200px;
float: right;
}
#minutes {
width:100px;
height:100px;
background-image: url(images/minutes.jpg);
background-repeat: repeat-y;
float: left;
}
#seconds {
width:100px;
height:100px;
background-image: url(images/seconds.jpg);
background-repeat: repeat-y;
float: right;
}
#testDiv {
background-image: url(images/minutes.jpg);
background-position: 0px 100px;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="testDiv"></div>
<div id="compareClock"></div>
<div id="containerCover"></div>
<div id="clock">
<div id="hours"></div>
<div id="minSecContainer">
<div id="minutes"></div>
<div id="seconds"></div>
</div>
</div>
</div>
</body>
</html>
I think this does what you want..
(function () {
var
d_compareclock = document.getElementById("compareClock"),
d_hours = document.getElementById("hours"),
d_minutesBar = document.getElementById("minutes"),
d_secondsBar = document.getElementById("seconds");
setInterval(function() {
var
date = new Date(),
hours = date.getHours() * 100,
minutes = date.getMinutes() * 100,
milliseconds = date.getMilliseconds() / 10,
seconds = date.getSeconds() * 100;
if (date.getSeconds() >= 59) {
minutes += milliseconds;
if (date.getMinutes() >= 59)
hours += milliseconds;
}
d_compareclock.innerHTML = "<p>" + hours / 100 +
" " + minutes / 100 + " " + seconds / 100 + "</p>"
d_hours.style.backgroundPosition = "0px " + (hours) + "px";
d_minutesBar.style.backgroundPosition = "0px " +
(minutes) + "px";
d_secondsBar.style.backgroundPosition = "0px " +
(seconds + milliseconds) + "px";
}, 10);
})();
#charset "utf-8";
#container {
width: 960px;
position:relative;
margin:auto;
}
#containerCover {
height:100px;
width:300px;
position:absolute;
z-index:1;
background-image: url(http://infinitedv.co.uk/clock/images/clock_front.png);
background-repeat: no-repeat;
}
#clock {
position:absolute;
width:300px;
height:100px;
background:#616161;
}
#hours {
width:100px;
height:100px;
background-image: url(http://infinitedv.co.uk/clock/images/hours.jpg);
background-repeat: repeat-y;
float: left;
}
#minSecContainer {
width:200px;
float: right;
}
#minutes {
width:100px;
height:100px;
background-image: url(http://infinitedv.co.uk/clock/images/minutes.jpg);
background-repeat: repeat-y;
float: left;
}
#seconds {
width:100px;
height:100px;
background-image: url(http://infinitedv.co.uk/clock/images/seconds.jpg);
background-repeat: repeat-y;
float: right;
}
#testDiv {
background-image: url(http://infinitedv.co.uk/clock/images/minutes.jpg);
background-position: 0px 100px;
height: 100px;
width: 100px;
}
<div id="container">
<div id="compareClock"></div>
<div id="containerCover"></div>
<div id="clock">
<div id="hours"></div>
<div id="minSecContainer">
<div id="minutes"></div>
<div id="seconds"></div>
</div>
</div>
</div>
Related
I am trying to make a traffic game using javascript though every time I try to use this line of code:
carAnimation.addEventListener('animationiteration', () => {
var random = Math.floor(Math.random() * 5);
left = random * 90 + 15;
carAnimation.style.left = left + "px";
counter++;
console.log(counter)
});
I am getting the error
Uncaught TypeError: Cannot read properties of null (reading
'addEventListener')
at HTMLButtonElement. (script.js:40:18)
but I can't seem to find the error in the line. Also, I am trying to run the same code for 3 different elements but it just doesn't seem to work either.
Here is the rest of the code if needed to solve this mystery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="game">
<div class="car"></div>
<div class="npcCar"></div>
<div class="npcCar npcCar2"></div>
<div class="npcCar npcCar3"></div>
</div>
<button class="start">Start!</button>
<div class="controlContainer">
<button class="btn pause"></button>
<button class="btn play"></button>
<button class="btn restart"></button>
<button class="btn help"></button>
</div>
<div class="helpModal hidd">
<div class="modal hidden">
<button class="close-modal">×</button>
<h1>Help</h1>
<p>
HOW TO PLAY:
Use WASD to the arrow keys to move the red car around.
You need to avoid hitting the blue cars.
When you hit a car you will automatically lose
The longer you last the more points you get
Good luck racer!
</p>
</div>
</div>
<style>
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
width: 100%;
background-color: rgb(69, 169, 240);
font-family: 'Oswald', sans-serif;
}
.game{
position: absolute;
left: calc(50% - 450px/2);;
height: 600px;
width: 450px;
border: 3px solid black;
border-radius: 5%;
background: url('road.png');
overflow: hidden;
}
.start{
position: absolute;
height: 30px;
width: 150px;
background-color: rgb(1, 255, 1);
border: 3px solid black;
border-radius: 5%;
font-size: 15px;
font-weight: bold;
top: 600px;
left : calc(50% - 150px/2);
transition: 0.5s;
}
.start:hover{
background: red;
}
.controlContainer{
padding: 5px;
width: 120px;
height: 120px;
border: 3px solid black;
border-radius: 5%;
background-color: lawngreen;
}
.btn{
height: 50px;
width: 50px;
border: 2px solid black;
border-radius: 50%;
}
.play{
background-image: url('play.png');
}
.pause{
background-image: url('pause.png');
}
.help{
background-image: url('help.png');
}
.restart{
background-image: url('restart.png');
}
.animate{
animation: road linear infinite 0.5s;
}
.hidden{
display: none;
}
#keyframes road{
0%{
background-position-y: 0px;
}
100%{
background-position-y: 600px;
}
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 45%;
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 100000000;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
.car{
position: relative;;
height: 120px;
width: 60px;
border-radius: 5%;
top: 435px;
background: url('Player (1).png');
transform: rotate(180deg);
z-index: 100000;
}
.npcCar{
width: 60px;
height: 120px;
background: url('obsacle.png');
position: relative;
left: 15px;
top: -300px;
}
.npcCar2{
top: -420px;
left: 195px;;
}
.npcCar3{
top: -540px;
left: 375px
}
.carAnimate{
animation: vroom 0.8s linear infinite;
}
.carAnimate2{
animation: vroom 0.8s linear infinite;
}
.carAnimate3{
animation: vroom 0.8s linear infinite;
}
#keyframes vroom{
0%{
top: -120px;
}
100%{
top: 600px;
}
}
</style>
<script>
'use strict'
const startBtn = document.querySelector('.start')
const pauseBtn = document.querySelector('.pause')
const playBtn = document.querySelector('.play')
const restartBtn = document.querySelector('.restart')
const helpBtn = document.querySelector('.help')
const modal = document.querySelector('.modal');
const closeModal = document.querySelector('.close-modal');
const game = document.querySelector('.game');
const player = document.querySelector('.car');
const npcPlayer = document.querySelector('.npcCar');
const npcPlayer2 = document.querySelector('.npcCar2');
const npcPlayer3 = document.querySelector('.npcCar3');
const carAnimation = document.querySelector('.carAnimate');
const carAnimation2 = document.querySelector('.carAnimate2');
const carAnimation3 = document.querySelector('.carAnimate3');
let click = 0;
let interval;
let both = 0;
let counter = 0;
//onLoad
window.addEventListener("load", () => {
player.style.position = "relative";
player.style.left = '195px';
player.style.top = '485px';
});
// Start the Game
startBtn.addEventListener('click', function(){
console.log('button clicked');
game.classList.add('animate');
click+=2;
npcPlayer.classList.add('carAnimate')
npcPlayer2.classList.add('carAnimate2')
npcPlayer3.classList.add('carAnimate3')
carAnimation.addEventListener('animationiteration', () => {
var random = Math.floor(Math.random() * 5);
left = random * 90 + 15;
carAnimation.style.left = left + "px";
counter++;
console.log(counter)
});
carAnimation2.addEventListener('animationiteration', () => {
var random1 = Math.floor(Math.random() * 5);
left = random1 * 90 + 15;
carAnimation2.style.left = left + "px";
counter++;
console.log(counter)
});
carAnimation3.addEventListener('animationiteration', () => {
var random1 = Math.floor(Math.random() * 5);
left = random1 * 90 + 15;
carAnimation3.style.left = left + "px";
counter++;
});
});
//Pausing the Game
pauseBtn.addEventListener('click', function(){
console.log('button clicked');
if(click>1){
game.classList.remove('animate');
click--
}
console.log(click)
});
//Resuming the Game
playBtn.addEventListener('click', function(){
console.log('button clicked');
if(click===1){
game.classList.add('animate');
click++;
console.log(click);
}
});
//Opening the Help Model
helpBtn.addEventListener('click', function(){
console.log('modal clicked')
modal.classList.remove('hidden')
});
//closing the help modal
closeModal.addEventListener('click', function(){
console.log('button clicked')
modal.classList.add('hidden')
});
//Moving Functions
function moveLeft() {
var left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
var transform = parseInt(window.getComputedStyle(player).getPropertyValue("transform"));
if (left > -0) {
player.style.left = left - 2 + "px";
player.style.transform = 'rotate(-' + 215 + 'deg)'
}
}
function moveRight() {
var left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
if (left < 385) {
player.style.left = left + 2 + "px";
player.style.transform = 'rotate(' + 215 + 'deg)'
}
}
function moveUp() {
var top = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
if (top > 0) {
player.style.top = top - 2 + "px";
player.style.transform = 'rotate(' + 180 + 'deg)'
}
}
function moveDown() {
var top = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
if (top < 490) {
player.style.top = top + 2 + "px";
player.style.transform = 'rotate(' + 180 + 'deg)'
}
}
//Make the pLayer move
document.addEventListener("keydown", (event) => {
if (both == 0) {
both++;
if (event.key === "ArrowLeft") {
interval = setInterval(moveLeft, 1);
}
if (event.key === "ArrowRight") {
interval = setInterval(moveRight, 1);
}
if (event.key === "ArrowUp") {
interval = setInterval(moveUp, 1);
}
if (event.key === "ArrowDown") {
interval = setInterval(moveDown, 1);
}
if (event.key === "a") {
interval = setInterval(moveLeft, 1);
}
if (event.key === "d") {
interval = setInterval(moveRight, 1);
}
if (event.key === "w") {
interval = setInterval(moveUp, 1);
}
if (event.key === "s") {
interval = setInterval(moveDown, 1);
}
}
});
document.addEventListener("keyup", (event) => {
clearInterval(interval);
both = 0;
player.style.transform = 'rotate(' + 180 + 'deg)'
});
</script>
</body>
</html>
Thanks!
Try wrapping all of your code inside the below document-content-ready function
document.addEventListener("DOMContentLoaded", () => {
//your entire js code here
});
make sure your code will run after the document's load is complete. you can do that by checking readyState like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="game">
<div class="car"></div>
<div class="npcCar"></div>
<div class="npcCar npcCar2"></div>
<div class="npcCar npcCar3"></div>
</div>
<button class="start">Start!</button>
<div class="controlContainer">
<button class="btn pause"></button>
<button class="btn play"></button>
<button class="btn restart"></button>
<button class="btn help"></button>
</div>
<div class="helpModal hidd">
<div class="modal hidden">
<button class="close-modal">×</button>
<h1>Help</h1>
<p>
HOW TO PLAY:
Use WASD to the arrow keys to move the red car around.
You need to avoid hitting the blue cars.
When you hit a car you will automatically lose
The longer you last the more points you get
Good luck racer!
</p>
</div>
</div>
<style>
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
width: 100%;
background-color: rgb(69, 169, 240);
font-family: 'Oswald', sans-serif;
}
.game{
position: absolute;
left: calc(50% - 450px/2);;
height: 600px;
width: 450px;
border: 3px solid black;
border-radius: 5%;
background: url('road.png');
overflow: hidden;
}
.start{
position: absolute;
height: 30px;
width: 150px;
background-color: rgb(1, 255, 1);
border: 3px solid black;
border-radius: 5%;
font-size: 15px;
font-weight: bold;
top: 600px;
left : calc(50% - 150px/2);
transition: 0.5s;
}
.start:hover{
background: red;
}
.controlContainer{
padding: 5px;
width: 120px;
height: 120px;
border: 3px solid black;
border-radius: 5%;
background-color: lawngreen;
}
.btn{
height: 50px;
width: 50px;
border: 2px solid black;
border-radius: 50%;
}
.play{
background-image: url('play.png');
}
.pause{
background-image: url('pause.png');
}
.help{
background-image: url('help.png');
}
.restart{
background-image: url('restart.png');
}
.animate{
animation: road linear infinite 0.5s;
}
.hidden{
display: none;
}
#keyframes road{
0%{
background-position-y: 0px;
}
100%{
background-position-y: 600px;
}
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 45%;
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 100000000;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
.car{
position: relative;;
height: 120px;
width: 60px;
border-radius: 5%;
top: 435px;
background: url('Player (1).png');
transform: rotate(180deg);
z-index: 100000;
}
.npcCar{
width: 60px;
height: 120px;
background: url('obsacle.png');
position: relative;
left: 15px;
top: -300px;
}
.npcCar2{
top: -420px;
left: 195px;;
}
.npcCar3{
top: -540px;
left: 375px
}
.carAnimate{
animation: vroom 0.8s linear infinite;
}
.carAnimate2{
animation: vroom 0.8s linear infinite;
}
.carAnimate3{
animation: vroom 0.8s linear infinite;
}
#keyframes vroom{
0%{
top: -120px;
}
100%{
top: 600px;
}
}
</style>
<script>
'use strict'
if (document.readyState === "complete") {
const startBtn = document.querySelector('.start')
const pauseBtn = document.querySelector('.pause')
const playBtn = document.querySelector('.play')
const restartBtn = document.querySelector('.restart')
const helpBtn = document.querySelector('.help')
const modal = document.querySelector('.modal');
const closeModal = document.querySelector('.close-modal');
const game = document.querySelector('.game');
const player = document.querySelector('.car');
const npcPlayer = document.querySelector('.npcCar');
const npcPlayer2 = document.querySelector('.npcCar2');
const npcPlayer3 = document.querySelector('.npcCar3');
const carAnimation = document.querySelector('.carAnimate');
const carAnimation2 = document.querySelector('.carAnimate2');
const carAnimation3 = document.querySelector('.carAnimate3');
let click = 0;
let interval;
let both = 0;
let counter = 0;
//onLoad
window.addEventListener("load", () => {
player.style.position = "relative";
player.style.left = '195px';
player.style.top = '485px';
});
// Start the Game
startBtn.addEventListener('click', function(){
console.log('button clicked');
game.classList.add('animate');
click+=2;
npcPlayer.classList.add('carAnimate')
npcPlayer2.classList.add('carAnimate2')
npcPlayer3.classList.add('carAnimate3')
carAnimation.addEventListener('animationiteration', () => {
var random = Math.floor(Math.random() * 5);
left = random * 90 + 15;
carAnimation.style.left = left + "px";
counter++;
console.log(counter)
});
carAnimation2.addEventListener('animationiteration', () => {
var random1 = Math.floor(Math.random() * 5);
left = random1 * 90 + 15;
carAnimation2.style.left = left + "px";
counter++;
console.log(counter)
});
carAnimation3.addEventListener('animationiteration', () => {
var random1 = Math.floor(Math.random() * 5);
left = random1 * 90 + 15;
carAnimation3.style.left = left + "px";
counter++;
});
});
//Pausing the Game
pauseBtn.addEventListener('click', function(){
console.log('button clicked');
if(click>1){
game.classList.remove('animate');
click--
}
console.log(click)
});
//Resuming the Game
playBtn.addEventListener('click', function(){
console.log('button clicked');
if(click===1){
game.classList.add('animate');
click++;
console.log(click);
}
});
//Opening the Help Model
helpBtn.addEventListener('click', function(){
console.log('modal clicked')
modal.classList.remove('hidden')
});
//closing the help modal
closeModal.addEventListener('click', function(){
console.log('button clicked')
modal.classList.add('hidden')
});
//Moving Functions
function moveLeft() {
var left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
var transform = parseInt(window.getComputedStyle(player).getPropertyValue("transform"));
if (left > -0) {
player.style.left = left - 2 + "px";
player.style.transform = 'rotate(-' + 215 + 'deg)'
}
}
function moveRight() {
var left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
if (left < 385) {
player.style.left = left + 2 + "px";
player.style.transform = 'rotate(' + 215 + 'deg)'
}
}
function moveUp() {
var top = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
if (top > 0) {
player.style.top = top - 2 + "px";
player.style.transform = 'rotate(' + 180 + 'deg)'
}
}
function moveDown() {
var top = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
if (top < 490) {
player.style.top = top + 2 + "px";
player.style.transform = 'rotate(' + 180 + 'deg)'
}
}
//Make the pLayer move
document.addEventListener("keydown", (event) => {
if (both == 0) {
both++;
if (event.key === "ArrowLeft") {
interval = setInterval(moveLeft, 1);
}
if (event.key === "ArrowRight") {
interval = setInterval(moveRight, 1);
}
if (event.key === "ArrowUp") {
interval = setInterval(moveUp, 1);
}
if (event.key === "ArrowDown") {
interval = setInterval(moveDown, 1);
}
if (event.key === "a") {
interval = setInterval(moveLeft, 1);
}
if (event.key === "d") {
interval = setInterval(moveRight, 1);
}
if (event.key === "w") {
interval = setInterval(moveUp, 1);
}
if (event.key === "s") {
interval = setInterval(moveDown, 1);
}
}
});
document.addEventListener("keyup", (event) => {
clearInterval(interval);
both = 0;
player.style.transform = 'rotate(' + 180 + 'deg)'
});
}
</script>
I'm trying to replicate this audio player:
https://medium.com/s/story/the-law-of-least-effort-is-the-success-secret-nobody-talks-about-c713eeab8ade)
with a grey progress line, but I can't seem to figure out the following 4 things:
How to put the progress bar next to the play/pause button?
How to have 2 decimals for the total time digit? (The 48 seconds)
How to have 2 decimals for the currentTimer? (First 9 seconds)
How to place the timers at the beginning and the end?
var barSize = 640;
var bar = document.getElementById('defaultBar');
var progressBar = document.getElementById('progressBar');
mytrack.addEventListener("loadedmetadata", function() {
var minutes = parseInt(mytrack.duration / 60);
var seconds = parseInt(mytrack.duration % 60);
duration.innerHTML = minutes + ':' + seconds;
})
duration.innerHTML = mytrack.duration;
playButton.addEventListener('click', playOrPause, false);
bar.addEventListener('click', clickedBar, false);
#progressBar {
position: absolute;
height: 2px;
background-color: #C6C6C6;
width: 0px;
float: left;
}
#playButton {
background-color: #FFFFFF;
border: none;
outline: none;
height: 60px;
width: 60px;
background-image: url(../Desktop/Play%20button.png);
background-repeat: no-repeat;
background-position: center;
}
#player {
background-color: #FFFFFF;
width: 400px;
margin-left: 300px;
padding: 5px;
box-sizing: border-box;
}
<div id="wrapper">
<audio id="mytrack">
<source src="file:///Users/Pier/Desktop/Narrated%20Story%20-%20Example.m4a" type="audio/mp3"/>
</audio>
<nav>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<div id="buttons">
<button type="button" id="playButton"></button>
<span id="currentTime">0:00</span>
<span id="fullDuration">0:00</span>
</div>
</nav>
</div>
The page you referenced uses flexbox for layout. You might consider a similar approach.
Below, I restructured your HTML and made each control element a flexbox item.
I also centered all items vertically with align-items:center.
var myTrack = document.getElementById('myTrack');
var progressBar = document.getElementById('progressBar');
var currentTime = document.getElementById('currentTime');
var fullDuration = document.getElementById('fullDuration');
function zeroPad(s) {
return ('00' + s).slice(-2);
}
function formatTime(t) {
var m = Math.floor(t / 60);
var s = Math.floor(t % 60);
return zeroPad(m) + ':' + zeroPad(s);
}
function playOrPause() {
myTrack.paused ? myTrack.play() : myTrack.pause();
}
myTrack.addEventListener("loadedmetadata", function() {
fullDuration.innerHTML = formatTime(this.duration);
});
myTrack.addEventListener("timeupdate", function() {
var thisTime = this.currentTime;
var duration = this.duration;
progressBar.style.width = thisTime / duration * 100 + '%';
currentTime.innerHTML = formatTime(thisTime);
});
playButton.addEventListener('click', playOrPause, false);
#audioControls {
display: flex;
align-items: center;
}
.controlTime {
margin: 0 1em;
}
#progressWrap {
/* Allow this element to grow */
flex: 1 0 auto;
border: 1px solid #EEE;
border-radius: 0.5em;
overflow: hidden;
}
#progressBar {
height: 0.5em;
background-color: #55AA55;
width: 0;
}
#playButton {
background-color: #FFFFFF;
border: 1px solid #CCC;
border-radius: 3px;
padding: 0.7em 1em;
outline: none;
cursor: pointer;
}
#playButton:hover {
background-color: darkgray;
color: white;
}
<div id="wrapper">
<audio id="myTrack">
<source src="https://example-files.online-convert.com/audio/m4a/example.m4a" type="audio/mp3"/>
</audio>
<nav id="audioControls">
<button type="button" id="playButton">play</button>
<span class="controlTime" id="currentTime">00:00</span>
<div id="progressWrap">
<div id="progressBar"></div>
</div>
<span class="controlTime" id="fullDuration">00:00</span>
</nav>
</div>
I got two conditions in my code. If this condition becomes true (based on currentTime) I would like to change opacity on div element from '0' to '1'.
Second condition works same but it does opposite.
My problem:
Lets say that it supposed to work as Day / Night phase.
So when I would like to set opacity for day '0' and night '1' I need to reload whole page. Why is that not reloading by itself even though I have there setInterval?
Whole code is here : https://jsbin.com/huvoluk/1/edit?html,css,js,output
Just edit those time condition so you can see what I am trying to describe.
window.onload = function() {
// TODO:: Do your initialization job
var cs = new Date();
var hour = cs.getHours();
var minu = cs.getMinutes();
var sec = cs.getSeconds();
var tst = hour +":"+ minu +":"+ sec;
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
if(h === 0){
h = 24;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 100);
}
showTime();
function showdate(){
var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("date").innerHTML = days[d.getDay()];
}
showdate();
// day1 tonight transition
function day1toNight3(){
if('10:00' <= tst&&tst < '20:35:20')
{
document.getElementById("day1").style.opacity = "1";
document.getElementById("night3").style.opacity = "0";
}
setInterval(day1toNight3, 10000);
}
day1toNight3();
function night3toDay1(){
if('20:35:23' <= tst&&tst < '22:58:00')
{
document.getElementById("day1").style.opacity = "0";
document.getElementById("night3").style.opacity = "1";
}
setInterval(night3toDay1, 10000);
}
night3toDay1();
};
html,
body {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
background-color: #000000;
color: #ffffff;
}
.page {
width: 100%;
height: 100%;
display: table;
}
.contents {
display: table-cell;
vertical-align: middle;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
.clock {
position: absolute;
top: 45%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #FFFFFF;
font-size: 30px;
/* font-family: Orbitron; */
letter-spacing: 7px;
}
img {
position: fixed;
top: 0%;
left: 0%;
height: 360px;
width: 360px;
transition: all 5s ease;
}
#day1 {
position: absolute;
width: 360px;
height: 360px;
background-repeat: no-repeat;
}
#night3 {
position: absolute;
width: 360px;
height: 360px;
background-repeat: no-repeat;
}
#components-main {
position: absolute;
width: 100%;
height: 100%;
}
.showsDate {
position: absolute;
top: 55%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #FFFFFF;
font-size: 22px;
/* font-family: Orbitron; */
letter-spacing: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="test" />
<title>Web Basic Application</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<img id="day1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXHbfK8xm3PQo4fR9O-Q5_EvGnH3Tsixdm1iUay24SH2lYUIhQWw" style="opacity: 0"/>
<img id="night3" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqK7DnhIIS444uMgbgWbPGeOfLmQkZFfvRJU3XkX_z7UBFWzkswQ" style="opacity: 0"/>
<!-- <div id="backgroundNight" style="opacity: 0;"></div>-->
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<div id="date" class="showsDate"></div>
<div id="components-main">
<!--<div id="hand-main-hour"></div>-->
<div id="hand-main-minute"></div>
<div id="hand-main-second"></div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
00
I created this which is to be a stopwatch but seems as though it does not want to run in IE, it will work fine in chrome but it needs to be put into a site that only runs in IE please help....
var h1 = document.getElementsByTagName('h1')[0],
start = document.getElementById('start'),
stop = document.getElementById('stop'),
clear = document.getElementById('clear'),
seconds = 0,
minutes = 0,
hours = 0,
t;
function add() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
timer();
}
function timer() {
t = setTimeout(add, 1000);
}
// timer();
/* Start button */
start.onclick = function() {
timer();
start.style.visibility = "hidden";
stop.style.visibility = "visible";
}
/* Stop button */
stop.onclick = function() {
clearTimeout(t);
stop.style.visibility = "hidden";
start.style.visibility = "visible";
}
/* Clear button */
clear.onclick = function() {
clearTimeout(t);
h1.textContent = "00:00:00";
seconds = 0;
minutes = 0;
hours = 0;
stop.style.visibility = "hidden";
start.style.visibility = "visible";
}
#timer {
position: absolute;
top: 35px;
left: 20px;
}
.time {
font-size: 42px;
margin-left: 40px;
margin-top: 5px;
}
.btn-timer {
width: 80px;
height: 40px;
cursor: pointer;
font-family: helvetica, sans-serif;
font-size: 16px;
}
h1 {
font: bold 24px Helvetica, sans-serif;
color: black;
}
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
<div id="timer">
<button id="start" class="btn-timer">START</button>
<button id="stop" class="btn-timer" style="visibility:hidden">STOP</button>
<button id="clear" class="btn-timer">CLEAR</button>
<h1 class="time"><time>00:00:00</time></h1>
</div>
Any help would be great
I have created this code:
window.onload = function() {
for (var i = 10; i < 100; i += 10) {
document.getElementById("overlayInner").innerHTML += '<div style="top:' + ((8 * i) - 15) + 'px;" class="number lat lat' + i + '">' + i + '</div>';
document.getElementById("overlayInner").innerHTML += '<span style="left:' + ((8 * i) - 15) + 'px;" class="number lon lon' + i + '">' + i + '</span>';
}
var map_canvas = document.getElementById("map");
var context = map_canvas.getContext("2d");
for (var x = 80; x < 800; x += 80) {
context.moveTo(x, 45);
context.lineTo(x, 755);
}
var count = 1;
for (var y = 80; y < 800; y += 80) {
if (count != 10) {
context.moveTo(50, y);
context.lineTo(750, y);
}
}
context.strokeStyle = "#7c7c7c";
context.stroke();
};
function move(id, evt) {
var e = document.getElementById(id);
e.style.display = "block";
e.style.left = evt.pageX + 10 + "px";
e.style.top = evt.pageY + 10 + "px";
e.innerHTML = "X: " + Math.round(((evt.pageX * 1.25) / 10)) + " / Y: " + Math.round(((evt.pageY * 1.25) / 10));
}
function hide(id) {
document.getElementById(id).style.display = "none";
}
/* CSS file placeholder. */
body {
padding: 0;
margin: 0;
background: #313335;
}
#map_container {
position: relative;
}
#map {
width: 800px;
height: 800px;
}
#overlay {
width: 800px;
height: 800px;
position: absolute;
top: 0;
left: 0;
}
#overlay:hover {
cursor: crosshair;
}
#overlayInner {
width: 100%;
height: 100%;
display: block;
position: relative;
}
.number {
background: white;
padding: 5px;
border: 2px solid black;
position: absolute;
}
.lat {
left: 25px;
}
.lon {
bottom: 25px;
}
canvas {
border: 1px solid black;
position: relative;
}
canvas:hover {
cursor: crosshair;
}
#coordinates {
position: absolute;
color: white;
display: none;
}
<canvas id="map" width="800px" height="800px"></canvas>
<div id="overlay" onmousemove="move('coordinates',event)" onmouseout="hide('coordinates')">
<div id="overlayInner"></div>
</div>
<span id="coordinates"></span>
It seems to work in the Chrome browser both when I run it through the stack snippet or when I run it as a website. However, when I run it as a Chrome app I get no coordinates.
I am new to Chrome Apps so I am not sure if it is possible to achieve this. However, I thought I would ask to see if it needs to be written differently, maybe there is an error in my code that the browser is fixing at runtime? This code is just standard Javascript so I can't understand why it doesn't work.
Chrome Extensions do not allow inline-event handlers
onmousemove="move('coordinates',event)" onmouseout="hide('coordinates')"
The following code should do the trick.
eO = document.getElementById('overlay');
eO.addEventListener("mousemove", function(evt){
move('coordinates', evt);
});
eO.addEventListener("mouseout", function(){
hide('coordinates');
});