html5电子表代码,各种样式电子表

HtmlCssJs

简易电子表.现在时间是

使用Date() , setTimeout() , toLocaleDateString() , toLocaleTimeString()

1:

1:

1

使用Date() , setTimeout() , getHours() , getMinutes() , getSeconds()

使用: 同上例

#day {

font-size:2em;

}

#time {

font-size:5em;

font-family:'Microsoft YaHei';

}

.f {

font-size:7em;

}

#hdiv,#mdiv,#sdiv {

font-size:8em;

font-family:'Quartz Regular';

color:#fff;

background-color:#000;

}

#iWatch {

width:300px;

text-align:center;

line-height:60px;

font-size:40px;

font-weight:bold;

border:2px solid #333;

background:#abcdef;

}

//表1

timer();

function timer() {

var d = document.getElementById('day');

var t = document.getElementById('time');

var n = new Date();

setTimeout(timer, 1000);

d.innerHTML = n.toLocaleDateString();

t.innerHTML = n.toLocaleTimeString();

}

//表2

now();

function now() {

var hdiv = document.getElementById('hdiv');

var mdiv = document.getElementById('mdiv');

var sdiv = document.getElementById('sdiv');

var date = new Date();

var h = date.getHours();

if (h < 9) {

h = '0' + h

};

var m = date.getMinutes();

if (m <= 9) {

m = '0' + m

};

var s = date.getSeconds();

if (s <= 9) {

s = '0' + s

};

setTimeout(now, 1000);

hdiv.innerHTML = h;

mdiv.innerHTML = m;

sdiv.innerHTML = s;

}

//表3

setInterval(run, 1000);

run();

function run() {

//实例化 Date

var date = new Date();

//获取时分秒

var h = date.getHours();

var i = date.getMinutes();

var s = date.getSeconds();

//处理

h = (h < 10) ? '0' + h : h;

i = (i < 10) ? '0' + i : i;

s = (s < 10) ? '0' + s : s;

//写入表

document.getElementById('iWatch').innerHTML = h + ':' + i + ':' + s;

}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3