FlipClock JS custom increment? - javascript

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>

Related

Java Script - How to load frames/images fast?

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>

Javascript equation tag doesn't update text on webpage

I'm having some trouble with some code of mine. I'm sure its a simple error, but i'm very new to html, js and jquery. I'm having some trouble with an equation which doesn't seem to be working. it could also be an issue with the text not updating with the variable.
var total = 0
var othernumber = 0
$(document).ready(function() {
$("#id2").click(function() {
if (total >= 10) {
othernumber++;
total - 10;
$("#othernumber").text(othernumber);
$("#total").text(total);
};
});
});
$(document).ready(function() {
$("#id").click(function() {
total++;
$("#total").text(total);
});
});
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1 id="total">0</h1>
<h3 id="othernumber">0</h3>
<button id="id">add one</button>
<button id="id2">add one when total >= 10 and then subtract ten</button>
</body>
I'm specifically having problems with this snippet of code.
$(document).ready(function() {
$("#id2").click(function() {
if (total >= 10) {
othernumber++;
total - 10;
$("#othernumber").text(othernumber);
$("#total").text(total);
};
});
});
it doesn't seem to want to subtract 10 from total, or maybe it just isnt updating the text. thanks in advance!
You are subtracting 10 from total, but you aren't saving it to a variable.
It should be:
total = total - 10;

progress-bar updated with setInterval zero still takes time to finish

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>

How can I optimize this recursive function which calls setTimeout()

The following function is using 100% of a CPU core on my computer. Is there a way I could rewrite it to be non-recursive? Would that fix it or is it because my CPU sucks? Are others seeing the same performance problems on their computer?
Code:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
function timeMsg(n,max,delay)
{
writeToLog(n + "th: &#" + n,n);
var temp = n + 1;
if(n < max){
var t=setTimeout("timeMsg(" + temp + "," + max + "," + delay + ")",delay);
}
}
function writeToLog(text,n){
$("#log").html($("#log").html() + text + "<br/>");
//autoscrolling: doesn't work...'
}
</script>
</head>
<body>
<form>
<input type="button" value="Display alert box in 3 seconds" onClick="timeMsg(0,100000,100)" />
</form>
<div id="log"></div>
</body>
Instead of repeatedly calling setTimeout with slightly-different values, you could setup a global variable to track the current iteration, and use one call to setInterval() instead. setInterval is like setTimeout, except it will keep running indefinitely - you don't have to call it over and over again. That might help, a bit.
That should not be using 100% CPU. (But the actual performance is dependent on the size of your document.) However, one obvious improvement is to get rid of the implicit eval in setTimeout:
function timeMsg(n, max, delay) {
writeToLog(n + "th: &#" + n, n);
var temp = n + 1;
if(n < max) {
var t = setTimeout(function() {
timeMsg(temp, max, delay);
}, delay);
}
}
You should also use append in place of the double-html (anti-)pattern you're currently employing:
function writeToLog(text,n){
$("#log").append(text + "<br/>");
}
There's no need to search for #log twice (reading its html both times).
Use setInterval() to start and clearInterval() when you reach your max.
Demo: http://jsfiddle.net/ThinkingStiff/PwASf/
Script:
var timer;
function startMsg( n, max, delay ) {
timer = window.setInterval( function() {
timeMsg( n++, max );
}, delay );;
};
function timeMsg( temp, max ) {
writeToLog(temp + "th: &#" + temp, temp);
if( temp == max ){
window.clearInterval( timer );
}
}
function writeToLog(text,n){
$(' #log' ).append( text + '<br/>' );
}
startMsg( 1, 10, 1000 );
HTML:
<div id="log"></div>
No, even as written, it doesn't use 100% CPU for me.
First thing you should do is change your writeToLog function. It is must faster to append an HTML block than to 1) read the existing HTML, 2) add the text+BR, 3) write the whole thing back in.
function writeToLog(text,n){
$("#log").append(text + "<br/>");
//autoscrolling: doesn't work...'
}
Other than that, if you want to not block other JS from running, then you need to use the setTimeout/setInterval method of implementing this loop. Otherwise a regular for loop is faster.

Javascript cycling through numbers to appear in document

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);

Categories