HTML5-JS-Rhino

///////////////////////////////////////////

introduction html5
html4>5

xml(1998)/css/(1966)
xhr()1999)
a,jax(2004)

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and, if need be, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such as Inkscape.

All major modern web browsers—including Mozilla Firefox, Internet Explorer 9 and 10, Google Chrome, Opera, and Safari—have at least some degree of support for SVG and can render the markup directly.

The SVG 1.1 specification defines 14 functional areas or feature sets:^[12]

Paths

Simple or compound shape outlines are drawn with curved or straight lines that can be filled in, outlined, or used as a clipping path. Paths have a compact coding. For example M (for 'move to') precedes initial numeric x and y coordinates and L (line to) precedes a point to which a line should be drawn. Further command letters (C, S, Q, Tand A) precede data that is used to draw various Bézier and elliptical curves. Z is used to close a path. In all cases, absolute coordinates follow capital letter commands and relative coordinates are used after the equivalent lower-case letters.^[27]

Basic shapes

Straight-line paths and paths made up of a series of connected straight-line segments (polylines), as well as closed polygons, circles and ellipses can be drawn. Rectangles and round-cornered rectangles are also standard elements.^[28]

Text

Unicode character text included in an SVG file is expressed as XML character data. Many visual effects are possible, and the SVG specification automatically handles bidirectional text (for composing a combination of English and Arabic text, for example), vertical text (as Chinese was historically written) and characters along a curved path (such as the text around the edge of the Great Seal of the United States).^[29]

Painting

SVG shapes can be filled and/or outlined (painted with a color, a gradient, or a pattern). Fills can be opaque or have any degree of transparency. "Markers" are line-end features, such as arrowheads, or symbols that can appear at the vertices of a polygon.^[30]

Color

Colors can be applied to all visible SVG elements, either directly or via 'fill', 'stroke,' and other properties. Colors are specified in the same way as in CSS2, i.e. using names like black or blue, in hexadecimal such as #2f0 or #22ff00, in decimal like rgb(255,255,127), or as percentages of the form rgb(100%,100%,50%).^[31]

Gradients and patterns

SVG shapes can be filled or outlined with solid colors as above, or with color gradients or with repeating patterns. Color gradients can be linear or radial (circular), and can involve any number of colors as well as repeats. Opacity gradients can also be specified. Patterns are based on predefined raster or vector graphic objects, which can be repeated in x and/or y directions. Gradients and patterns can be animated and scripted.^[32]

Since 2008, there has been discussion^[33][34] among professional users of SVG that either gradient meshes or preferably diffusion curves could usefully be added to the SVG specification. It is said that a "simple representation [using diffusion curves] is capable of representing even very subtle shading effects"^[35] and that "Diffusion curve images are comparable both in quality and coding efficiency with gradient meshes, but are simpler to create (according to several artists who have used both tools), and can be captured from bitmaps fully automatically."^[36]

Clipping, masking and compositing

Graphic elements, including text, paths, basic shapes and combinations of these, can be used as outlines to define both 'inside' and 'outside' regions that can be painted (with colors, gradients and patterns) independently. Fully opaque clipping paths and semi-transparent masks are composited together to calculate the color and opacity of every pixel of the final image, using alpha blending.^[37]

Filter effects^[38]

Main article: SVG filter effects

Interactivity

SVG images can interact with users in many ways. In addition to hyperlinks as mentioned below, any part of an SVG image can be made receptive to user interface eventssuch as changes in focus, mouse clicks, scrolling or zooming the image and other pointer, keyboard and document events. Event handlers may start, stop or alter animations as well as trigger scripts in response to such events.^[39]

Linking

SVG images can contain hyperlinks to other documents, using XLink. URLs of SVG images can specify geometrical transforms in the fragment section.^[40]

Scripting

All aspects of an SVG document can be accessed and manipulated using scripts in a similar way to HTML. The default scripting language is ECMAScript (closely related toJavaScript) and there are defined Document Object Model (DOM) objects for every SVG element and attribute. Scripts are enclosed in <script> elements. They can run in response to pointer events, keyboard events and document events as required.^[41]

Animation

SVG content can be animated using the built-in animation elements such as <animate>, <animateMotion> and <animateColor>. Content can be animated by manipulating the DOM using ECMAScript and the scripting language's built-in timers. SVG animation has been designed to be compatible with current and future versions ofSynchronized Multimedia Integration Language (SMIL). Animations can be continuous, they can loop and repeat, and they can respond to user events, as mentioned above.^[42]

Fonts

