I've been trying for a while now to make my images play like its a video to get like 2+ fps.
My system updates the jpeg file pretty quick i just need it to load quick, i can't get more than 1 frame per second which is pretty slow, even if i change the loop timeout to less than 1s it won't load or it will take more than 2seconds to load.
My current code :
<?php
?>
<!DOCTYPE html>
<html>
<body>
<style>
.disclaimer{
display: none;
}
</style>
<p id="demo"></p>
<img id="dumb" name="dumb" src="dumb.jpg" alt="Image" style="width:960px;height:540px;">
<script language="JavaScript">
function randomIntFromInterval(min, max) { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min)
}
window.setInterval(function() {
var myImageElement = document.getElementById('dumb');
var d = new Date();
myImageElement.src = 'dumb.jpg?ver=' + d.getTime();;
}, 1000);
</script>
</body>
</html>
Related
I've been trying to figure this out for over 4 hours, none of the questions (that have already been answered) in stack work for me, here's the code:
<html>
<head>
<style>
.day {
background-image: url(test2.png);
}
.night {
background-image: url(test.png);
}
</style>
</head>
<body class="day" class="night">
<script>
setInterval(function() {
var d = new Date();
var n = d.getHours();
if (n > 23 || n < 6) {
document.body.className = "night";
} else {
document.body.className = "day";
}
console.log("test");
}, 1000 * 60 * 60);
</script>
</body>
</html>
I want the night background to be from 11PM to 7AM, and the rest of the time for the day background.
As you might see, those test.png pictures are changed instead of original so you don't see the pictures I want, since they contain minor gore, feel free to put your own test images in them.
Your logic is perfect and works as intended (I changed the images to colours, because StackOverflow gave an error when I tried your snippet).
The only problem (to you a problem, to others a design feature) is that setInterval starts after the first interval is complete. In other words; you had to wait an hour to see the results.
In my fix I moved the JavaScript to a separate function, which is mentioned by the setInterval and after that immediately called.
I also removed the double classes on the body, because that will be set by the function.
Edit: I forgot to mention that a double class (day and night) can occur with this code. You should write some logic to remove day when night is applied and vice versa.
Edit2: I changed the equation for the time a bit. n can't be bigger than 23, but it can be 23. Also, you wanted to change it to day around 7, which includes 6. So your equation should be right.
As user Salman A states, you should decrease the interval. If a user starts browsing your site at 6:58 and stayed one a single page for an hour (I don't know the business of your website, but that's quite long), the background would change around 7:58. So decrease your interval to something like 1 or 2 minutes (1000 * 60 * 1 or 1000 * 60 * 2).
<html>
<head>
<style>
.day {
background-color: #ccc;
}
.night {
background-color: #333;
}
</style>
</head>
<body>
<script>
setInterval(change_background, 1000 * 60 * 60);
function change_background() {
var d = new Date();
var n = d.getHours();
console.log(n);
if (n == 23 || n < 7) {
document.body.className = "night";
} else {
document.body.className = "day";
}
console.log("test");
}
change_background();
</script>
</body>
</html>
I'm sorry, I'm very new to JS but I need it for work...
Can you just quickley tell me what is wrong with this script? I just want the div box to be visible every second time when someone loads the page...
<body onload="script();">
<script type="text/javascript">
var random = Math.floor(Math.random() * 2) + 1 ;
if (random<1) {
document.getElementById('ele').style.display = 'block';
};
</script>
<div style="display: none;" id="ele">Div-Box<br />
</div>
</body>
Cheers,
Till
Using random won't guarantee that the div will be shown every second time the page is loaded. To do that you need to keep track of how many times a user has opened the page. You can do this in localStorage.
<body>
<script>
var viewCount = localStorage.getItem('viewCount') || 1; // default to 1 the first time
if (viewCount % 2 === 0) { // if it's an even number
document.getElementById('ele').setAttribute('style', 'display: block');
}
</script>
</body>
Apart from your logic you are calling script() function on onload but it is not defined.
<body onload="script();">
<script type="text/javascript">
function script(){
var random = Math.floor(Math.random() * 2) + 1 ;
console.log(random);
if (random>1) {
document.getElementById('ele').style.display = 'block';
};
}
</script>
<div style="display: none;" id="ele">Div-Box<br />
</div>
</body>
I am trying to write a custom increment function for FlipClock JS. So that every 5-20 seconds the counter is incremented by 1. I tried surrounding the clock.increment code with a settimeout function, I could not get it to work as I do not know where it is actually looping. I then looked at the flipclock.js file itself I managed to make it go up in 0.5, 0.25 and I can also make it delay start, but I cannot figure out how to make it increment every so often. I thought I could just add something like delay(500) before the clock.increment but I don't think that's where the loop is.
If you need any more info, ask.
Thanks!
I couldn't find a CDN that hosted flipclock so here is the code.
The counter increments +1 every 5 to 20 seconds.
<html>
<head>
<link rel="stylesheet" href="../compiled/flipclock.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../compiled/flipclock.js"></script>
</head>
<body>
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
<script type="text/javascript">
var clock;
var nextDoubleJump;
var internalCounter;
$(document).ready(function() {
internalCounter = 0;
nextDoubleJump = getRandomIntInclusive(5, 20);
console.log('Next jump value: ' + nextDoubleJump);
clock = $('.clock').FlipClock({
clockFace: 'Counter',
autoStart: false,
});
setInterval(function(){
internalCounter += 1;
console.log(internalCounter);
if(internalCounter == nextDoubleJump) {
clock.increment();
nextDoubleJump = getRandomIntInclusive(5, 20) + internalCounter;
console.log('Next jump value: ' + nextDoubleJump);
}
}, 1000);
});
function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>
</html>
Sorry for being very noob, but I started to learn JavaScript and have a little problem.
In the following code sample, the progress bar goes from 0 to 100 in 1 second, however, the "time" variable is set to 0 milliseconds, used by setInterval. I would expect the progressbar to be instantly at 100% when I press the button. (I will have progresses that will take less than a second to finish and I want to show them properly.) Looks like the setInterval is not using the given time as milliseconds.
So my question is, how can I set up the setInterval to use milliseconds, as it should be? (I know it will behave strange if you click the button a second time, but now this does not matter.)
Thanks!
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<button id="theButton">click</button>
<progress id="progressbar" min="0" value="0" max="100"></progress>
<span class="progress-value">0%</span>
<script>
$('#theButton').click(function(){
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = 0,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
}
};
var animate = setInterval(function() {
loading();
}, time);
});
</script>
I'm trying to cycle through 10 numbers (1 - 9) on the screen every second. Sort of like the green matrix code from the movie..
here is my code, I cant for the life of me figure out what I'm doing wrong, I've tried many other things but this seems the most correct to me:
<html>
<head>
<script type="text/javascript">
function numberScroll(){
n = setInterval("Math.floor(Math.random()*11",100);
setInterval("document.getElementById('txt').innerHTML=n",100);
}
</script>
</head>
<body onLoad="numberScroll()">
<div id="txt"></div>
</body>
</html>
You should never pass a string to setInterval/setTimeout.
Use a function instead:
setInterval(function() {
var n = Math.floor(Math.random() * 11);
document.getElementById('txt').innerHTML = n;
}, 100);
http://jsfiddle.net/ThiefMaster/Tmqbk/
setInterval(function(){document.getElementById('txt').innerHTML=Math.floor(Math.random()*11)},100);