Hi I finally got my progress bar the way I want, is there a way to make it have delay spikes? like its actually loading data, for now this is just for looks on my website but I would like it to look authentic. heres the code. the max delay I would need and want is 500 milliseconds.
<html><head>
<style>
#adLinkb,
#adLinkb2 {
font-size: 12px;
color: #fff;
font-family:sans-serif;
}
</style>
</head>
<body>
<div id="adLinkb" style="border: 1px solid black;width:212;background-color:black;border-color:white"></div>
<br>
<div id="adLinkb2" style="border: 1px solid black;width:212;background-color:black;border-color:white"></div>
<script type="text/javascript">
function buildBar(id, callback) {
var currentAdb = 0;
var imgCtb = 70;
function cycleb() {
var output = '';
for (var i = 0; i < imgCtb; i++) {
output += i > currentAdb ? ' ' : '/';
}
output += '';
document.getElementById(id).innerHTML = output;
++currentAdb;
if (currentAdb == imgCtb) {
window.clearInterval(myInterval);
if (typeof callback == 'function') {
callback();
}
}
}
var myInterval = window.setInterval(cycleb, 100);
}
function callback1() {
buildBar('adLinkb2', callback2);
}
function callback2() {
//window.location... stuff here
alert('redirect should go here');
}
buildBar('adLinkb', callback1);
</script>
</body></html>
You can replace the setInterval with a setTimeout and re-schedule with a random timeout
window.setTimeout(cycleb,10+Math.random()*300);
the fiddle: http://jsfiddle.net/martijn/qqf90r3f/
alternative spike:
if(Math.random()>0.9)
{
// 10% change on a spike
window.setTimeout(cycleb,10+Math.random()*1000);
}
else{
window.setTimeout(cycleb,10+Math.random()*10);
}
http://jsfiddle.net/martijn/qqf90r3f/1/
Related
This is my first question on this website. I built a simple game by Javascript but I don't know how can I add an end to it, Because I am a beginner. Thanks for helping me.
document.getElementById("start").onclick =function() {
function getRandomColor() {
var letters='0123456789ABCDEF'.split('');
var color='#';
for (var i=0; i <6; i++ ) {
color += letters[Math.round(Math.random()*15)];
}
return color;
}
var time; var createdTime; var clickTime; var reactionTime;
function makeBox() {
time=Math.random();
time=time*1000;
setTimeout(function(){
createdTime=Date.now();
if (Math.random()>0.5) {
document.getElementById("box").style.borderRadius="100px"
} else {
document.getElementById("box").style.borderRadius="0"
}
var top=Math.random();
top=top*300
var left=Math.random();
left=left*300
document.getElementById("box").style.top=top+"px";
document.getElementById("box").style.left=left+"px";
document.getElementById("box").style.backgroundColor=getRandomColor();
document.getElementById("box").style.display="block"
},time);
}
document.getElementById("box").onclick =function() {
clickedTime=Date.now();
reactionTime=(clickedTime-createdTime)/10;
reactionTime=Math.round(reactionTime);
reactionTime=reactionTime/100
document.getElementById("resulte").innerHTML =reactionTime;
this.style.display="none";
makeBox();
}
makeBox();
}
Tanks for helping me.
Here is MartinCothweis answer as a snippet.. Like I say it's not harder than using a Fiddle but much better in the long run..
If Martin copies this, and you can then accept his answer.
Simplest would be to count the clicks and after user clicks five times end the game. Instead of the alert you can create a nice message with average response time. jsfiddle.net/8mp0tckg/5 Good job though.
var clicked = 0
document.getElementById("start").onclick = function() {
function getRandomColor() {
var letters='0123456789ABCDEF'.split('');
var color='#';
for (var i=0; i <6; i++ ) {
color += letters[Math.round(Math.random()*15)];
}
return color;
}
var time; var createdTime; var clickTime; var reactionTime;
function makeBox() {
time=Math.random();
time=time*1000;
setTimeout(function(){
createdTime=Date.now();
if (Math.random()>0.5) {
document.getElementById("box").style.borderRadius="100px"
} else {
document.getElementById("box").style.borderRadius="0"
}
var top=Math.random();
top=top*300
var left=Math.random();
left=left*300
document.getElementById("box").style.top=top+"px";
document.getElementById("box").style.left=left+"px";
document.getElementById("box").style.backgroundColor=getRandomColor();
document.getElementById("box").style.display="block"
},time);
}
document.getElementById("box").onclick =function() {
clickedTime=Date.now();
reactionTime=(clickedTime-createdTime)/10;
reactionTime=Math.round(reactionTime);
reactionTime=reactionTime/100
document.getElementById("resulte").innerHTML =reactionTime;
this.style.display="none";
clicked++
if (clicked >= 5) {
alert('good game!')
} else {
makeBox();
}
}
makeBox();
}
body {
font-family: Verdana, Geneva, sans-serif;
padding: 8px;
background-color: #FAEEC6;
}
#box {
width: 20px;
height: 20px;
background-color: red;
display: none;
position: relative;
}
#text {
font-size: 3.5em;
margin: 30px;
padding: 40px;
}
#bold {
font-weight: bold;
<h1>Test your reaction!</h1>
<p>click on boxes and circles as quickly as you can!</p>
<button id="start"><b>start !</b></button>
<p id="bold">Your time: <span id="resulte">0</span>s</p>
<div id="box"></div>
Almost finished this sort of game i am working on to learn Dom manipulation. Basically the game spawns 5 images on the left and 4 on the right, you click the odd one out and then 10 spawn on the left and 9 on the right(+5 everytime).
I am wanting my nextlevel function to work every time the last child(of theLeftSide) is clicked on. It works the first time but after that regardless of if i click the correct node or not, my gameOver function is called and im not sure why. I tried removing the game over function and still the 2nd time i want my nextLevel to run(after click), it doesnt. Am i going about this the totally wrong way? Any input is appreciated thank you. Left my gameOver function in so you can see what im trying to do with it.
var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
var facesNeeded = 5;
var totalfFaces = 0;
var theBody = document.getElementsByTagName("body")[0];
function makeFaces() {
while (facesNeeded != totalfFaces) {
smiley = document.createElement("img");
smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
smiley.style.top = Math.random() * 401 + "px";
smiley.style.left = Math.random() * 401 + "px";
document.getElementById("leftside").appendChild(smiley);
totalfFaces++;
// alert(totalfFaces); used to debug
}
if (facesNeeded == totalfFaces) {
//alert(facesNeeded);
//alert(totalfFaces);
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
document.getElementById("rightside").appendChild(leftSideImages);
//alert("hi");
}
}
makeFaces();
function delFaces(side) {
while (side.firstChild) {
side.removeChild(side.firstChild);
}
}
theLeftSide.lastChild.onclick = function nextLevel(event) {
event.stopPropagation();
delFaces(theRightSide);
delFaces(theLeftSide);
totalfFaces = 0;
facesNeeded += 5;
//alert(facesNeeded);
//alert(totalfFaces);
makeFaces();
};
theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#rightside {
left: 500px;
border-left: 1px solid black;
}
</style>
</head>
<body>
<h1> Matching Game</h1>
<p>Click on the extra smiling face on the left</p>
<div id="leftside"></div>
<div id="rightside"></div>
<script src="script3.js"></script>
</body>
</html>
You just need to move the onclick inside the makeFaces after the while, so its added everytime after it creates them all:-
var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
var facesNeeded = 5;
var totalfFaces = 0;
var theBody = document.getElementsByTagName("body")[0];
function makeFaces() {
while (facesNeeded != totalfFaces) {
smiley = document.createElement("img");
smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
smiley.style.top = Math.random() * 401 + "px";
smiley.style.left = Math.random() * 401 + "px";
document.getElementById("leftside").appendChild(smiley);
totalfFaces++;
// alert(totalfFaces); used to debug
}
if (facesNeeded == totalfFaces) {
//alert(facesNeeded);
//alert(totalfFaces);
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
document.getElementById("rightside").appendChild(leftSideImages);
//alert("hi");
}
theLeftSide.lastChild.onclick = function nextLevel(event) {
event.stopPropagation();
delFaces(theRightSide);
delFaces(theLeftSide);
totalfFaces = 0;
facesNeeded += 5;
//alert(facesNeeded);
//alert(totalfFaces);
makeFaces();
};
}
makeFaces();
function delFaces(side) {
while (side.firstChild) {
side.removeChild(side.firstChild);
}
}
theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#rightside {
left: 500px;
border-left: 1px solid black;
}
</style>
</head>
<body>
<h1> Matching Game</h1>
<p>Click on the extra smiling face on the left</p>
<div id="leftside"></div>
<div id="rightside"></div>
<script src="script3.js"></script>
</body>
</html>
how would I make a loading bar, I would also like it to be "stackable" like have 2 on the same page and have the first one trigger the second one when its complete then the second one redirects to a URL at 100%, this may or may not be basic to you guys but its really hard for me. I have an outdated JavaScript one already but it disappears when I add the second one and don't know how to make it trigger the second one. if you want to try and edit the one I have so It triggers the second one and is stackable then just say so, but note its outdated, I know that, I am using it because it is really simple to configure and setup.
This is the relevant code so far:
var currentAdb = 0;
var imgCtb = 25;
function cycleb() {
var output = '[';
for (var i = 0; i < imgCtb; i++) {
output += i > currentAdb ? ' ' : '/';
}
output += ']';
document.getElementById('adLinkb').innerHTML = output;
++currentAdb;
if(currentAdb == imgCtb) {
window.clearInterval(myInterval);
}
}
var myInterval = window.setInterval(cycleb, 500);
#adLinkb {
font-size: 12px;
color: #000;
font-family: monospace;
}
<div id="adLinkb"></div>
OK, let's expand the code I gave you in the last question by grouping it into functions and introducing callbacks:
function buildBar(id, callback) {
var currentAdb = 0;
var imgCtb = 25;
function cycleb() {
var output = '[';
for (var i = 0; i < imgCtb; i++) {
output += i > currentAdb ? ' ' : '/';
}
output += ']';
document.getElementById(id).innerHTML = output;
++currentAdb;
if (currentAdb == imgCtb) {
window.clearInterval(myInterval);
if (typeof callback == 'function') {
callback();
}
}
}
var myInterval = window.setInterval(cycleb, 500);
}
function callback1() {
buildBar('adLinkb2', callback2);
}
function callback2() {
//window.location... stuff here
alert('redirect should go here');
}
buildBar('adLinkb', callback1);
#adLinkb,
#adLinkb2 {
font-size: 12px;
color: #000;
font-family: monospace;
}
<div id="adLinkb"></div>
<div id="adLinkb2"></div>
I cannot figure out why if/else statements are not executing properly. The code only runs through the if(i===1) loop but thats it. I'm doing a simple exercise wherein I check the number submitted and see if the users gets hotter or colder to a preset number.
<html>
<head>
<title>Test</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var checkNum = Math.floor(Math.random() * 10);
alert("Random number is" + checkNum);
var i = 0;
var scopedVal;
var submitVal;
var hotCheck = function (submitVal) {
if(i === 1) {
alert("try again");
scopedVal = submitVal;
alert("scopedVal is" + scopedVal);
} else {
if(abs(scopedVal - checkNum) > abs(submitVal - checkNum)) {
alert("Hotter");
scopedVal = submitVal;
} else {
alert("colder");
scopedVal = submitVal;
}
}
};
$('.subm').on('click', function () {
i++;
alert(" i is" + i);
alert("button pressed");
submitVal = $(this).closest('#outsideContainer').find('.num').val();
if(submitVal === checkNum) {
alert("You got it");
} else {
hotCheck(submitVal);
}
});
});
</script>
<style>
body {
width: 900px;
color: white;
margin: auto;
}
#outsideContainer {
width: 400px;
color: grey;
margin: auto;
position: relative;
}
</style>
</head>
<body>
<div id="outsideContainer">
<form>
<input type="text" name="text" class="num">
<br/>
</form>
<div id="buttonSubm">
<button class="subm">Submit</button>
<div></div>
</body>
</html>
I'm assuming this is a simple fix and it is driving me nuts.
If you want to run the "else" code as well as the "if" code remove the else statement:
var hotCheck = function(submitVal){
if(i===1){
console.log("try again");
scopedVal = submitVal;
console.log("scopedVal is " + scopedVal);
};
if(Math.abs(scopedVal-checkNum)> Math.abs(submitVal - checkNum)){
console.log("Hotter");
scopedVal = submitVal;
} else {
console.log("colder");
scopedVal = submitVal;
};
};
Demo:
http://jsfiddle.net/hHC88/
You also needed to change abs. to Math.abs
The abs() method does not exist. You're dealing with all integers so you can probably just remove it or fully reference it Math.abs()
You have to replace the
if( abs(scopedVal-checkNum)> abs(submitVal - checkNum)){
to
if( Math.abs(scopedVal-checkNum) > Math.abs(submitVal - checkNum)){
abs() is a method to Math.
Try this
i have tried it within the loop function but it says the function isn't being used so i put it outside still doesnt work and i dont know how to fix it as i thought that would work, rmember first day on javascript, thanks for the help in advance and please no jquery.
<html>
<head>
<style type="text/css">
#PictureContainer {
height: 300px;
width: 500px;
margin: 0 auto;
overflow: hidden;
display: inline-block;
}
#SliderWrapper {
width: 628px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
#image {
height: 300px;
width: 500px;
}
#Next {
float: right;
}
#Before {
float: left;
}
</style>
</head>
<body>
<div id="SliderWrapper">
<img id="Next" src="Forward.png" alt="Forward">
<img id="Before" src="Back.png" alt="Back">
<div id="PictureContainer">
<img id="image" src="html.png" alt="HTML">
</div>
</div>
<script language="javascript" type="text/javascript">
var i = 1;
function loop() {
i = i+1;
if(i == 5){
i = 1;
}
if (i == 1) {
document.getElementById('image').src = "html.png";
} else if(i == 2) {
document.getElementById('image').src = "css3.png";
} else if (i == 3) {
document.getElementById('image').src = "WebdevLogo's.jpg";
} else {
document.getElementById('image').src = "WebdevLogo's.jpg";
}
}
var pictureloop = setInterval(loop, 3000);
function Forward() {
if(i == 5) {
i = 1;
} else {
i = i+1;
}
}
function Back() {
if(i == 1) {
i = 4;
} else {
i = -1;
}
}
</script>
</body>
</html>
You have a function called loop, but you never call it, so it's never changing the source attribute of the image. In the forward and back functions, add a call to the loop function at the end. There are also a few problems internally with Back() that I've fixed.
function Forward() {
if(i == 5) {
i = 1;
} else {
i++;
}
loop();
}
function Back() {
if(i == 1) {
i = 5;
} else {
i--;
}
loop();
}
Within the loop() function, consider using a switch block instead of all those else ifs. Also in the loop function, use the increment operator - i++; - which increases the value by 1, rather than the manual statement i = i+1; Also, the if i==5 statement is redundant. You already have it in your Forward function.
this is more of a question for https://codereview.stackexchange.com/ but here are a few things that would make this code cleaner.
instead of duplicating image setting code, declare an array of images.
var images = ['img1.png','img2.png'];
var currentImage = 0;
function forward() {
currentImage++;
if (currentImage > images.length-1) currentImage == 0;
setImage()
}
function setImage() {
document.getElementById('image').src = images[currentImage];
}
setInterval(forward, 5000);