As with HTML and CSS, text in SVG may reference external font files, such as system fonts. If the required font files do not exist on the machine where the SVG file is rendered, the text may not appear as intended. To overcome this limitation, text can be displayed in an 'SVG font', where the required glyphs are defined in SVG as a font that is then referenced from the <text> element.^[43]

Metadata

In accord with the W3C's Semantic Web initiative, SVG allows authors to provide metadata about SVG content. The main facility is the <metadata> element, where the document can be described using Dublin Core metadata properties (e.g., title, creator/author, subject, description, etc). Other metadata schemas may also be used. In addition, SVG defines <title> and <desc> elements where authors may also provide plain-text descriptive material within an SVG image to help indexing, searching and retrieval by a number of means.^[44]

An SVG document can define components including shapes, gradients etc., and use them repeatedly. SVG images can also contain raster graphics, such as PNG and JPEGimages, and further SVG images.

[edit]SVG on the web

Google announced on 31 August 2010 that it had started to index SVG content on the web, whether it is in standalone files or embedded in HTML, and that users would begin to see such content listed among their search results.^[45] It was announced on 8 December 2010 that Google Image Search would also begin indexing SVG files.^[46] On 28 January 2011, it was discovered that Google was allowing Image Search results to be restricted exclusively to SVG files.^[47] This feature was announced officially on 11 February 2011.^[48]

[edit]Example

This code will show you a rectangle:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>

svg(web vector graphics) 
-scalable vector graphics
rectagle
<rect x,y width/.....
......id and css class 
html likes for drawing
mozilla download center-- a map of the wolr the svg map-
benjamin joffes
population demo
think about data visualizations
-------------------------------------recordings -----------ur. data bases

bespin (created by mozilla)

again a data visualization for svg and canvas by the german elections

it supports all the modern -------svg web / java script base

SVG web


SVG is the future so is the main requirment for obtaining a minimal understanding of 



canvas and svg (they are


html 5 video
application cashe-database

embedding video -multiple files and scripting

<object width="560" height="315"><param name="movie" value="http://www.youtube-nocookie.com/v/uofWfXOzX-g?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/uofWfXOzX-g?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

JAVA SCRIPT(pro HTML SYNTAX)

web page external -conect with server-js examples provided on line

notes for lessons

(web page developer.moz.)

l01

java script is an object oriented language that is dynamic.

syntax related to C and Java

js does nt have classes - instead object prototypes

java script;s types are

A.numbers

- a js object -allowing numerical values- number object -Number() constructor

new Number(value)

the following example uses the Number object's properties to assign values to several numeric variables:

var biggestNum = Number.MAX_VALUE;

var smallestNum = Number.MIN_VALUE;

var infiniteNum = Number.POSITIVE_INFINITY;

var negInfiniteNum = Number.NEGATIVE_INFINITY;

var notANum = Number.NaN;







The following example converts the Date object to a numerical value using Number as a function:

var d = new Date("December 17, 1995 03:24:00");

print(Number(d));// print

This displays "819199440000".




*

MAX_VALUE

The largest positive representable number.  The largest negative representable number is -MAX_VALUE.

MIN_VALUE

The smallest positive representable number -- that is, the positive number closest to zero (without actually being zero).  The smallest negative representable number is -MIN_VALUE.

NaN

Special "not a number" value.

NEGATIVE_INFINITY

Special value representing negative infinity; returned on overflow.

POSITIVE_INFINITY

Special value representing infinity; returned on overflow.

prototype

Allows the addition of properties to a Number object.

B strings

charAt method

1.

 return 'cat'.charAt(1)://returns "a"

return 'cat"[1]:// returns"a"

c-strcmp()fuctin *

var a= "a";

var b = "b" ;

if (a<b)

print (a+"is less than" +b);

else if (a>b)

print (a +"is greater than " +b);

else 

print (a + "and"+b+"are equal.");

string objects-string values

var s_prim=- "foo":

var s_obj = new String (s_prim);

console.log(typeof s_prim); // logs string

console.log(typeof s_obj);// Logs 'objects'

s1 = "2 + 2";               // creates a string primitive s2 = new String("2 + 2");   // creates a String object console.log(eval(s1));      // returns the number 4 console.log(eval(s2));      // returns the string "2 + 2"

valueOf method-convert a string object to its primitive counterpart

console.log(eval(s2.value)f())); // returns the number 4

properties of string instances ---methods ---methods of string instances

String generic methods

Generics are also available on Array methods.

var num = 15;

alert(String.replace(num, /5/, '2'));










/*globals define*/

