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);
Related
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>
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>
After I leave this loaded for some time, the fading in and out becomes about 3 times quicker than it is intended for (at the beginning it works correctly). Any help and maybe explanation what have I done wrong? Thank you.
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
var x =-1
function setWord(){
function come(){
$(".fde").fadeIn(200);
}
come();
function fade(){
$(".fde").fadeOut(200);
}
setTimeout(fade, 2800);
var phrases =new Array("War is peace","Freedom is slavery","Ignorance is strength");
if (x == phrases.length-1){x = -1}
x += 1;
$(".test").text(phrases[x]);
}
setTimeout(setWord,0);
setInterval(setWord, 3000);
});
</script>
</head>
<body>
<p class="fde"><span class='test'></span></p>
</body>
</html>
jsBin DEMO
Actually you don't need any setInterval or setTimeout, you can simply use the .animate() callback to run again your function:
$(function(){ // DOM ready
var x = 0,
$test = $('.test'),
phrases = ["War is peace","Freedom is slavery","Ignorance is strength"],
n = phrases.length;
function loopWords(){
$test.text(phrases[x++%n]).parent().fadeTo(500,1).delay(2000).fadeTo(500, 0, loopWords);
}
loopWords(); // Start
});
Try increasing setInterval value to 5000 / 10000.
Really a newbie question but I can't seem to find the answer. I need to have this html file show a bunch of random numbers, separated by 1 second intervals. For some reason (maybe obvious) it is only showing me the last one unless I have 1 alert after each random number generated. How can I correct this?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var randomnumber
var message
function placePossibleWinner()
{
randomnumber=Math.floor(Math.random()*11);
message="Teste ";
message=message.concat(randomnumber.toString());
document.getElementById("WINNER").innerHTML=message;
//alert(".")
}
</script>
</head>
<body>
<script type="text/javascript">
function runDraw()
{
var i=1
alert("start")
while (i<20)
{
setTimeout("placePossibleWinner()",1000)
i++
}
}
</script>
<h1>H Draw</h1>
<p id="WINNER">Draw</p>
<p></p>
<button onclick="runDraw()">Get me winner!</button>
</body>
</html>
Thanks in advance for any answers/comments.
The problem is all your setTimeouts are being triggered at the same time. Adding alerts pauses the JavaScript execution, so you see each number. Without that, after 1 second, all 19 setTimeouts run (one after another) and you just see one number (the screen is updated so fast, you just see one).
Try using setInterval instead.
function runDraw() {
var i = 1;
var interval = setInterval(function(){
if(i < 20){
placePossibleWinner();
i++;
}
else{
clearInterval(interval);
}
}, 1000);
}
This will run the function once every second, until i is 20, then it will clear the interval.
I believe you want setInterval instead. using setTimeout in a loop will just queue up 20 calls immediately and they will all fire at once 1 second later. Also, you are setting the innerHTML of the p which will overwrite any previous text.
function placePossibleWinner() {
// add a var here, implicit global
var randomnumber=Math.floor(Math.random()*11);
// add a var here, implicit global
message="Teste " + randomnumber + '\n'; // new line
document.getElementById("WINNER").innerHTML += message; // concat, don't assign
}
function runDraw() {
var counter = 1;
var intervalID = setInterval(function () {
if (counter < 20) {
placePossibleWinner();
counter++;
} else {
clearInterval(intervalID);
}
}, 1000);
}
You are resetting your message in your functions and you are calling placePossibleWinner() the wrong way... you want to use setInterval. Below is a modification of your html/javascript
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var randomnumber;
var message = "Teste ";
var timesCalled = 0;
var funtionPointer;
function placePossibleWinner()
{
timesCalled++;
randomnumber=Math.floor(Math.random()*11);
message=message.concat(randomnumber.toString());
document.getElementById("WINNER").innerHTML=message;
if (timesCalled > 20)
{
clearInterval(functionPointer);
}
}
</script>
</head>
<body>
<script type="text/javascript">
function runDraw()
{
var i=1
alert("start")
functionPointer = setInterval(placePossibleWinner,1000)
}
</script>
<h1>H Draw</h1>
<p id="WINNER">Draw</p>
<p></p>
<button onclick="runDraw()">Get me winner!</button>
</body>
</html>
To start with,
setTimeout("placePossibleWinner()",1000)
should be
setTimeout(placePossibleWinner,1000)
The parameter to setTimeput should be a reference to a function. See JavaScript,setTimeout