|
JavaScript - Simple Javascript Help! Display A Greeting With A Persons Name And The Time Of Day
When the site loads up, invite the user to enter their name and then display a message at the top of the document which will say< good morning, evening, or afternoon >, based on the time they access your site, welcome to <insert the name of your site>
This is the question how do i do it?? Similar TutorialsI am trying to make a simple calculator to calculate dBm, Vpp, Vrms. It is basically a conversion calculator. I am brand new to JavaScript and tried to follow a tutorial but I'm coming up short. I will post both my .js and .html code below. My issue is that when I hit the "Calculate" button nothing happens. Here is the javascript. It has a main calculate function and a function that gives me a log base 10 method. Code: //Main Calculation
function calculate() {
if(dBm === null && Vpp === null){
var calc = document.getElementById('ecalc');
var Vpp2 = (4*Vrms)/Math.sqrt(2);
var dBm2 = 20 * (log10(Vpp/(Math.sqrt(0.008*Z))));
var Vrms2 = Vrms;
return false;
}
else if(Vpp === null && Vrms === null){
var calc = document.getElementById('ecalc');
var Vpp2 = Math.sqrt(0.008*Z)*Math.pow(10,(dBm/20));
var Vrms2 = (Math.sqrt(2)/2)*(Vpp/2);
var dBm2 = dBm;
return false;
}
else if(dBm === null && Vrms === null){
var calc = document.getElementById('ecalc');
var dBm2 = 20 * (log10(Vpp/(Math.sqrt(0.008*Z))));
var Vrms2 = (Math.sqrt(2)/2)*(Vpp/2);
var Vpp2 = Vpp;
return false;
}
calc.Vpp2.value = Vpp2;
calc.Vrms2.value = Vrms2;
calc.dBm2.value = dBm2;
return false;
}
//Log base 10 Function
function log10(val) {
return Math.log(val) / Math.log(10);
}
Here is the HTML. It has the form in it. As you can see there are 4 inputs. Z is required and only one of the other values can be entered (hence the if statements in the js. 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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 1</title> <script type="text/javascript" src="Calculate.js"> </script> </head> <body> <form id="ecalc" action="#"> <table align="center"border="1"> <tr> <td colspan="2" align="center"> Enter a Z value and one other value. </td> </tr> <tr> <td align="right">dBm: </td> <td align="left"><input type="text" name="dBm" size="20" /></td> </tr> <tr> <td align="right">Vpp: </td> <td align="left"><input type="text" name="Vpp" size="20" /></td> </tr> <tr> <td align="right">Vrms: </td> <td align="left"><input type="text" name="Vrms" size="20" /></td> </tr> <tr> <td align="right">Z (Ohms): </td> <td align="left"><input type="text" name="Z" size="20" value="50" /></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="Calculate" onclick= "calculate();" /> </td> </tr> <tr> <td align="right">dBm:</td> <td alig="left"><input type="text" name="dBm2" size="20" readonly="readonly" /></td> </tr> <tr> <td align="right">Vpp:</td> <td alig="left"> <input type="text" name="Vpp2" size="20" readonly="readonly" /></td> </tr> <tr> <td align="right">Vrms:</td> <td alig="left"> <input type="text" name="Vrms2" size="20" readonly="readonly" /></td> </tr> </table> </form> </body> </html> There is probably something simple that needs to be fixed but I have spent a whole day trying to figure this out. If anyone has any comments please let me know. Thanks in advance! 1 down vote favorite I do have the countdown script (see link below) to display the time between current time and the date given in real-time. However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time. I want to be able to set up my own start time and end time. Here is what I have: http://jsfiddle.net/BgEtE/ thank you for help hi all, im looking for a script that does the following when the page loads "text1" is displayed. then on the next line 2 seconds later "text2" is displayed and test1 is still displayed. and i need this to go to 5 lines so the final project should look like --- text1 text2 text3 text4 text5 thanks Pretty simple, I just want to display a <div> after say 20 seconds or any predefined value. Ideally with jQuery
Hey guys. So I've been learning PHP and MySQLi for the past few weeks and it's going brilliantly! I intend to start learning JS over the Xmas holidays, but right now I only have a very basic knowledge of it. I was just wondering if someone could point me in the right direction on how to do this, as I think i should be pretty easy. After someone changes something in the admin area [e.g. the position of an item] I want to be able to have a small div display at the top of the screen saying something like "Position Updated!" and then have it fade away after 2-3 seconds. Just wondering if there's a fairly easy way to do this, or would I have to go get something like MooTools, etc.? Thanks a lot! I was trying to display time of last visit along with login name.. can someone help me on this pls? Hi! First post here! Would really appreciate some help on a javascript that would display the time elapsed since a particular visitor last visited my webpage, using cookies. So basically it should show something like: "You last visited my page 2 days & 12 mins ago!" I've a little background in java but none in javascript... Thanks so much! Hi, I want to display my listings like they do he http://www.ticketnetwork.com/performers/concerts/a.aspx The code on my end calling the third party service looks like this: <script language="javascript" type="text/javascript"> document.write('<script language="javascript" src="http://###########.com/?bid='+####+'&sitenumber='+#+'&tid=event_names&pcatid=2&showcats=true&title=Concerts Tickets"></' + 'script>'); </script> How do I make it only display one letter at a time? I believe some variation on the sort method might work... How can I draw a cookie where number of chocolate chips represents the number of seconds and the number of bites represents the number of minutes. I want to show the passage of time on a clock that looks like items are being added to the display according to the number of seconds and minutes. Maybe using a mouse input aswell! Please guide.:confused: I use the Processing Software I have this code which converts Fahrenheit to Celsius. Now, I have to have a counter that displays the amount of times I have made a conversion. I have no clue how to do this. This is the initial code:
Code: <html>
<head>
<script type="text/javascript">
/* Converts given centigrade in one text box to farenheit in another */
function convert1 () {
document.getElementById("output").value =
document.getElementById("input").value*1.8+32;
}
</script>
</head>
<body>
<p>Then enter the input and view the output</p>
<input type="text" size="15" id="input">
<input type="button" value=" ==> " onclick="convert1()">
<input type="text" size="15" id="output">
</body> </html>
I don't know how to approach this so I tried different things.... Code: tml>
<head>
<script type="text/javascript">
/* Converts given centigrade in one text box to farenheit in another */
function convert1 () {
document.getElementById("output").value =
document.getElementById("input").value*1.8+32;
}
function counter()
{
if (function convert1().onclick==true)
{count++;}
}
</script>
</head>
<body>
<p>Then enter the input and view the output</p>
<input type="text" size="15" id="input">
<input type="button" value=" ==> " onclick="convert1()">
<input type="text" size="15" id="output">
</body> </html>
but then I did some research and it said I couldn't do that.... so I tried this: Code: <html>
<head>
<script type="text/javascript">
/* Converts given centigrade in one text box to farenheit in another */
var count=0;
function documentClick()
{
document.getElementById('clicked').value = ++clickCount
}
document.onclick = documentClick;
function convert1 () {
document.getElementById("output").value =
document.getElementById("input").value*1.8+32;
}
</script>
</head>
<body>
<p>Then enter the input and view the output</p>
<input type="text" size="15" id="input">
<input type="button" value=" ==> " onclick="convert1()">
<input type="text" size="15" id="output">
</body> </html>
I think this last code is correct, the problem I have now is that I don't know how to call it to just display as text under the buttons and conversions. I'm looking for some way to display it like ("you have made"+ count+ "conversions");. No boxes or buttons, just text and I don't know how to call for this after the </script>, inside the body. I am new at all this and would appreciate any help. Thanks. It should look like this. My question is twofold. First, is there a way to have a javascript file display an externally hosted image when opened with a browser? I mean such a way where the URL of the javascript file can be referenced by an html document and display an image? Furthermore, is there a way to have this be a different image depending on the time of day and timezone of the user, specifically one image in the morning and a different image in the evening? I apologize if I posted this in the wrong section, but I wasn't sure where else this could go. Hello I am trying to do something similar to this post http://www.codingforums.com/showthread.php?t=168903 except I need it to be dependent on the hour and minute. Background: I am trying to create a schedule website, the schedule has say 20 items and I want it to display the current "active" event in the schedule, 1 previous event and 3 future events so a total of 5 items from the schedule. An event can range from 30 minutes to 2 hours long, so simply using the above code will not work. It needs to take the minutes into consideration as well. Let me know if you have additional questions. EDIT: 17-Mar-12 @ 12:37PM I would rather not use a bunch of if statements. (http://www.codingforums.com/showthread.php?t=250358) The schedule could change mid day so having to go through and edit a bunch of if statements would not be ideal I imagine this would be very simple for someone who knows javascript. I want to have three fields. First field is "posted speed limit", second field is "actual speed" and third field will be the output field. All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however. So, 5 miles over the speed limit would be $100 (minimum value) 15 miles over the speed limit would be $150 (add a zero) 35 miles over the speed limit would be $350. etc. I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean I want to make a javascript clock (using Server time and not user computer time). After searching I have found the code on http://www.elated.com/articles/creat...ascript-clock/ The Code is: PHP 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" xml:lang="en" lang="en"> <head> <style type="text/css"> #clock { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; color: white; background-color: black; border: 2px solid purple; padding: 4px; } </style> <script type="text/javascript"> <!-- function init ( ) { timeDisplay = document.createTextNode ( "" ); document.getElementById("clock").appendChild ( timeDisplay ); } function updateClock ( ) { var currentTime = new Date ( ); var currentHours = currentTime.getHours ( ); var currentMinutes = currentTime.getMinutes ( ); var currentSeconds = currentTime.getSeconds ( ); // Pad the minutes and seconds with leading zeros, if required currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes; currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds; // Choose either "AM" or "PM" as appropriate var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM"; // Convert the hours component to 12-hour format if needed currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours; // Convert an hours component of "0" to "12" currentHours = ( currentHours == 0 ) ? 12 : currentHours; // Compose the string for display var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay; // Update the time display document.getElementById("clock").firstChild.nodeValue = currentTimeString; } // --> </script> </head> <body onload="updateClock(); setInterval('updateClock()', 1000 )"> <div> <span id="clock"> </span> </div> </body> </html> The problem is that it (the code above) is using the users computer time. (I found (in the comments of http://www.elated.com/articles/creat...ascript-clock/) that I should use: PHP Code: var currentTime = [serverValue goes here]; But I don't really know what should I put in the "serverValue goes here" ..... ) So how can I make this code to use the server time (and not the users time)? Any Suggestion Will Be Helpfull Hi All, i want to achieve an effect like the following, please help 1. i want to get the current time, possibility no from client computer ( sometimes their time is wrong)? i dont know whether can achieve but if cannot, then never mind, just get from client computer. 2. for example now is 1:25 am, i want to generate dynamically every half an hour timing from 2 am(round up) till for example 11 am something like <select> <option>2:00</option> <option>2:30</option> ................ <option>11:00</option> </select> for me this is a bit complicated, anybody can help me? <option>3:00</option> I am trying to set up a web that new times will be displayed when they add current times to a form. here is the static HTML <form method="POST" > current time is 11:32 AM</p> <p>add <input type="text" name="T1" size="5" value="20"> mins and the new time time would be <b> 11:52 AM</b></p> <p>add another<input type="text" name="T2" size="5" value="15"> mins and the time then changes to <b>12:07 PM</b></p> <p><input type="submit" value="Submit" name="B1"></p> <p><input type="reset" value="Reset" name="B2"></p> </form> I would like to have the new times to change dynamically as they type in either (or both) input boxes Hello, I was given an assignment to change an existing form into one that will automatically perform calculations and since I have never done this before I am learning as I go. The form needs to do the following: gr_percentage = list_percentage + sale_percentage gr_comm_dollars = gr_percentage * price list_comm_dollars = list_percentage * price and so on. I also need to calculate the following gr_total_dollars = gr_comm_dollars + gr_fixed_dollars + gr_bonus_dollars (all of which will be calculated on entries for the sale and list portions). I though that I had it figured out but upon testing the form it does nothing. Please let me know what I need to change in order for the calculations to work properly. Thank you Code: <script type="text/javascript">
function calculate(Id)
{
var price = document.getElementById('price').value;
var REO_list_percentage = document.getElementById('REO_list.percentage').value;
var REO_sale_percentage = document.getElementById('REO_sale_percentage').value;
var REO_sale_dollars = document.getElementById('REO_sale_dollars').value
var REO_list_dollars = document.getElementById('REO_list_dollars').value
var REO_sale_bonus_dollars = document.getElementById('REO_sale_bonus_dollars').value;
var REO_list_bonus_dollars = document.getElementById('REO_list_bonus_dollars').value;
var REO_sale_fixed_dollars = document.getElementById('REO_sale_fixed_dollars').value;
var REO_list_fixed_dollars = document.getElementById('REO_list_fixed_dollars').value;
var gr_comm_dollars = document.getElementById('gr_comm_dollars').value;
var gr_bonus_dollars = document.getElementById('gr_bonus_dollars').value;
var gr_fixed_dollars = document.getElementById('gr_fixed_dollars').value;
document.getElementById('gr_comm_percentage').value=REO_list_percentage + REO_sale_percentage;
document.getElementById('gr_comm_dollars').value=gr_comm_percentage/100*price;
document.getElementById('reo_list_dollars').value=REO_list_percentage/100*price;
document.getElementById('reo_sale_dollars').value=REO_sale_percentage/100*price;
document.getElementById('gr_fixed_dollars').value=REO_sale_fixed_dollars + REO_list_fixed_dollars;
document.getElementById('gr_bonus_dollars').value=REO_sale_bonus_dollars + REO_list_bonus_dollars;
document.getElementById('gr_total_dollars').value=gr_comm_dollars + gr_fixed_dollars + gr_bonus_dollars;
document.getElementById('REO_sale_total_dollars').value = REO_sale_comm_dollars + REO_sale_fixed_dollars + reo_sale_bonus_dollars;
document.getElementById('REO_list_total_dollars').value = REO_list_comm_dollars + REO_list_fixed_dollars + reo_list_bonus_dollars;
gr_comm_dollars = isNAN(gr_comm_dollars)?0:parseFloat(gr_comm_dollars,10);
gr_fixed_dollars = isNAN(gr_fixed_dollars)?0:parseFloat(gr_fixed_dollars,10);
gr_bonus_dollars = isNAN(gr_bonus_dollars)?0:parseFloat(gr_bonus_dollars,10);
}
</script>
</head>
//here is the form
<tr >
<td><cfoutput><cfif #form.list_type# IS 1 OR #form.list_type# IS 2><b>*</b></cfif></cfoutput><b>Sold Price</b> </td>
<td><input type="text" id="price" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_comm_dollars','REO_sale_dollars','REO_list_dollars')" /></td>
</tr>
<tr><td colspan="2"><b>Commission Information</b>
</td>
</tr>
<!---Form headings--->
<tr><td> </td>
<td colspan="2" align="center"><b>Main Commission</b></td>
<td align="center"><b>Fixed</b></td>
<td align="center"><b>Bonus/<br />Other</b></td>
<td align="center"><b>Total</b></td>
</tr>
<tr>
<td> </td>
<td><b>%</b></td>
<td><b>$</b></td>
<td><b>$</b></td>
<td><b>$</b></td>
<td><b>$</b></td>
</tr>
<!---End form headings--->
<tr><td><b>*</b>Gross Comm</td>
<td><input type="Text" id="gr_comm_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate ('gr_comm_dollars')" > </td>
<td><input type="text" id="gr_comm_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_total_dollars')"> </td>
<td><input type="text" id="gr_fixed_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate ('gr_total_dollars')"> </td>
<td><input type="text" id="gr_bonus_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"onchange="calculate('gr_total_dollars')"> </td>
<td><input type="text" name="gr_total_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
</tr>
<tr>
<cfoutput>
<cfif #form.list_type# IS 2>
<td><b>*</b>REO List </td><!---Comp. Dollar--->
<td><input type="Text" id="REO_list_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_commission_percentage','REO_list_dollars')"> </td>
<td><input type="text" id="REO_list_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td>
<td><input type="text" id="REO_list_fixed_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td>
<td><input type="text" id="REO_list_bonus_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_list_total_dollars')"> </td>
<td><input type="text" id="REO_list_total_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
<!---List type 1 begins here--->
<cfelseif #form.list_type# IS 1 ><td><b>*</b>Amt Pd to O/B</td>
<td><input type="Text" name="OB_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td>
<td>$<input type="text" name="OB_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" > </td>
<cfelse><td>Amt Pd to O/B</td>
<td><input type="Text" name="OB_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td>
<td>$<input type="text" name="OB_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
</cfif>
</cfoutput>
</tr>
<tr>
<cfoutput>
<cfif #form.list_type# IS 2>
<td><b>*</b>REO Sale </td><!---Comp. Dollar--->
<td><input type="Text" id="REO_sale_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate('gr_commission_percentage','REO_sale_dollars')"> </td>
<td><input type="text" id="REO_sale_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')" > </td>
<td><input type="text" id="REO_sale_fixed_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')"> </td>
<td><input type="text" id="REO_sale_bonus_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'" onchange="calculate ('REO_sale_total_dollars')"> </td>
<td><input type="text" id="REO_sale_total_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
<cfelse><td><b>*</b>REO Gross</td>
<td><input type="Text" name="comp_percentage" size="1" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'">% </td>
<td>$<input type="text" name="comp_dollars" size="8" class="TextBox" onfocus="this.className='TextBoxSelected';select()" onblur="this.className='TextBox'"> </td>
</cfif>
</cfoutput>
</tr>
<tr>
Hi I hope I hit the topic I have a problem in java script i need it for an online game that I develop but not as I do not go javasript countdown or can help me I need a timer that counts down and ceases to move to the other side but not when Refresh to go back and allow you to set time thanks in advance
I cannot get my JavaScript code to work. Does anyone know what I am doing wrong with the following code: <html> <head> <title>Welcome</title> </head> <body> <h1>Welcome to my Web Page</h1> <script type="text/javascript"> /* <![CDATA[ */ var dateObject = new Date(); var greeting = ""; var curTime = ""; var minuteValue = dateObject.getMinutes(); var hourValue = dateObject.getHours(); if (minuteValue < 10) minuteValue = "0" + minuteValue; if(hourValue < 12) { greeting = "<p>Good morning! " curTime = hourValue + ":" + minuteValue + " AM"; } else if (hourValue == 12) { greeting = "<p>Good afternoon! "; + minute Value + " PM"; } else if (hourValue == 17) { greeting = "<p>Good afternoon!" cutTime = (hourValue-12) + ":" + minuteValue + " PM" } else { greeting = "<p>Good evening! " curTime = (hourValue-12) + ":" + minuteValue + " PM" } var dayArray = newArray("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); var monthArray = newArray("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); var day = dateObject.getDay(); var month = dateObject.getMonth(); document.write("<p>"+ greeting + "It is " + curTime + " on " + dayArray[day] + ", " + monthArray[month] + " " + dateObject.getDate() + ", " + dateObject.getFullYear() + ".</p>"); /* ]]> */ </script> </body> </html> ~xhtml205 I have this code on my invisionfree forum that is suppose to change a layout from 6 AM - 6 PM but it isn't working. Here is the code Code: <script language="javascript">
/* script created by Chandler @ http://s4.invisionfree.com/digitalized <-- a great site for skins codes and support! */
now = new Date();
itime = now.getHours();
function TSkinChange() {
if (itime >= 19) {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://hatchingyourdragons.com/daynocturne.css">');
}
if (itime <= 6) {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://hatchingyourdragons.com/nightnocturne.css">');
}}
TSkinChange();
</script>
Thanks in advance |
|||||||