// Assumes all supplied String instance methods already present (one may use shims for these if not available)

(function () {

    'use strict';

    var i,

        // We could also build the array of methods with the following, but the

        //   getOwnPropertyNames() method is non-shimable:

        // Object.getOwnPropertyNames(String).filter(function (methodName) {return typeof String[methodName] === 'function'});

        methods = [

            'quote', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',

            'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',

            'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase',

            'toLocaleUpperCase', 'localeCompare', 'match', 'search',

            'replace', 'split', 'substr', 'concat', 'slice', 'fromCharCode'

        ],

        methodCount = methods.length,

        assignStringGeneric = function (methodName) {

            var method = String.prototype[methodName];

            String[methodName] = function (arg1) {

                return method.apply(arg1, Array.prototype.slice.call(arguments, 1));

            };

        };

    for (i = 0; i < methodCount; i++) {

        assignStringGeneric(methods[i]);

    }

}());










string instances-methods- non-native methods




3booleans

4fuctions

objects

number 

string

boolean

object

example of a bounce game

analyze the code and underline the following 

fuctions

variables

objects

......>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

ex    game page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>uowm2013-1lesson-javascript lanqauge code</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>

<div id="game">
<div id="square0"></div>
<div id="square1"></div>
<div id="notepad"></div>
<div id="pad"></div>
</div>

<script type="text/javascript">



<!-- This game runs best inside an iframe -->// explanations about i frme -examples 14years old Nyegen Phong, 

-change the gameHeight and gameWidth variables
-change the height and width attributes
 iframe.game class, in the style of the index page

<!-- gameHeight and gameWidth must be divisible by 40 evenly. -->
//asigning variables
var gameHeight = 320
var gameWidth = 360

var intervalOne,intervalTwo,timeoutOne,x
var angle = 2
var tempX = 0
var tempY = 0
var block = 1
var square = 0
var squareTop = 0
var squareLeft = 0
var squareMotion = 1
var speed = 80
var getPad = 0
var nextScore = 0
var score = 0
var count = 0
var collisionOne = 0
var collisionTwo = 0
var collisionThree = 0


document.body.style.margin = "0px"
document.body.style.padding = "0px"

function setupGame()                                                                                     // about fuctions, doc., pad L.T,R,...
{
document.getElementById("game").style.borderRight = "1px solid #aaa"
document.getElementById("game").style.borderRight = "1px solid #aaa"
document.getElementById("game").style.borderBottom = "1px solid #aaa"
document.getElementById("game").style.width = gameWidth+"px"
document.getElementById("game").style.height = gameHeight+"px"
document.getElementById("square0").style.position = "absolute"
document.getElementById("square0").style.width = "40px"
document.getElementById("square0").style.height = "40px"
document.getElementById("square0").style.backgroundColor = "#444"
document.getElementById("square0").style.display = "none"
document.getElementById("square1").style.position = "absolute"
document.getElementById("square1").style.width = "40px"
document.getElementById("square1").style.height = "40px"
document.getElementById("square1").style.backgroundColor = "#444"
document.getElementById("square1").style.display = "none"
document.getElementById("pad").style.position = "absolute"
document.getElementById("pad").style.width = "60px"
document.getElementById("pad").style.height = "30px"
document.getElementById("pad").style.paddingTop = "10px"
document.getElementById("pad").style.textAlign = "center"
document.getElementById("pad").style.font = "15px Verdana, sans-serif"
document.getElementById("pad").style.backgroundColor = "#000"
document.getElementById("pad").style.color = "#fff"
document.getElementById("pad").innerHTML = "<a id=\"play\" href=\"javascript:newGame()\">PLAY</a>"
document.getElementById("play").style.color = "#fff"
document.getElementById("play").style.textDecoration = "none"

padTop = Math.floor(gameHeight/2)-20
padLeft = Math.floor(gameWidth/2)-30

document.getElementById("pad").style.top = padTop+"px"
document.getElementById("pad").style.left = padLeft+"px"

document.getElementById("notepad").innerHTML = "BounceGame"
document.getElementById("notepad").style.padding = "10px"
document.getElementById("notepad").style.textAlign = "center"
document.getElementById("notepad").style.font = "2.0em Georgia, serif"
document.getElementById("notepad").style.fontWeight = "normal"
document.getElementById("notepad").style.color = "#222"

timeoutOne = setTimeout("intervalTwo = setInterval('demoGame()', speed)", 4000)
}

