您的位置：首页 > 其它

制作一个数字钟表及时间选择器

2015-04-16 10:41 253 查看

<!DOCTYPE html>

<html>

<head>

<title>Digital Clock</title>

<script>

function displayTime(){

var elt=document.getElementById("clock");

var now=new Date();

elt.innerHTML=now.toLocaleTimeString();

elt.innerHTML=now.toLocaleTimeString();

setTimeout(displayTime,1000);}

window.onload=displayTime;

</script>

<style>

#clock{

font:bold 24pt sans;

background:#ddf;

padding:10px;

border:solid black 2px;

border-radius:10px;}

</style>

</head>

<body><h1>Digital Clock</h1>

<span id="clock"></span>

</body>

</html>

2.时间选择器

（1）HTML5中的type=“time”

（2）用js实现

var str = "";

document.writeln("<div id=\"_contents\" style=\"background-color:#E3E3E3; font-size: 12px; border: 1px solid #777777; position:absolute; top:200px; left:50px; width:170px; z-index:1; visibility:hidden\">");

str += "hour <select name=\"_hour\">";

for (h = 0; h <= 9; h++) {

str += "<option value=\"0" + h + "\">0" + h + "</option>";

}

for (h = 10; h <= 23; h++) {

str += "<option value=\"" + h + "\">" + h + "</option>";

}

str += "</select> min<select name=\"_minute\">";

if (m = 0) {

m1=m*15;

str += "<option value=\"0" + m1 + "\">0" + m + "</option>";

}

for (m = 0; m <= 4; m++) {

m1=m*15;

str += "<option value=\"" + m1 + "\">" + m1 + "</option>";

}

str += "</select> <input name=\"queding\" type=\"button\" onclick=\"_select()\" value=\"OK\" style=\"font-size:12px\" /></div>";

document.writeln(str);

var _fieldname;

function settime(tt) {

_fieldname = tt;

var ttop = tt.offsetTop; //TT控件的定位点高

var thei = tt.clientHeight; //TT控件本身的高

var tleft = tt.offsetLeft; //TT控件的定位点宽

while (tt = tt.offsetParent) {

ttop += tt.offsetTop;

tleft += tt.offsetLeft;

}

// document.all._contents.style.top = 200;

// document.all._contents.style.left = 300;

document.all._contents.style.visibility = "visible";

}

function _select() {

_fieldname.value = document.all._hour.value + ":" + document.all._minute.value;

document.all._contents.style.visibility = "hidden";

}// JavaScript Document

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航