I want to create a JavaScript clock based on TimeAPI.org.
The reason is I want to make sure the client-side has the exact the same time as the server.
In svclock(json) it saves year/month/day/hour/...etc in vars
but when I'm trying to put those vars in setHours in my clock fucnction
the clock's format becomes like this:
1391670641381:1391670761381:1391670727381
instead of 15:27:06.
Is there an easier way to do this?
<html>
<head>
<script>
var svtime,svyear,svmonth,svdate,svday,svhour,svmin,svsec,newtime;
function svclock(json) {
svtime=new Date(json.dateString);
svyear=String(svtime).substr(11,4);
svmonth=String(svtime).substr(4,3);
svdate=String(svtime).substr(8,2);
svday=String(svtime).substr(0,3);
svhour=String(svtime).substr(16,2);
svmin=String(svtime).substr(19,2);
svsec=String(svtime).substr(22,2);
newtime=svhour+':'+svmin+':'+svsec;
//newtime=svyear+'/'+svmonth+'/'+svdate+'('+svday+')'+' '+svhour+':'+svmin+':'+svsec;
}
function startTime()
{
var today=new Date();
var h=today.setHours(svhour);
var m=today.setMinutes(svmin);
var s=today.setSeconds(svsec);
document.getElementById('clock').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},1000);
}
</script>
<script type="text/javascript" src="http://timeapi.org/gmt/now.json?callback=svclock"></script>
</head>
<body onload="startTime()">
<div id="clock"></div>
</body>
</html>
Related
This is for a class I'm taking. Its homework out of the book for a particular chapter. The book provides some code that is purposly not working and you have to fix it. I've got it all working exept for this part where youre supposed to get some text to show up at the bottom of the screen that displays the last time the document was modified.
Ive gone over it repeatably and cant find whats wrong. Im wondering if the book has it wrong.
<head>
<script type="text/javascript">
function CopyRight() {
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
</script>
</head>
<body>
<div id="xxx"></div>
</body>
The mistakes are in your program
Missing closing curly } brace.
Not invoking the function CopyRight()
Inside CopyRight() not getting the xxx element to work on this.
Script should be invoked when the dom is ready (so placed script after xxx tag)
Correct version of your program is
<html>
<head>
</head>
<body>
<div id="xxx"></div>
<script type="text/javascript">
function CopyRight() {
var xxx = document.getElementById('xxx'); //mistake 3
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
} //mistake 1
CopyRight(); //mistake 2
</script>
</body>
</html>
This is the working one. The code works fine but you forgot to call the CopyRight function.
<head>
<script type="text/javascript">
function CopyRight() {
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
xxx.innerHTML = "<p style='font-size:8pt;'>The URL of this document is "+document.URL+"<br />Copyright Frank's Fix-t Hardware. This document was last modified "+lastModDate+".</p>"
}
CopyRight(); // Call Copyright function
</script>
</head>
<body>
<div id="xxx"></div>
</body>
I use flip clock JS for count up but when i reload the page time start from zero
how could i save time like this
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter'
});
});
Here's one possible solution:
Consider that it will not reset days value at the end of the month.
But if you want you can set it to "autoStart: false" and "setInterval"...
$(document).ready(function() {
var date = new Date(),
days = date.getDate()*60*60*24,
hours = date.getHours()*60*60,
minutes = date.getMinutes()*60,
sec = date.getSeconds(),
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter'
});
clock.setTime(days+hours+minutes+sec);
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css">
</head>
<body>
<div class="clock"></div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>
</body>
</html>
playground
Why prototype function is not called .. when image is clicket?
Html Code :--
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<script type="text/javascript" src="tt.js"></script>
</head>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<input type="image" src="http://t2.gstatic.com/images?q=tbn:ANd9GcSTcJA5J-LOj0HOP1ZMzdSQIsxwuguFdtlesHqzU15W8TXx232pFg" onclick="myFunction('Info clicked')"/>
<script>
var a = new myFunction();
document.getElementById("demo").innerHTML = a.k;
</script>
</body>
</html>
java script :--
function myFunction(l) {
this.k = "hello";
alert(this.k);
var t = this.temp(l);
alert(t);
}
myFunction.prototype.temp = function(a)
{
alert(a);
return 10;
}
If i put inside html page body it works :--
<script>
var a = new myFunction();
document.getElementById("demo").innerHTML = a.k;
</script>
Because you are calling this.temp() on the constructor function and not on an instance of it.
You need to create an instance with new.
new myFunction('Info clicked')
Note that this doesn't make sense. If you want to do things when the constructor runs, you should assign the methods to the constructor and not the prototype.
If you want to stick to your javascript definition, all you need to do to solve this problem is to change the attribute onClick on your html code to new myFunction("...");
<input type="image" src="http://..." onclick="new myFunction('Info clicked')"/>
So I have made a clock, it works great. Now I want to move the javascript into an external file and link to it with
<SCRIPT type="text/javascript" language="JavaScript" src="clock.js"
</SCRIPT>
I can not figure out how to keep it updating though. I have tried a few things and the results where: time is static at when the page loads, the prints across the screen for every update, and no time at all.
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
Here's how I would do it. Put this code in your external js file:
function startTime() {
var today=new Date(),
h=today.getHours(),
m=today.getMinutes(),
s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
}
function checkTime(i) {
if (i<10) {
i="0" + i;
}
return i;
}
And then in your main html page, something like this:
<body onload="setInterval(startTime, 500);">
You're missing ending >
<SCRIPT type="text/javascript" language="JavaScript" src="clock.js">
so it should be
<SCRIPT type="text/javascript" language="JavaScript" src="clock.js">
</SCRIPT>
I am trying to create a javascript quiz, that gets the questions from a xml file. At the moment I am only starting out trying to parse my xml file without any success. Can anyone point me to what I am doing wrong?
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<div class="spmArr">
</div>
<script type="text/javascript">
var quizXML = '<quiz><Sporsmal tekst="bla bla bla"/><alternativer><tekst>bla</tekst><tekst>bli</tekst><tekst correct="yes">ble</tekst></alternativer><Sporsmal tekst="More blah"/><alternativer><tekst>bla bla</tekst><tekst correct="yes">bli bli</tekst><tekst>ble ble</tekst></alternativer></quiz>'
var quizDOM = $.xmlDOM( quizXML );
quizDOM.find('quiz > Sporsmal').each(function() {
var sporsmalTekst = $(this).attr('tekst');
var qDiv = $("<div />")
.addClass("item")
.addClass("sporsmal")
.appendTo($(".spmArr"));
var sTekst = $("<h2/>")
.html(sporsmalTekst)
.appendTo(qDiv);
});
</script>
</body>
</html>
When I try this in my browser the classes and div are not being created. And the page is just blank. Am i doing something wrong when I intialize the xml?
edited to add prototype.js and close function
Looks like you're forgetting to close your .each call. append ); after the statement for sTekst and your call will parse correctly.