function demoGame()
{
angle = 2
clearTimeout(timeoutOne)
document.getElementById("square0").style.display = "block"
document.getElementById("square1").style.display = "block"

if(square == 0)
{
x = document.getElementById("square0")
square = 1
}
else
{
x = document.getElementById("square1")
square = 0
}

bounceGame()
}

function newGame()
{
block = 0
angle = 2
tempX = 0
tempY = 0
square = 0
squareTop = 0
squareLeft = 0
squareMotion = 1
nextScore = 0
score = 0
count = 0
collisionOne = 0
collisionTwo = 0
collisionThree = 0

clearTimeout(timeoutOne)
clearInterval(intervalOne)
clearInterval(intervalTwo)
document.getElementById("square0").style.left = "0px"
document.getElementById("square0").style.top = "0px"
document.getElementById("square0").style.display = "block"
document.getElementById("square1").style.left = "0px"
document.getElementById("square1").style.top = "0px"
document.getElementById("square1").style.display = "block"
document.getElementById("pad").style.top = (gameHeight-40)+"px"
document.getElementById("pad").innerHTML = ""
document.getElementById("notepad").innerHTML = ""

intervalOne = setInterval("playGame()", speed) 
}

function playGame()
{
if(block)
{
return
}

if(square == 0)
{
x = document.getElementById("square0")
square = 1
}
else
{
x = document.getElementById("square1")
square = 0
}

bounceGame()
checkCollision()
}

function assignM(aM)
{
squareMotion = aM
}

function bounceGame()
{ 
if(squareMotion==1)
{ 
if(squareTop>=(gameHeight-40) && squareLeft>=(gameWidth-40))
{
assignM(3)
moveDR(-40)
}

if(squareTop>=(gameHeight-40)) 
{ 
assignM(2)
moveDL(-40)
} 
else if(squareLeft>=(gameWidth-40))
{
assignM(4)
moveDL(40)
}
else {
moveDR(40)
}
}
else if(squareMotion==2)
{
if(squareTop<=0 && squareLeft>=(gameWidth-40))
{
assignM(4)
moveDL(40)
}

if(squareLeft>=(gameWidth-40))
{
assignM(3)
moveDR(-40)
} 
else if(squareTop<=0)
{
assignM(1)
moveDR(40)
}
else
{
moveDL(-40)
}
}
else if(squareMotion==3)
{
if(squareTop<=0 && squareLeft<=0)
{
assignM(1)
moveDR(40)
}

if(squareTop<=0)
{
assignM(4)
moveDL(40)
} 
else if(squareLeft<=0)
{
assignM(2)
moveDL(-40)
}
else
{
moveDR(-40)
}
}
else if(squareMotion==4)
{
if(squareTop>=(gameHeight-40) && squareLeft<=0)
{
assignM(2)
moveDL(-40)
}

if(squareLeft<=0)
{
assignM(1)
moveDR(40)
} 
else if(squareTop>=(gameHeight-40))
{
assignM(3)
moveDR(-40)
}
else
{
moveDL(40)
}
}
}

function moveDR(amount)
{ 
save = amount
amount = Math.floor(amount/angle)

if(angle == 0)
{
amount = 0
}

squareLeft += amount 
x.style.left = squareLeft+"px"
squareTop += save 
x.style.top = squareTop+"px"
}

function moveDL(amount)
{
save = amount
amount = Math.floor(amount/angle)

if(angle == 0)
{
amount = 0
}

squareLeft -= amount 
x.style.left = squareLeft+"px"
squareTop += save 
x.style.top = squareTop+"px"
}

function assignAngle(aa)
{
if(aa==1)
{
angle = 0
nextScore = 1000
}
if(aa==2)
{
angle = 2
nextScore = 100
}

score += nextScore

document.getElementById("pad").innerHTML = nextScore
}

function flashScore()
{
if(score > 0)
{
if(nextScore == "BounceGame")
{
nextScore = score
}
else
{
nextScore = "BounceGame"
}

document.getElementById("notepad").innerHTML = nextScore
}
else
{
document.getElementById("notepad").innerHTML = "BounceGame"
}
}

function countUp()
{
if(count < (Math.floor(score/10)*8))
{
count += Math.floor(score/10)
}
else if(count >= (Math.floor(score/10)*8) && count <= (Math.floor(score/10)*9))
{
if((Math.floor(score/10)*9) > 200)
{
count += Math.floor(score/10)
}
else
{
count += 10
}
}
else
{
if(Math.floor(score/10) > 30)
{
count += 10
}
else
{
count += 1
}
}

if(count > score)
{
count = score
clearInterval(intervalOne)
intervalOne = setInterval("flashScore()", 2000) 
}

document.getElementById("notepad").innerHTML = count
}

