纯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 {

}

}

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180518G1PBJJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券