HTML and CSS Reference
In-Depth Information
<div id="time">
<span id="hours"></span><span id="colon1">:</span>
<span id="min"></span><span id="colon2">:</span>
<span id="sec"></span>
</div>
</div>
<br />
<center>
<input id="Send" type="button" value="Send Time to Server" />
<br /><br />
<img src="Images/HTML5.png" width="125" height="125" />
</center>
</form>
</body>
</html>
Notice the markup shown in bold. The
<html>
tag contains a
manifest
attribute that points to the
Clock.cachemanifest
file. You need to add the
manifest
attribute in all the web forms (or MVC views) that
are part of the offline application.
Also notice that the
<head>
section contains references to
StyleSheet.css
and the jQuery library. There
is also a
<script>
block that contains the jQuery code responsible for displaying the clock (the code isn't
shown in the listing for the sake of clarity). The
<body>
section uses
Ads.js
to display advertisements,
followed by markup to display the clock. Recollect that the
CACHE
section of the
Clock.cachemanifest
ile
contains all these style sheet, script, and image files.
The remaining markup from the
<body>
section includes a few
<span>
elements that render hours,
minutes, and seconds. The clock is displayed using the jQuery code shown in Listing 8-6.
Listing 8-6.
jQuery Code that Displays the Clock
$(document).ready(function () {
if (!Modernizr.applicationcache) {
alert("This browser doesn't support HTML5 Offline Applications!");
}
var months = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October",
"November", "December" ];
var days= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
var today = new Date();
today.setDate(today.getDate());
$('#date').html(days[today.getDay()] + " " + today.getDate() + ' ' +
months[today.getMonth()] + ' ' + today.getFullYear());
setInterval(function () {
var seconds = new Date().getSeconds();
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);
setInterval( function() {
var minutes = new Date().getMinutes();
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