function checkCollision()
{
var actualLeft = getPad-30

if(squareTop == 0)
{
document.getElementById("pad").innerHTML = ""
}

if((squareTop+40)==(gameHeight-40))
{
difference = Math.floor(squareLeft-actualLeft)

if(difference>=(-39)&&difference<4)
{
collisionOne++
collisionTwo = 0
collisionThree = 0

if(collisionOne > 3)
{
assignM(Math.floor(Math.random() * 2) + 2)
}
else
{
assignM(3)
}

assignAngle(2)
}
else if(difference>=5&&difference<15)
{
collisionOne = 0
collisionTwo++
collisionThree = 0

if(collisionTwo > 3)
{
assignM(Math.floor(Math.random() * 2) + 2)
assignAngle(2)
}
else
{
assignM(3)
assignAngle(1)
}
}
else if(difference>=15&&difference<59)
{
collisionOne = 0
collisionTwo = 0
collisionThree++

if(collisionThree > 3)
{
assignM(Math.floor(Math.random() * 2) + 2)                                      // examples by math creativity-flash creativity paul-
}
else
{
assignM(2)
}

assignAngle(2)
}
}
else if((squareTop+40)==gameHeight)
{
block = 1
clearInterval(intervalOne)
setupGame()
intervalOne = setInterval("countUp()", speed) 
}
}

function getMouseXY(e)
{
if(navigator.appName=="Netscape")
{  
tempX = e.pageX
tempY = e.pageY
}  
else
{ 
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
}

if(tempX < 0)
{
tempX = 0
} 

getPad = tempX

if(getPad <= 30)
{
getPad = 30
}

if((getPad-30) > Math.floor(gameWidth-60))
{
getPad = Math.floor(gameWidth-60)+30
}

if(!block)
{
document.getElementById("pad").style.left = (getPad-30)+"px"
}

}

document.onmousemove = getMouseXY

setupGame()

</script>


</body>
</html>

.>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>










///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

example of multiple counters

we need some files in order to execute that script

dateandtime.php

example.html

css/countdown.css

js/ jquery.jCounter-0.1.0.js

what about the css file that configures series of parametres like 

/*create a file named countdown.css in a folder css**************************************************
***************************************************/

.>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

ul.jCounterDefault {
height: 5.2em;
margin: 0;
font-size: 16px; /* change to resize counter */
padding: 0;
}
ul.jCounterDefault * {
margin: 0;
padding: 0;
}
ul.jCounterDefault li {
background-color: #333;
border: 0.16em solid #fff;
color: #fff;
display: inline;
float: left;
list-style-type: none;
margin-left: 0.2em;
min-width: 4.3em;
position: relative;
text-align: center;
border-radius: 0.5em;
-moz-box-shadow: 0 0 0.2em #777;
-ms-box-shadow: 0 0 0.2em #777;
-o-box-shadow: 0 0 0.2em #777;
-webkit-box-shadow: 0 0 0.2em #777;
box-shadow: 0 0 0.2em #777;
}
ul.jCounterDefault span {
display: block;
font: normal bold 300% times;
letter-spacing: 0.08em;
margin-left: 0.06em;
padding: 0 0.1em;
}
ul.jCounterDefault  em.textDays, ul.jCounterDefault  em.textHours, ul.jCounterDefault  em.textMinutes, ul.jCounterDefault  em.textSeconds{
display: block;
font: normal normal 80% "Trebuchet MS";
letter-spacing: 0;
margin: 0 auto;
padding-bottom: 0.4em;
}

.>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

what about the js first - jquery.jCounter-0.1.0.js

/**********************************

*create a file as the above 

**********************************/

