50,530
社区成员
发帖
与我相关
我的任务
分享
var Led = function(options) {
this.options = {
'count' : 1,
'color' : '#ff0000',
'dark' : '#ffffff',
'height' : 100,
'width' : 50,
'parent' : 'leds',
'spacing' : 10,
'weight' : 10,
'prefix' : 'ledNum_'
};
Object.extend(this.options, options || {});
this.options.prefix = this.options.parent + '_' + this.options.prefix;
this.allLeds = Led.getAllNum();
this.init();
}
Led.prototype = {
init : function() {
var leds = $(this.options.parent);
for(var i = this.options.count - 1; i >= 0; i--) {
var led = document.createElement('div');
led.id = this.options.prefix + i;
with(led.style) {
padding = this.options.spacing + 'px';
}
MyUtil.addCssFloat(led, 'left');
var _a = document.createElement('div');
var attachWeight = this.options.weight % 2 == 0;
var semiWeight = Math.floor(this.options.weight / 2);
with(_a.style) {
width = this.options.width + 'px';
height = this.options.height / 2 + 'px';
borderTop =
borderRight =
borderLeft = this.options.weight + 'px ' + 'solid ' + this.options.color;
borderBottom = (attachWeight ? semiWeight : semiWeight + 1) + 'px ' + 'solid ' + this.options.dark;
overflow = 'hidden';
}
var _b = document.createElement('div');
with(_b.style) {
width = this.options.width + 'px';
height = this.options.height / 2 + 'px';
borderRight =
borderLeft =
borderBottom = this.options.weight + 'px ' + 'solid ' + this.options.color;
borderTop = semiWeight + 'px ' + 'solid ' + this.options.dark;
overflow = 'hidden';
}
_a.innerHTML = _b.innerHTML = ' ';
led.appendChild(_a);
led.appendChild(_b);
leds.appendChild(led);
}
},
showNumber : function(num) {
var digits = Led.getDigits(num, this.options.count);
for(var i = 0; i < this.options.count; i++) {
var led = $(this.options.prefix + i);
this.show(led, this.allLeds[digits[i]]);
}
},
show : function(d, led) {
var tmp = d.childNodes;
var ls = [];
for(var i = 0, n = 0; i < tmp.length; i++) {
if(tmp[i].tagName == 'DIV') {
ls[n++] = tmp[i];
}
}
with(ls[0].style) {
borderTopColor = led[0] ? this.options.color : this.options.dark;
borderRightColor = led[1] ? this.options.color : this.options.dark;
borderBottomColor = led[6] ? this.options.color : this.options.dark;
borderLeftColor = led[5] ? this.options.color : this.options.dark;
}
with(ls[1].style) {
borderTopColor = led[6] ? this.options.color : this.options.dark;
borderRightColor = led[2] ? this.options.color : this.options.dark;
borderBottomColor = led[3] ? this.options.color : this.options.dark;
borderLeftColor = led[4] ? this.options.color : this.options.dark;
}
}
}
Led.getAllNum = function() {
var getLogic = function(num) {
var a = (num & 8) >>> 3 == 1;
var b = (num & 4) >>> 2 == 1;
var c = (num & 2) >>> 1 == 1;
var d = (num & 1) == 1;
var led = [];
led[0] = a | (!a & c) |(!a & !b & !c & !d) | (!a & b & !c & d);
led[1] = a | (!a & !b) | (!a & b & c & d) | (!a & b & !c & !d);
led[2] = a | b | !c | d;
led[3] = a | (!a & !b & c) | (!a & !b & !c & !d) | (!a & b & c & !d) |
(!a & b & !c & d);
led[4] = (!a & c & !d) | (!b & !c & !d);
led[5] = a | (!a & !b & !c & !d) | (!a & b & !d) | (!a & b & !c & d);
led[6] = a | (!a & !b & c) | (!a & b & !c) | (!a & b & c & !d);
return led;
}
var leds = [];
for(var i = 0; i < 10; i++) {
leds[i] = getLogic(i);
}
return leds;
}
Led.getDigits = function(num, count) {
num = num || 0;
count = count || 1;
var digits = [];
for(var i = 0; i < count; i++) {
digits[i] = num % 10;
num = Math.floor(num / 10);
}
return digits;
}
<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档 </title>
<script type="text/javascript" src="led.js"></script>
<script type="text/javascript">
$ = function(id) {
return (typeof id == 'string') ? document.getElementById(id) : id;
}
/**
* Prototype JavaScript Utilitity
*/
Object.extend = function(destination, source) {
for (var property in source) {
if(source[property] instanceof Object) {
this.extend(destination[property], source[property]);
} else {
destination[property] = source[property];
}
}
return destination;
};
var MyUtil = {
addCssFloat : function(element, align) {
if(typeof element.style.styleFloat != 'undefined') {
element.style.styleFloat = align;
} else {
element.style.cssFloat = align;
}
}
}
window.onload = function() {
var width = 12;
var height = 24;
var weight = 8;
var dark = '#efefef';
var color = '#000000';
var year = new Led({
parent: 'year',
count: 4,
width: width,
height: height,
weight: weight,
spacing: 2,
dark: dark,
color: color
});
var month = new Led({
parent: 'month',
count: 2,
width: width,
height: height,
weight: weight,
spacing: 2,
dark: dark,
color: color
});
var day = new Led({
parent: 'day',
count: 2,
width: width,
height: height,
weight: weight,
spacing: 2,
dark: dark,
color: color
});
var hour = new Led({
parent: 'hour',
count: 2,
width: width,
height: height,
weight: weight,
spacing: 2,
dark: dark,
color: color
});
var minute = new Led({
parent: 'minute',
count: 2,
width: width,
height: height,
weight: weight,
spacing: 2,
dark: dark,
color: color
});
var second = new Led({
parent: 'second',
count: 2,
width: width,
height: height,
weight: weight,
spacing: 2,
dark: dark,
color: color
});
var d = new Date();
var _year = d.getYear();
year.showNumber((_year < 1900 ? (1900 + _year) : _year));
month.showNumber(d.getMonth() + 1);
day.showNumber(d.getDate());
hour.showNumber(d.getHours());
minute.showNumber(d.getMinutes());
second.showNumber(d.getSeconds());
var id = setInterval(function() {
var d = new Date();
var _second = d.getSeconds();
second.showNumber(_second);
if(_second != 0) {
return;
}
var _minute = d.getMinutes();
minute.showNumber(_minute);
if(_minute != 0) {
return;
}
var _hour = d.getHours();
hour.showNumber(_hour);
if(_hour != 0) {
return;
}
var _date = d.getDate();
day.showNumber(_date);
if(_date != 1) {
return;
}
var _month = d.getMonth();
month.showNumber(_month + 1);
if(_month != 0) {
return;
}
year.showNumber((_year < 1900 ? (1900 + _year) : _year));
}, 1000);
}
</script>
<style>
div.t {
float: left;
}
span.sepa {
font-size: 32pt;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div id="time">
<div class="t" id="year"></div>
<div class="t"><span class="sepa">-</span></div>
<div class="t" id="month"></div>
<div class="t"><span class="sepa">-</span></div>
<div class="t" id="day"></div>
<div class="t"><span class="sepa"> </span></div>
<div class="t" id="hour"></div>
<div class="t"><span class="sepa">:</span></div>
<div class="t" id="minute"></div>
<div class="t"><span class="sepa">:</span></div>
<div class="t" id="second"></div>
</div>
</body>
</html>