纯html写的LED万年历

闲来无聊，用html写了一个LED万年历看板，主要由3个文件构成。

看下效果图：

html文件如下：

css文件：

js文件：

led.html文件内容，如下所示：

led日历看板

年

月

日

星期

时间

:

:

led.css文件内容，如下图所示：

.parent {

width:220px;

height:360px;

display:flex;

justify-content:center;

align-items:center;

}

.child {

width:130px;

height:20px;

}

.ymd{

float: left;

color: red;

display:block;

background: black;

width: 20px;

text-align: center;

}

.week{

float: left;

color: red;

font-size: 20px;

width:36px;

height:24px;

display:block;

background: black;

font-weight:bold;

text-align: center;

}

.week_div{

float: left;

color: red;

width:100px;

text-align:center;

display:block;

font-size: 24px;

line-height:24px;

font-weight:bold;

}

.week_mz{

float: left;

display:block;

font-size: 24px;

height:auto;

}

.time{

float: left;

color: red;

width:36px;

text-align:center;

display:block;

background: black;

font-size: 24px;

line-height:24px;

font-weight:bold;

}

.time_mh{

display:block;

font-size: 24px;

line-height:24px;

font-weight:bold;

}

.time_sj{

margin:20px 20px auto;

float:left;

display:block;

width:20px;

font-size: 24px;

line-height:24px;

}

.color-box{

color: #245CD4;

font-weight:bold;

text-align: center;

}

led.js文件内容，如下图所示：

var myDate = new Date();

setYmdw();

blinklink();

/**设置年月日周*/

function setYmdw(){

var year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)

var month = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)

var day = myDate.getDate(); //获取当前日(1-31)

var week = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)

month = PrefixInteger(month,2);

day = PrefixInteger(day,2);

document.getElementById('year').innerText=year;

document.getElementById('month').innerText=month;

document.getElementById('day').innerText=day;

week = weekToStr(week);

document.getElementById('week').innerText=week;

}

/**指定长度，前面补0*/

function PrefixInteger(num, length) {

return (Array(length).join('0') + num).slice(-length);

}

/**周转换，int转汉字*/

function weekToStr(intWeek){

var Week = ['日','一','二','三','四','五','六'];

return Week[intWeek];

}

/**设置时分*/

function setHm(){

var myDate = new Date();

var hour = myDate.getHours(); //获取当前小时数(0-23)

var minutes = myDate.getMinutes(); //获取当前分钟数(0-59)

var seconds = myDate.getSeconds(); //获取当前秒数(0-59)

hour = PrefixInteger(hour,2);

minutes = PrefixInteger(minutes,2);

seconds = PrefixInteger(seconds,2);

document.getElementById('hour').innerText=hour;

document.getElementById('minutes').innerText=minutes;

document.getElementById('seconds').innerText=seconds;

}

/**设置时钟跳动*/

function blinklink() {

setSd('blink');

setSd('blink1');

setHm();

timer = setTimeout("blinklink()", 500);

}

/**设置闪动的信息*/

function setSd(id){

var obj = document.getElementById(id);

}

} else {

}

}