;(function($,document,window,undefined) {

//once upon a time...

$.fn.jCounter = function(options,callback) {

var consoleLog = false; //shows debug messages via console.log() if true

var customRangeDownCount; //if true, it will tell countdown_proc() it's a down count and not an up count.

var endCounter = false; //stops jCounter if true

var eventDate; //time target (holds a number of seconds)

var pausedTime; //stores the time (in seconds) when pausing

var thisEl = this; //custom 'this' selector

var thisLength = this.length; //number of multiple elements per selector

var singularLabels = new Array('Day','Hour','Minute','Second'); //singular labels - use for localization

var pluralLabels = new Array('Days','Hours','Minutes','Seconds'); //plural labels - use for localization

var remoteDateURL = "http://www.devingredients.com/files/dateandtime.php"; //URL to external dateandtime.php file

var localDateURL = "dateandtime.php"; //path to local dateandtime.php file

this.options = options; //stores jCounter's options parameter to verify against specified methods

//default settings

var settings = {

customDuration: null,

customRange: null,

date: null,

dateSource: 'remote',

fallback: null,

format: 'dd:hh:mm:ss',

timezone: 'Europe/London',

twoDigits: 'on'

};

//merge the settings with the options values

if (typeof options === 'object') {

$.extend(settings,options);

thisEl.data("userOptions", settings); //push the settings to applied elements (they're used by methods)

}

//METHODS

var jC_methods = {

//initialize

init : function() {

thisEl.each(function(i,el) {

startCounter(el);

});

},

//pause method: $.jCounter('pause')

pause : function() {

if(consoleLog) { console.log("(jC) Activity: Counter paused."); }

endCounter = true;

return thisEl.each(function(i,el) {

clearInterval($(el).data("jC_interval"));

});

},

//stop method: $.jCounter('stop')

stop : function() {

if(consoleLog) { console.log("(jC) Activity: Counter stopped."); }

endCounter = true;

return thisEl.each(function(i,el) {

clearInterval($(el).data("jC_interval"));

$(el).removeData("jC_pausedTime");

resetHTMLCounter(el);

});

},

//reset method: $.jCounter('reset')

reset : function() {

if(consoleLog) { console.log("(jC) Activity: Counter reset."); }

return thisEl.each(function(i,el) {

clearInterval($(el).data("jC_interval"));

resetHTMLCounter(el);

startCounter(el);

});

},

//start method: $.jCounter('start')

start : function() {

return thisEl.each(function(i,el) {

pausedTime = $(el).data("jC_pausedTime");

endCounter = false;

clearInterval($(el).data("jC_interval"));

startCounter(el);

});

}

}

//checks whether this jCounter instance runs by a customDuration setting

if(thisEl.data("userOptions").customDuration) {

if(!isNaN(thisEl.data("userOptions").customDuration)) {

var customDuration = true;

} else {

var customDuration = false;

if(consoleLog) { console.log("(jC) Error: The customDuration value is not a number! NOTE: 'customDuration' accepts a number of seconds."); }

}

}

//checks whether this jCounter instance runs by a customRange setting

if(thisEl.data("userOptions").customRange) {

var customRangeValues = thisEl.data("userOptions").customRange.split(":");

var rangeVal0 = parseInt(customRangeValues[0]);

var rangeVal1 = parseInt(customRangeValues[1]);

if(!isNaN(rangeVal0) && !isNaN(rangeVal1)) {

var customRange = true;

if(rangeVal0 > rangeVal1) {

var customRangeDownCount = true;

} else {

var customRangeDownCount = false;

}

} else {

var customRange = false;

if(consoleLog) { console.log("(jC) Error: The customRange value is not a valid range! Example: customRange: '0:30' or '30:0'"); }

}

}

//FUNCTIONS

//jCounter initializer

function startCounter(el) {

if(customDuration) {

if (pausedTime) {

if (!isNaN(pausedTime)) {

eventDate = Math.round(pausedTime);

}

} else {

eventDate = Math.round($(el).data("userOptions").customDuration);

}

currentTime = 0;

countdown_proc(currentTime,el);

$(el).data("jC_interval", setInterval(function(){

if(endCounter == false) {

currentTime = parseInt(currentTime) + 1;

countdown_proc(currentTime,el)

}

},1000));

} else if(customRange) {

eventDate = Math.round(customRangeValues[1]);

if (pausedTime) {

if (!isNaN(pausedTime)) {

var currentTime = eventDate - pausedTime;

}

} else {

var currentTime = Math.round(customRangeValues[0]);

}

if(customRangeDownCount) {

countdown_proc(currentTime,el);

} else {

countdown_proc(currentTime,el);

}

$(el).data("jC_interval", setInterval(function(){

if(endCounter == false) {

if(customRangeDownCount) {

currentTime = parseInt(currentTime) - 1;

} else {

currentTime = parseInt(currentTime) + 1;

}

countdown_proc(currentTime,el);

}

},1000));

} else {

eventDate = Date.parse($(el).data("userOptions").date) / 1000;

if(thisEl.data("userOptions").dateSource == 'remote') {

dateSource = remoteDateURL + '?timezone=' + thisEl.data("userOptions").timezone + '&callback=?';

} else if(thisEl.data("userOptions").dateSource == 'local') {

dateSource = localDateURL + '?timezone=' + thisEl.data("userOptions").timezone;

} else {

if(consoleLog) { console.log("(jC) Error: dateSource property can be set to 'local' or 'remote', 'remote' is default"); }

}

$.getJSON(dateSource,function(data){

var currentDate = Date.parse(data.currentDate) / 1000;

countdown_proc(currentDate,el);

$(el).data("jC_interval", setInterval(function(){

if(endCounter == false) {

currentDate = parseInt(currentDate) + 1;

countdown_proc(currentDate,el)

}

},1000));

}); 

}

}

//main jCounter processor

function countdown_proc(duration,el) {

//check if the counter needs to count down or up

if(customRangeDownCount) {

if(eventDate >= duration) {

if(thisEl.data("userOptions").fallback) {

thisEl.data("userOptions").fallback.call(this);

}

clearInterval($(el).data("jC_interval"));

}

} else {

if(eventDate <= duration) {

if(thisEl.data("userOptions").fallback) {

thisEl.data("userOptions").fallback.call(this);

}

clearInterval($(el).data("jC_interval"));

}

}

//if customRange is used, update the seconds variable

var seconds = (customRange) ? duration : eventDate - duration;

var thisInstanceFormat = thisEl.data("userOptions").format;

//calculate seconds into days,hours,minutes,seconds

//if dd (days) is specified in the format setting (i.e. format: 'dd:hh:mm:ss')

if(thisInstanceFormat.indexOf('dd') != -1)  {

var days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days

seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed

}

//if hh (hours) is specified

if(thisInstanceFormat.indexOf('hh') != -1)  {

var hours = Math.floor(seconds / (60 * 60));

seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed

}

//if mm (minutes) is specified

if(thisInstanceFormat.indexOf('mm') != -1)  {

var minutes = Math.floor(seconds / 60);

seconds -= minutes * 60; //update the seconds variable with no. of minutes removed

}

//if ss (seconds) is specified

if(thisInstanceFormat.indexOf('ss') == -1)  {

seconds -= seconds; //if ss is unspecified in format, update the seconds variable to 0;

}

//conditional Ss

//updates the plural and singular labels accordingly

if (days == 1) { $(el).find(".textDays").text(singularLabels[0]); } else { $(el).find(".textDays").text(pluralLabels[0]); }

if (hours == 1) { $(el).find(".textHours").text(singularLabels[1]); } else { $(el).find(".textHours").text(pluralLabels[1]); }

if (minutes == 1) { $(el).find(".textMinutes").text(singularLabels[2]); } else { $(el).find(".textMinutes").text(pluralLabels[2]); }

if (seconds == 1) { $(el).find(".textSeconds").text(singularLabels[3]); } else { $(el).find(".textSeconds").text(pluralLabels[3]); }

//twoDigits ON setting

//if the twoDigits setting is set to ON, jCounter will always diplay a minimum number of 2 digits

if(thisEl.data("userOptions").twoDigits == 'on') {

days = (String(days).length >= 2) ? days : "0" + days;

hours = (String(hours).length >= 2) ? hours : "0" + hours;

minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;

seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;

}

//updates the jCounter's html values

if(!isNaN(eventDate)) {

$(el).find(".days").text(days);

$(el).find(".hours").text(hours);

$(el).find(".minutes").text(minutes);

$(el).find(".seconds").text(seconds);

} else { 

if(consoleLog) { console.log("(jC) Error: Invalid date! Here's an example: 01 January 1970 12:00:00"); }

clearInterval($(el).data("jC_interval"));

}

//stores the remaining time when pausing jCounter

$(el).data("jC_pausedTime", eventDate-duration);

}

//updates jCounter's HTML values to 0 or 00, based on the twoDigits setting

function resetHTMLCounter(el) {

if(thisEl.data("userOptions").twoDigits == 'on') {

$(el).find(".days,.hours,.minutes,.seconds").text('00');

} else if(thisEl.data("userOptions").twoDigits == 'off') {

$(el).find(".days,.hours,.minutes,.seconds").text('0');

}

}

//method calling logic

if ( jC_methods[this.options] ) {

return jC_methods[ this.options ].apply( this, Array.prototype.slice.call( arguments, 1 ));

} else if ( typeof this.options === 'object' || ! this.options ) {

return jC_methods.init.apply( this, arguments );

} else {

console.log('(jC) Error: Method >>> ' +  this.options + ' <<< does not exist.' );

} 

}

//the end;

}) (jQuery,document,window);

