|
JavaScript - Looking For Help On A Javascript Project
Building an inventory of financial models. 500-1000 small models. Need a few more programmers for launch.
Similar TutorialsIn college i need to make a website, i have chosen to do one about gaming. One of the tools i want to add in about javascirpt is how to get a Xbox360 Gamercard to be in a corner off the website and updates when new achievements are earned. I understand i need to be able to connect to xbox.com to get details on the gamertag but i am new to the javascript language. Has anyone done a script for anything like this or know where i can find one. Ive tried googling etc for one and tried it for myself but i aint getting no where, let alone know if what ive tried scripting even exsists.
A. Start. B. Display a prompt dialog box and store the user's input in UI. B1. Store UI acquired from a prompt dialog box. B2. Parse UI as a Base-10 integer and assign it to variable TV. C. Initialize the HITS counter to zero. D. Initialize the DD variable to the value of TV. E. While DD is greater than zero, repeat the following steps: E1. Test if the TV is evenly divisible by DD (that is if the remainder of TV/DD equals zero). If so, increment HITS by 1. E2. Decrement DD by 1. F. Display results within an HTML paragraph the browser's document window as seen in the Sample OUTPUT. F1. The string UI. F2. The string " is" F3. If HITS is greater than 2, then display the string " not" F4. The string " a prime number." G. End. This is what i have so far: <script type="text/javascript"> var UI=prompt("Enter a whole number to test as a prime number:"); var TV=parseint(UI); int HITS (0); int DD (tv); I am in a basic computer science class. I have to do a simple javascript project, but some of the code isn't working. The popup works, but the button does not appear, and I cannot get my rollover image to appear. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<h1>Money</h1>
<script>
function checkAGE(){if (!confirm
("Are you sure you want to enter? (<-- You can say whatever you want.)"))
history.go(-1);return " "}
document.writeln(checkAGE())
</script>
<script type="text/javascript">
<p>If you want to make Green, then you need to see Green!</p>
<FORM>
<INPUT type="button" value="Change to Green!" name="button3" onClick="document.bgColor='green'"> <br>
</FORM>
Rollimage = new Array()
Rollimage[0]= new Image(121,153)
Rollimage[0].src = "http://news-libraries.mit.edu/blog/wp-content/uploads/2008/01/money.jpg"
Rollimage[1] = new Image(121,153)
Rollimage[1].src = "http://encefalus.com/wp-content/uploads/2008/09/resources_money.jpg"
function SwapOut(){
document.Rupert.src = Rollimage[1].src;
return true;
}
function SwapBack(){
document.Rupert.src = Rollimage[0].src;
return true;
}
// - stop hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P align="center">
<A HREF="http://www.joemaller.com/"
onmouseover="SwapOut()"
onmouseout="SwapBack()">
<IMG SRC="joe_open.jpg"
NAME="Rupert"
WIDTH=121
HEIGHT=153
BORDER=0>
</A>
</P>
</body>
</html>
So I feel like I should just explain what I am looking to do. Lets say there is an Item that has the number 001234-A1. This Number is the exact number that the manufacturer lists it is, however whenever it gets placed into other catalogs or websites the item number changes slightly for example:
12-34a1
0001234A1
1-234-A1
123-4a1
So what I would like to have someone show me how to do it write a script that can do three things
Remove all leading zero's
Remove all hyphens
Make all letters uppercase.
This way we now have a normalized number (1234A1). So to recap I need to create a string that takes any different numbers, normalizes those numbers, and then matches them with all other matching numbers. I really would appreciate some assistance in this. Thank You, Thank You Hello all i am working on a project. i would like to know how to remove the scroll bars , and how to align the captcha/webpage that loads in the iframe. <title>Test Raid Page</title> <script language="JavaScript" type="text/javascript"> <!--Begining of Java Script- function buildiframesA() { var rlink = prompt('Enter Raid ID:',""); var a = document.createElement("iframe"); a.setAttribute("width","330"); a.setAttribute("scrolling=no"); a.setAttribute('******', 'ifrm1'); document.body.appendChild(a); a.setAttribute('src', "http://*****.******/joinraid.php?raidid=" + rlink + "&suid=******&serverid=2"); } </script> Anything with "************" has been removed due to privacy i added this code in a.setAttribute("scrolling=no"); and it disables the whole script but, in dreamweaver shows it is fine, when i load to debug and click group a to load the frame nothing happens, ive tried many ways to disable the scroll bars and cant figure a way out. There is more to the script this is just my test for the iframe, what i have is groups, all accounts are grouped in groups, when a group is clicked, i am prompt with Enter raid ID, i enter the raid ID and the frames for how ever many people in that group load, on those pages that load in the iframe is a raid page with a captcha to join the raid, the captcha shows automatically in the frame but it is not perfectly aligned as i want it to be. I use dreamweaver and can debug in my browser, any help is appericiated, i can also post pictures as to what i am talking about. EDIT: i also forgot to say i am new to javascript, i know html and php very well.. MrGato =D I have a javascript program I'm trying to write for an introductory javascript class. The book is absolutely terrible and I've found I have a very weak grasp of how javascript functions work but I have an exam coming up and I'm getting desperate for help so I'm posting here hoping someone can help me get my head wrapped around this thing. The code is a simplified game of 21. It should randomly generate two cards for the dealer and two for the player, then display the total to the player and allow them to choose whether or not to take another card. It then decides who won. I'm including the script below: Code: <script type="text/javascript">
/*Declare Variables*/
var dealer = 0;
var player = 0;
var dealerPoints = 0;
var playerPoints = 0;
var rNum = 0;
var rPlayer1 = 0;
var rPlayer2 = 0;
var rDealer1 = 0;
var rDealer2 = 0;
var hitMe = " ";
function playGame()
{
while((playerPoints < 200) && (dealerPoints < 200))
{
/*Generate 2 random numbers between 2 and 11 for the player*/
rPlayer1 = Math.floor((Math.random() * 10 + 2))
rPlayer2 = Math.floor((Math.random() * 10 + 2))
rDealer1 = Math.floor((Math.random() * 10 + 2))
rDealer2 = Math.floor((Math.random() * 10 + 2))
/* Find Players Total*/
player = (rPlayer1 + rPlayer2);
/* Find Dealers Total*/
dealer = (rDealer1 + rDealer2);
/*Display player total*/
while ((player <= 21) && (dealer <= 21))
{
hitme = prompt("You drew a " + rPlayer1 + " card and a " + rPlayer2 + " card for a total of " + player + ". Do you want another card?");
if (hitMe == "yes")
{
rPlayer1 = Math.floor((Math.random() * 10 + 2));
player = (player + rPlayer1);
alert("You drew a " + rPlayer1 + " card for a total of " + player + ".");
}
if ((player <= 21) && (dealer > 21))
{
playerPoints = (playerPoints + player);
alert("Player Wins Hand");
}
if ((dealer <= 21) && (player > 21))
{
dealerPoints = (dealerPoints + dealer);
alert("Dealer Wins Hand");
}
if ((dealer > 21) && (player > 21))
alert("Tie, no points awarded");
}
if ((dealer <= 21) && (player <= 21))
{
if (dealer > player)
{
dealerPoints = (dealerPoints + dealer);
alert("Player total: " + playerPoints + ". Dealer points: " + dealerPoints + ". Dealer wins this hand.");
}
else if (player > dealer)
{
playerPoints = (playerPoints + player);
alert("Player total: " + playerPoints + ". Dealer points: " + dealerPoints + ". Player wins this hand!");
}
else
{
alert("Player total: " + playerPoints + ". Dealer points: " + dealerPoints + ". No one wins this hand.");
}
if (playerPoints >= 200)
{
alert("Player wins game!");
}
else if (dealerPoints >= 200)
{
alert("Dealer wins game!");
}
}
}
}
</script>
Hey, I have a drop down box that selects a project name. This is then taken to a javascript function that is supposed to fill in a read-only box with that name, but instead of filling it in with the project name, it fills it in with the project ID, which is how the sql database is set up. Each project has an ID, a name, and other values. Is there a way I can get the project name given the project ID in the javascript function?
Hi Peers, i have a Drop down list with 10 choices (skillset). users must choose one skillset and the corresponding level (beginer/intermediate/master). ( they have to do this 10 times for all the sillsets) what i want is : 1 - i need to show up only one record (dropdowanlist) with level then have a button to add new skill and level if required 2- then when they choose the 1st skill from the dropdown , this one will not show up on the 2nd choice dropdown. is it possible any help ? thanks guys I have to simulate a carnival wheel that has a similar layout to roulette in that the numbers range form 0-36 with the even numbers colored red and the odd numbers colored black. The page needs to have a button that "spins" the wheel (generates a random number) when you click the button. The results of the spin needs to be displayed in a text box and the background of the page needs to change to black if the # is odd and change to red if the # is even. I desperately need guidance with this so I would appreciate any help. I really have no background with JavaScript so I'm pretty much doing this blindly. Please help. I'm working on a project (not for anyone in particular) called JSget. It's a JS framework that makes "getting" HTML elements in javascript easier. It's similar in function to jQuery, but it has a very different interface. Unlike jQuery, I use more javascript-like methods of getting elements, while jQuery gets elements based on parsed strings. I'm off to a good start but this project is no where closed to finished. The JSget script can be found here and I've created a testing page that utilizes some of its features here. I'm looking for collaborators who meet the following criteria:
Enthusiatic about the project. Someone who likes the idea and is willing to put effort into it.
An experienced coder in Javascript. You don't need to be an expert, but I'm not looking for beginners.
Someone who doesn't just want to rewrite my code, but is interested on building on it.
Also, please understand that I am a snob when it comes to "clean" code. I run everything I write through "JSLint". So, if you're interested, please reply to this thread or contact me by email at jazzo@jazzothegreat.com If your not completely interested, don't reply out of pity. Thanks, Jazzo I'm doing a correspondence course on javascript, but the terminology is giving me up-hill and after hour of battling, my Javascript was just a mess. could someone help me with the javascript function. My instruction reads: "Create a web page with 5 text boxes. Assign to each text box's value attribute a value of zero. Add to each of the text boxes an onchange event handler that calls a function named calcAvg() and passes to the function the value of that text box by referencing it's document object, form name, and name and value attributes. Within the calcAvg() function, pass the five parameters to another function, named performCalc(), and assign the returned value to a variable named calcResult, then place the returned value in to another text box with a name averageResult. In the performCalc() function, calculate the average of the five numbers (by adding the five numbers and then dividing the total by 5), then return the result to the calcAvg() function. When you preform the calculation, use the parseInt() function to insure that the passes values are calculated as numbers." Please assist be as kind as to assist me with this project so I can use it as reference to the following projects that follow on the foundation of this one... My code so far; Code: <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Calculate average</title>
<script type="text/javascript">
/*<![CDATA[*/
/*]]<*/
</script>
</head>
<body>
<h1>Calculating averages</h1>
<table>
<tr>
<td>
<tr>
<td>Value 1<br/></td>
<td>
<input type="text" name="valueOne" size="6" value="0" onchange="calcAvg()" /></td>
</tr>
<tr>
<td>Value 2<br/></td>
<td>
<input type="text" name="valueTwo" size="6" value="0" onchange="calcAvg()" /></td>
</tr>
<tr>
<td>Value 3<br/></td>
<td>
<input type="text" name="valueThree" size="6" value="0" onchange="calcAvg()"/></td>
</tr>
<tr>
<td>Value 4<br/></td>
<td>
<input type="text" name="valuefour" size="6" value="0" onchange="calcAvg()"/></td>
</tr>
<tr>
<td>Value 5</td><br/>
<td>
<input type="text" name="valueFive" size="6" value="0" onchange="calcAvg()"/></td>
</tr>
</td>
</tr>
</table>
<form action="" name="averageResult" >
<p>The average of the 5 numbers:
<input type="text" name="cost" size="5" value="0"
style="border-style: none; border-color:inherit; border-width:medium; background-color: Transparent" text="0"/></p>
</form>
</body>
</html>
i am having a problem passing variables from a php file to a html file using a javascript funtion. here is the code i have. Code: /////////InteractiveMap.HTML////////////////////////////////////////////////////
<script type="text/javascript">
// This function is called when a building is clicked.
function buildingClick(id,name,desc)
{
var mywin;
var isOpen = false;
var searchInt;
var passVal;
passVal = desc;
mywin = window.location.href = "informationPage.html";
searchInt = setInterval(function(){if(isOpen){var display=mywin.document.getElementById("infoArea");
display.value = passVal;}});}
///////////////////////////////////////////////////////////////////
////////////InformationPage.html///////////////////////////////
<script type="text/javascript">
window.onload = function(){window.opener.window["isOpen"] = true;};
</script>
<textarea disabled id="infoArea"></textarea>
//////////////////////////////////////////////////////
I am just tryin to display the variable desc in the textarea "infoArea" but it wont work.Any help would be appreciated. eoin I'm researching a possible web project. The project will allow users to create and run JS online, similar to JSFiddle, Construct 2 and GameSalad. At this stage I'm just looking to gather general information. So my first question is, just how big of a project would that be? what web technologies would be needed? Would Node.Js be needed? or would PHP be ok for the backend? Thanks for any advice. I am having some difficulty with this project. It is supposed to be an animation of falling leaves. I am very new to arrays and JavaScript, so right off the bat I know that the arrays I have are not right, or are missing something else in order for it to function. Basically all I have for this project is a still picture of the leaves and that is it. If there is someone out there with some JavaScript expertise, could you tell me what I am doing wrong? Here is the code so far, I think it is too long. Code: <script type="text/javascript">
/* <![CDATA[ */
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="images/leaf1.gif";
Image1=new Image();
Image1.src=grphcs[1]="images/leaf2.gif";
Image2=new Image();
Image2.src=grphcs[2]="images/leaf3.gif";
Image3=new Image();
Image3.src=grphcs[3]="images/leaf4.gif";
Image4=new Image();
Image4.src=grphcs[4]="images/leaf5.gif";
Image5=new Image();
Image5.src=grphcs[5]="images/leaf6.gif";
var minSpeed = 5;
var maxSpeed = 30;
var randomSpeed = 5;
var randomSpeed2 = 10;
var randomSpeed3 = 15;
var randomSpeed4 = 20;
var randomSpeed5 = 25;
var randomSpeed6 = 30;
var minHorizontal = 200;
var maxHorizontal = screen.availWidth - 300;
var leftPosition = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
var leftPosition2 = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
var leftPosition3 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal +1)) + minHorizontal);
var leftPosition4 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var leftPosition5 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var leftPosition6 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var minVertical = 50;
var maxVertical = screen.availHeight - 300;
var topPosition = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition2 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition3 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition4 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition5 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition6 = Math.floor(Math.rnadom() * (maxVertical -
(minVertical + 1)) + minVertical);
function matchLeaf() {
if (navigator.appName == "Microsoft Internet Explorer") {
widthMax = document.documentElement.clientWidth;
heightMax = document.documentElement.clientHeight;
}
else {
widthMax = window.innerwidth - 14;
heightMax = window.innerHeight;
}
autumnFall();
}
function autumnFall();
var fallingLeaf1 = document.getElementById("leaf1");
fallingLeaf1.style.left = leftPosition + "px";
fallingLeaf1.style.top = topPosition + "px";
fallingLeaf1.style.visibility = "visible";
topPosition += parseInt(randomspeed);
leftPosition += 0;
if (topPosition >= screen.availHeight - 300) {
topPosition = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
leaf1.src = "images/leaf" + Math.floor(Math.random() * 6 +
".gif";
randomSpeed = Math.floor(Math.random() * maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf2 = document.getElementById("leaf2");
fallingLeaf2.style.left = leftPosition2 + "px";
fallingLeaf2.style.top = topPosition2 + "px";
fallingLeaf2.style.visibility = "visible";
topPosition2 += parseInt(randomSpeed3);
leftPosition2 += 0;
if (topPosition2 >= screenavailHeight - 300) {
topPosition2 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition2 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf2.src = "images/leaf" + Math.floor(Math.random() * 6)
+ "gif";
randomSpeed2 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf3 = document.getElementById("leaf3");
fallingLeaf3.style.left = leftPosition3 + "px";
fallingLeaf3.style.top = topPosition3 + "px";
fallingLeaf3.stye.visibility = "visible";
topPosition3 += parseInt(randomSpeed3);
leftPosition3 += 0;
if (topPosition3 >= screen.availHeight - 300) {
topPosition3 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition3 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf3.src = "images/leaf" + Math.floor(Math.random() * 6
+ "gif";
randomSpeed3 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf4 = document.getElementById("leaf4");
fallingLeaf4.style.left = leftPosition4 + "px";
fallingLeaf4.style.top = topPosition4 + "px";
fallingLeaf4.style.visibility = "visible";
topPosition4 += parseInt(randomSpeed4);
leftPosition4 += 0;
if (topPosition4 >= screen.availHeight - 300) {
topPosition4 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition4 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf4.src = "images/leaf" + Math.floor(Math.random() * 6
+ "gif";
randomSpeed4 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf5 = document.getElementById("leaf5");
fallingLeaf5.style.left = leftPosition5 + "px";
fallingLeaf5.style.top = topPosition5 + "px";
fallingLeaf5.style.visibility = "visible";
topPosition5= parseInt(randomSpeed5);
leftPosition5 += 0;
if (topPosition5 >= screen.availHeight - 300) {
topPosition5 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition5 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf5.src = "images/leaf + Math.floor(Math.random() * 6 +
"gif";
randomSpeed5 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf6 = document.getElementById("leaf6");
fallingLeaf6.style.left = leftPosition6 + "px";
fallingLeaf6.style.top = topPosition6 + "px";
fallingLeaf6.style.visibility = "visible";
topPosition6 = parseInt(randomSpeed6);
leftPosition6 += 0;
if (topPosition6 >= screen.availHeight - 300) {
topPosition6 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition6 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf6.src = "images/leaf + Math.floor(Math.random() * 6 +
"gif";
randomSpeed6 = Math.floor(math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
}
/* ]]> */
</script>
</head>
<body onload="setInterval('matchLeaf()', 100);">
<img id="leaf1" src="images/leaf1.gif" alt="leafone"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf2" src="images/leaf2.gif" alt="leaftwo"
style="position:absolute; left:100px; top:100px;" />
<img id ="leaf3" src="images/leaf3.gif" alt="leafthree"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf4" src="images/leaf4.gif" alt="leaffour"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf5" src="images/leaf5.gif" alt="leaffive"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf6" src="images/leaf6.gif" alt="leafsix"
style="position:absolute; left:100px; top:100px;" />
Hello, I'm learning JavaScript and have a problem with a world clock. I followed a tutorial and then added some buttons and variables to make the clock below (see code A), but it only works off the host computer's time and I need it to work off GMT. I found some code (see code B) to get GMT but cannot find a way to tie it to my first chunk of code. Any ideas? Thanks in advance. Code A: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jamie's World Clock</title>
<script language="javascript">
<!-- // Comment out with HTML if JavaScript unavailable
// Variable for a time zone
var timeZone = 0;
// Variable for location
var geoLoc = "London";
// Set location using child node
function setLocation() {
document.getElementById("location").firstChild.nodeValue = geoLoc;
}
function updateClock ( )
{
// GET THE TIME
// Get current time from user's machine
var currentTime = new Date ( );
// Retrieve hours, minutes and seconds from new variable 'curretTime'
var localHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
// FORMAT THE TIME
// Add a leading zero to mins and secs if less than 10
/* From tutorial: The ? and : symbols used above comprise the ternary operator.
This is a special operator that returns the value before the colon if the
condition before the query (?) is true, or the value after the colon if the
condition is false. It's a great way to write an if block in shorthand,
provided you only need to return a single value. */
// Put more simply: If x = less than 10 use 0 + currentMinutes else currentMinutes
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Variable for current hours
var currentHours = localHours + timeZone;
// Prevents negative time values eg 1.00am London = 8.00pm New York, not -4.00am
currentHours = (currentHours < 0 ? ((currentHours - 12) + 36) : currentHours);
// Ensures cannot go to 13.xx.xx PM+ and returns to AM
currentHours = ((timeZone + localHours) > 24 ? currentHours = (currentHours - 24) : currentHours);
// timeOfDay: If currentHours less than 12 = AM else PM
var timeOfDay = ( currentHours < 12 ) ? " AM" : " PM";
// 12 hour clock: If currentHours greater than 12 then -12 else currentHours
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
// 12 hour clock: If currentHours = 0 then 12 else currentHours
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
// Put it all together in one variable
var currentTimeString = currentHours +":" + currentMinutes + ":" + currentSeconds + timeOfDay;
// DISPLAYING THE CLOCK
// Create the following span container: <span id="clock"> </span>...
// see HTML below script
/* From tutorial: By placing the inside the span element, we're creating
a child text node for the span in the DOM. We can then populate the container
with our time string by retrieving this child text node then setting its
nodeValue property, as follows:
*/
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
} // End function updateClock
// New York function
function changeZone() {
updateClock(); // Run updateClock function to get immediate change rather than waiting for <body> setInterval
document.getElementById("location").firstChild.nodeValue = geoLoc; // Change geoLoc variable using child node
alert ("Your time zone has been set to " + geoLoc + "."); // Alert the user to the change of time zone
}
// --> end HTML comment
</script>
</head>
<!-- Runs updateClock function on body load and repeats every second -->
<body onLoad="setLocation(); updateClock(); setInterval('updateClock()', 1000 )">
<!-- Runs updateClock function on body load and repeats every second -->
<span id="clock"> </span><br />
<p>Your current time zone is <span id="location"> </span>.</p>
<button onclick="timeZone = -5; geoLoc = 'New York'; changeZone()">New York</button><br />
<button onclick="timeZone = 0; geoLoc = 'London'; changeZone()">London</button><br />
<button onclick="timeZone = 4; geoLoc = 'Dubai'; changeZone()">Dubai</button><br />
<button onclick="timeZone = 8; geoLoc = 'Beijing'; changeZone()">Beijing</button><br />
<button onclick="timeZone = 11; geoLoc = 'Sydney'; changeZone()">Sydney</button><br />
</body>
</html>
Code B: Code: function getTime(zone, success) {
var url = 'http://json-time.appspot.com/time.json?tz=' + zone,
ud = 'json' + (+new Date());
window[ud]= function(o){
success && success(new Date(o.datetime));
};
document.getElementsByTagName('head')[0].appendChild((function(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = url + '&callback=' + ud;
return s;
})());
}
getTime('GMT', function(time){
// This is where you do whatever you want with the time:
alert(time);
});
I found a tutorial to create the HTML5 flip book. I combined three Edge "projects" with the HTML5 flip book. http://www.schrene.web44.net/Easter-2012/Book-A.html I tried to adjust the z-index so that the butterfly would fly out of the book but nothing I tried worked.. Also I wanted the animations to start with each flip of the page... I tried but I don't know enough javaScript to figure it out.... So I created a "cheesy" work around... A very large div on the right side of the page that has the animations in a mouse out event. Here is the page flip js: Code:
(function() {
// Dimensions of the whole book
var BOOK_WIDTH = 880;
var BOOK_HEIGHT = 460;
// Dimensions of one page in the book
var PAGE_WIDTH = 428;
var PAGE_HEIGHT = 450;
// Vertical spacing between the top edge of the book and the papers
var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
// The canvas size equals to the book dimensions + this padding
var CANVAS_PADDING = 30;
var page = 0;
var canvas = document.getElementById( "pageflip-canvas" );
var context = canvas.getContext( "2d" );
var mouse = { x: 0, y: 0 };
var flips = [];
var book = document.getElementById( "book" );
// List of all the page elements in the DOM
var pages = book.getElementsByTagName( "section" );
// Organize the depth of our pages and create the flip definitions
for( var i = 0, len = pages.length; i < len; i++ ) {
pages[i].style.zIndex = len - i;
flips.push( {
// Current progress of the flip (left -1 to right +1)
progress: 1,
// The target value towards which progress is always moving
target: 1,
// The page DOM element related to this flip
page: pages[i],
// True while the page is being dragged
dragging: false
} );
}
// Resize the canvas to match the book size
canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );
// Offset the canvas so that it's padding is evenly spread around the book
canvas.style.top = -CANVAS_PADDING + "px";
canvas.style.left = -CANVAS_PADDING + "px";
// Render the page flip 60 times a second
setInterval( render, 1000 / 60 );
document.addEventListener( "mousemove", mouseMoveHandler, true );
document.addEventListener( "mousedown", mouseDownHandler, true );
document.addEventListener( "mouseup", mouseUpHandler, false );
function mouseMoveHandler( event ) {
// Offset mouse position so that the top of the spine is 0,0
mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
mouse.y = event.clientY - book.offsetTop;
}
function mouseDownHandler( event ) {
// Make sure the mouse pointer is inside of the book
if (Math.abs(mouse.x) < PAGE_WIDTH) {
if (mouse.x < 0 && (page - 1) >= 0) {
// We are on the left side, drag the previous page
flips[page - 1].dragging = true;
selPage=page-1;
}
else if (mouse.x > 0 && (page + 1) < flips.length) {
// We are on the right side, drag the current page
flips[page].dragging = true;
selPage=page;
}
}
// Prevents the text selection
event.preventDefault();
}
function mouseUpHandler( event ) {
for( var i = 0; i < flips.length; i++ ) {
// If this flip was being dragged, animate to its destination
if( flips[i].dragging ) {
// Figure out which page we should navigate to
if( mouse.x < 0 ) {
flips[i].target = -1;
if (selPage == page) page = Math.min( page + 1, flips.length );
}
else {
flips[i].target = 1;
if (selPage != page ) page = Math.max( page - 1, 0 );
}
}
flips[i].dragging = false;
}
}
function render() {
context.clearRect( 0, 0, canvas.width, canvas.height );
for (var i = 0; i < flips.length; i++) {
var flip = flips[i];
if( flip.dragging ) {
flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
}
flip.progress += ( flip.target - flip.progress ) * 0.2;
// If the flip is being dragged or is somewhere in the middle of the book, render it
if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
drawFlip( flip );
}
}
}
function drawFlip( flip ) {
// Strength of the fold is strongest in the middle of the book
var strength = 1 - Math.abs( flip.progress );
if (strength < 0.01) strength=0.01;
// Width of the folded paper
var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
// X position of the folded paper
var foldX = PAGE_WIDTH * flip.progress + foldWidth;
// How far the page should outdent vertically due to perspective
var verticalOutdent = 20 * strength;
// The maximum width of the left and right side shadows
var paperShadowWidth = ( PAGE_WIDTH ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
var rightShadowWidth = ( PAGE_WIDTH ) * Math.max( Math.min( strength, 0.5 ), 0 );
var leftShadowWidth = ( PAGE_WIDTH ) * Math.max( Math.min( strength, 0.5 ), 0 );
// Change page element width to match the x position of the fold
flip.page.style.width = Math.max(foldX, 0) + "px";
context.save();
context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
// Draw a sharp shadow on the left side of the page
context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
context.lineWidth = 30 * strength;
context.beginPath();
context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
context.stroke();
// Right side drop shadow
var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);
rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');
context.fillStyle = rightShadowGradient;
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX + rightShadowWidth, 0);
context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
context.lineTo(foldX, PAGE_HEIGHT);
context.fill();
// Left side drop shadow
var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');
context.fillStyle = leftShadowGradient;
context.beginPath();
context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
context.lineTo(foldX - foldWidth, 0);
context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
context.fill();
// Gradient applied to the folded paper (highlights & shadows)
var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
foldGradient.addColorStop(0.35, '#fafafa');
foldGradient.addColorStop(0.73, '#eeeeee');
foldGradient.addColorStop(0.9, '#fafafa');
foldGradient.addColorStop(1.0, '#e2e2e2');
context.fillStyle = foldGradient;
context.strokeStyle = 'rgba(0,0,0,0.06)';
context.lineWidth = 0.5;
// Draw the folded piece of paper
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX, PAGE_HEIGHT);
context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
context.lineTo(foldX - foldWidth, -verticalOutdent);
context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
context.fill();
context.stroke();
context.restore();
}
})();
Here is the js for activating the Edge animations: Code: <script>
function playAnim1(){
var comp = $.Edge.getComposition("page1");
var stage = comp.getStage();
stage.play("play1");
}
$(document).ready(function(){
setTimeout(playAnim1, 1000);
});
function playAnim2(){
var comp = $.Edge.getComposition("page2");
var stage = comp.getStage();
stage.play("play2");
}
$(document).ready(function(){
setTimeout(playAnim2, 1000);
});
function playAnim3(){
var comp = $.Edge.getComposition("page3");
var stage = comp.getStage();
stage.play("play3");
}
$(document).ready(function(){
setTimeout(playAnim3, 1000);
});
</script>
Not sure if the things I want to accomplish with this are even possible??? If anybody has any help or advice I would greatly appreciate it. I'm new to programming in general and have had trouble deciding on a good starter project. I've decided to start with something that is (hopefully) pretty simple. I have about a dozen boxes full of vinyl records and would like to write a program to catalogue everything alphabetically by artist using prompts to ask for Album Title, Artist Title, and year. My question at this point is, is JavaScript a good way to do this? I have a fundamental knowledge of HTML, CSS, JavaScript and Ruby. I assumed JS would be the best way (that I know at this point) to do this project, but if I'm wrong, would love to hear it. What I don't understand at this point is how to output the information to a text file, or how to set up an interface to run the scripts. Any advice is very much appreciated. I'm doing this project for class and I got to a point where i am stuck and need some help on how to move forward, I don't want straight up answers but some advice or some code to get me started would be much appreciated. Thanks. This is what i need to do with what I have While a smart casino owner knows better than to allow negative bankrolls, most casinos are not above extending personal loans to gamblers who are down on their luck. Augment your slots.html page so that it has capabilities for extending loans to the player when they run out of money. Your page should have an additional text box keeping track of the player's debt (initially $0). Instead of just alerting the player when they try to play with no money, the page should give the user the option to obtain a loan. Use a select box for this with options for a $1, $5, $10, or $20 loan. The loan should only be available when the user is out of money, so you will need to initially set the disable attribute of the select box to "true" in order to disable it (see the snippet below for a starting point). When the user runs out of money, you can enable the select box by setting this attribute to "false". And this is what I have... Code: <html>
<!-- This page simulates a slot machine. -->
<!-- ================================================= -->
<head>
<title> Online Slots </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
bankroll=20;
bankroll=parseFloat(bankroll);
loanctr=0;
loanctr=parseFloat(loanctr);
function DoSpin()
// Assumes: the page contains an image (slot1)
// Results: displays a random spin as the slot1 image
{
if (bankroll == 0) { alert ("You have no money left. Consider taking out a loan.");
}
else {
var pick;
pick = RandomOneOf(["cherry.jpg", "lemon.jpg", "bar.jpg", "donut.jpg"]);
document.getElementById('slot1').src = "http://dave-reed.com/book/Images/" + pick;
var picktwo;
picktwo = RandomOneOf(["cherry.jpg", "lemon.jpg", "bar.jpg", "donut.jpg"]);
document.getElementById('slot2').src = "http://dave-reed.com/book/Images/" + picktwo;
var pickthree;
pickthree = RandomOneOf(["cherry.jpg", "lemon.jpg", "bar.jpg", "donut.jpg"]);
document.getElementById('slot3').src = "http://dave-reed.com/book/Images/" + pickthree;
if (pick == picktwo && pick == pickthree) {
alert ("Winner!");
bankroll = bankroll + 1; }
else { bankroll = bankroll - 1; }
}
}
</script>
</head>
<body>
<div style="text-align:center">
<img id="slot1" alt="slot image" border=2
src="http://dave-reed.com/book/Images/cherry.jpg" />
<img id="slot2" alt="slot image" border=2
src="http://dave-reed.com/book/Images/cherry.jpg" />
<img id="slot3" alt="slot image" border=2
src="http://dave-reed.com/book/Images/cherry.jpg" />
<br /><br />
<input type="button" value="Click to Spin" onclick="DoSpin();
document.getElementById('earnings').value = bankroll;" />
<br /><br />
<input type = "text" id= "earnings" size = "10" value= "" onfocus="blur();"/>
<br /><br />
Take out a loan of
<select id="loan" disabled="true" onchange="document.getElementById('loan').value = loanctr;">
<option selected="selected" value=""></option>
<option value="1">1</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
dollars.
<br /><br />
<input type = "text" id= "loan" size = "10" value= "" onfocus="blur();"/>
</div>
</body>
</html>
|
|||||||