mg电子不朽情缘试玩

書名： MooTools 1.3 Cookbook
作者名： Jay Larry G. Johnston
本章字數： 568字
更新時間： 2021-04-02 19:07:10

Creating a time clock that updates per second

We can be sure to keep our users right on time by giving them a running clock that updates every second.

Getting ready

UNIX time, measured in seconds from an arbitrary date in the 1970s, can be difficult to parse out into human-readable time. MooTools makes this much easier in the MooTools MoreDate class. There are also shortcuts for the parameter that can be passed to Date.get():

ms/Milliseconds
year/FullYear
min/Minutes
mo/Month
sec/Seconds
hr/Hours

The seasoned coder will appreciate that all raw JavaScript date elements are available; MooTools only extends the native class.

How to do it...

Making a clock is a task that comes across our desks perennially.

<script type="text/javascript" src="mootools-1.3.0.js"></script>
<!-- we MUST have the MooTools more Date classes -->
<script type="text/javascript"
src="mootools-more-1.3.0.js"></script>
</head>
<body>
<div id="moo_clock">
<span>0</span><span>0</span>
<span>:</span>
<span>0</span><span>0</span>
<span class="blink">:</span>
<span>0</span><span>0</span>
</div>
<style type="text/css">
#moo_clock {
position:fixed;
border-top:3px solid #999;
border-right:3px solid #333;
border-bottom:3px solid #555;
border-left:3px solid #BBB;
background-color:#777;
/* instead "top" and "left" */
top:25px; left:25px;
/* try "bottom" and "right" */
}
#moo_clock tr td {
display:block;
float:left;
width:10px;
text-align:center;
border:0px;
color:#00FF00;
}
#moo_clock tr td.blink {
visibility:hidden;
}
</style>
<noscript>JavaScript is disabled.</noscript>
<script type="text/javascript">
// create the periodic function
function moo_time(){
// date setup
var js_date = new Date();
var js_hours = js_date.get('Hours').toString().pad(2,
'0', 'left');
var js_minutes = js_date.get('Minutes').toString().pad(2,
'0', 'left');
var js_seconds = js_date.get('Seconds').toString().pad(2,
'0', 'left');
// switch paddles in the stream of HTML
var tds = $$('#moo_clock span');
// we can use a js string as an array
var hour1 = js_hours[0];
tds[0].set('text', hour1);
// we can save a step in setting our time
tds[1].set('text', js_hours[1]);
tds[3].set('text', js_minutes[0]);
tds[4].set('text', js_minutes[1]);
tds[6].set('text', js_seconds[0]);
tds[7].set('text', js_seconds[1]);
// make the seconds' dots blink. mmm, blink
tds[5].toggleClass('blink');
}
// this is what calls the function every one second
var moo_time_hand = moo_time.periodical(1000);
</script>
</body>
</html>

How it works...

The variable tds is a collection of HTML elements. The $$ object takes a CSS selector and returns the elements. Usually, the elements are then used in a forEach() or each() iterator. We use them in this example as directly accessible elements, like those in an array. For instance, tds[0] represents the first SPAN element found by the CSS selector used to create tds. In our markup, there are eight elements in all that are selected: tds[0] through tds[7], since this object uses a zero-based key structure in collecting elements. The Element.set() method takes two arguments, the property of the HTML element to alter and the value to which the property will be set.

There's more...

Ah, the long lost, forgotten, and hated BLINK tag. Browser implementations such as Internet Explorer dropped support for the tag somewhere along the way. It is widely accepted that misuse of the tag caused users to find it...annoying. The method Element.toggleClass() will add or remove a class from an element each time it is called. Our example makes use of this MooTools element method to implement a potentially viable use of blinking text.

The proverbial meat of our recipe is wrapped up quietly and discreetly in an unassuming Function.periodical() function that takes a minimum of one input value: the rate at which the function should periodically be called. Optionally, it can take more parameters that are then sent to the function bound by the object.

官术网_书友最值得收藏!

Creating a time clock that updates per second

Getting ready

How to do it...

How it works...

There's more...

See also

Note

官术网_书友最值得收藏!

MooTools 1.3 Cookbook

Creating a time clock that updates per second

Getting ready

How to do it...

How it works...

There's more...

See also

Note