////////////////////////////////////////////////

create the html file which contains the scripts. Notice the js

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

//////////////////////////////////////////////////////////////
<!DOCTYPE html>
<html>
<head>
<title>jCounter - jQuery plugin - devingredients.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

<link rel="stylesheet" type="text/css" href="css/countdown.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
// the file is not working when runs locally

<script type="text/javascript" src="js/jquery.jCounter-0.1.0.js"></script>

<script type="text/javascript">
$(document).ready(function() {
//first counter
$(".countdown1").jCounter({
date: "01 january 2013 12:00:00", //format: DD month YYYY HH:MM:SS
timezone: "Europe/Bucharest",
format: "dd:hh:mm:ss",
twoDigits: 'on',
fallback: function() { console.log("Counter 1 finished!") }
});

$('.pause1').click(function() {
$(".countdown1").jCounter('pause');
});
$('.stop1').click(function() {
$(".countdown1").jCounter('stop');
});
$('.start1').click(function() {
$(".countdown1").jCounter('start');
});

//second counter
$(".countdown3").jCounter({
format: "ss",
twoDigits: 'on',
customDuration: 60*9, //9 minutes
fallback: function() { console.log("Counter 2 finished! ") }
});

$('.pause3').click(function() {
$(".countdown3").jCounter('pause');
});
$('.stop3').click(function() {
$(".countdown3").jCounter('stop');
});
$('.reset3').click(function() {
$(".countdown3").jCounter('reset');
});
$('.start3').click(function() {
$(".countdown3").jCounter('start');
});

//third counter
$(".countdown2").jCounter({
format: "dd:hh:mm:ss",
twoDigits: 'on',
customRange: '10:9999',
fallback: function() { console.log("Counter 3 finished!") }
});

$('.pause2').click(function() {
$(".countdown2").jCounter('pause');
});
$('.stop2').click(function() {
$(".countdown2").jCounter('stop');
});
$('.reset2').click(function() {
$(".countdown2").jCounter('reset');
});
$('.start2').click(function() {
$(".countdown2").jCounter('start');
});
});
</script>
</head>
<body>
<h3>&nbsp;</h3>
<br>
<h2>Date-based countdown</h2>
<ul class="jCounterDefault countdown1">
<li>
<p><span class="days">00</span></p>
<p><em class="textDays">Days</em></p>
</li>
<li>
<p><span class="hours">00</span></p>
<p><em class="textHours">Hours</em></p>
</li>
<li>
<p><span class="minutes">00</span></p>
<p><em class="textMinutes">Minutes</em></p>
</li>
<li>
<p><span class="seconds">00</span></p>
<p><em class="textSeconds">Seconds</em></p>
</li>
</ul>
<form style="clear: both; margin-top: 10px;">
<input class="pause1" type="button" name="pause" value="pause">
<input class="stop1" type="button" name="stop" value="stop">
<input class="start1" type="button" name="start" value="start">
</form>
<br>

<h2>Custom-Duration Counter</h2>
<ul class="jCounterDefault countdown3">
<li>
<p><span class="seconds">00</span></p>
<p><em class="textSeconds">Seconds</em></p>
</li>
</ul>
<form style="clear: both; margin-top: 10px;">
<input class="pause3" type="button" name="pause" value="pause">
<input class="stop3" type="button" name="stop" value="stop">
<input class="reset3" type="button" name="reset" value="reset">
<input class="start3" type="button" name="start" value="start">
</form>
<br>

<h2>Custom-Range Count Up</h2>
<ul class="jCounterDefault countdown2">
<li>
<p><span class="hours">00</span></p>
<p><em class="textHours">Hours</em></p>
</li>
<li>
<p><span class="minutes">00</span></p>
<p><em class="textMinutes">Minutes</em></p>
</li>
<li>
<p><span class="seconds">00</span></p>
<p><em class="textSeconds">Seconds</em></p>
</li>
</ul>
<form style="clear: both; margin-top: 10px;">
<input class="pause2" type="button" name="pause" value="pause">
<input class="stop2" type="button" name="stop" value="stop">
<input class="reset2" type="button" name="reset" value="reset">
<input class="start2" type="button" name="start" value="start">
</form>
<br>

</body>
</html>

/////////////////////////////


and finally the php file dateandtime.php 
that has to be executed(+php server)


<?php
if (isset($_GET['timezone'])) {
  $timezone = new DateTimeZone($_GET['timezone']);
} else {
  $timezone = new DateTimeZone("Europe/London");
}
$date = new DateTime();
$date->setTimezone($timezone);
$dateAndTime = array("currentDate"=>$date->format('d F Y H:i:s'));
echo $_GET['callback'] . '(' . json_encode($dateAndTime) . ')';
?>

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////download //////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////