多功能手表，简单实用。不舍得花钱的小伙伴，现在给自己来一块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手表</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Offside);
@import url(http://allfont.net/allfont.css?fonts=crystal);
@import url(http://fonts.googleapis.com/css?family=Karla);
@import url(http://fonts.googleapis.com/css?family=VT323);
body {
background-color:#C0C0C0;
width:100%;
height:100%;
margin:0 auto;
}
#oval {
position:absolute;
left:50%;
margin-left:-210px;
width:420px;
height:535px;
z-index:-3;
background-color:#C0C0C0;
border-radius:140px;
*border:2px dotted;
padding-top:10px;
}
#watchbody{
margin:0 auto;
width:350px;
height:auto;
}
#toplink {
position:relative;
top:30px;
background-color:#C0C0C0;
z-index:-1;
width:237px;
height:0;
margin:0 auto;
transform:rotate(180deg);
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
border-top:36px solid #181818;
border-left:15px solid transparent;
border-right:15px solid transparent;
}
#watchtop {
position:relative;
top:15px;
background-color:#C0C0C0;
z-index:-1;
width:255px;
height:0;
margin:0 auto;
border-bottom:36px solid;
border-left:15px solid transparent;
border-right:15px solid transparent;
}
#watchleft {
position:absolute;
top:222px;
right:194px;
background-color:#C0C0C0;
z-index:-2;
width:225px;
height:0;
border-bottom:36px solid ;
border-left:50px solid transparent;
border-right:50px solid transparent;
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari */
transform: rotate(-90deg); /* Standard syntax */
}
#watchright {
position:absolute;
top:222px;
left:193px;
background-color:#C0C0C0;
z-index:-2;
width:225px;
height:0;
border-bottom:36px solid ;
border-left:50px solid transparent;
border-right:50px solid transparent;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */
transform: rotate(90deg); /* Standard syntax */
}
#btnbase {
position:absolute;
right:41px;
bottom:200px;
width:15px;
height:116px;
background-color:#181818;
border-radius:4px;
z-index:-3;
}
#sidebtn {
position:absolute;
top:250px;
right:32px;
width:25px;
height:18px;
background: linear-gradient(#D3D3D3, #101010);
border-radius:5px;
z-index:-4;
}
#watchbase {
position:relative;
bottom:15px;
background-color:#C0C0C0;
z-index:-1;
width:255px;
height:0;
margin:0 auto;
border-top:36px solid ;
border-left:15px solid transparent;
border-right:15px solid transparent;
}
#watchwrap {
width:295px;
height:315px;
background-color:#181818;
margin:0 auto;
border-radius: 30px;
}
#brand {
position:absolute;
top:10px;
left:30px;
background-color:black;
width:60px;
height:20px;
text-align:center;
}
#brand p{
font-family:"Offside";
color:#C0C0C0;
font-weight:bold;
font-size:15px;
margin:0 auto;
}
#water {
position:absolute;
left:115px;
top:5px;
background-color:black;
width:auto;
}
#water p {
color:#1E90FF;
font-family:"Karla";
font-size:65%;
text-align:left;
margin:0 auto;
}
#wr{
position:absolute;
left:210px;
background-color:black;
width:auto;
}
#wr p {
position:relative;
bottom:18px;
color:#B8860B;
font-family:helvetica;
font-weight:bold;
font-size:150%;
font-align:center;
}
#clockface {
position:relative;
top: 5px;
width:95%;
height:40%;
background-color:#000000;
margin:0 auto;
border-radius: 30px 30px 5px 5px;
}
#clock {
position:relative;
top:40px;
left:4px;
width:80%;
height:65%;
z-index:1;
background-color:#B6A57E;
*background-color:red;
margin:0 auto;
white-space:nowrap;
border-radius:2px;
box-shadow: inset 1px 2px 28px 0px #1C1B1B;
}
#time {
position:relative;
*float:left;
top:43%;
right:10px;
*bottom:15px;
font-size:40px;
font-family:'crystal', 'VT323', arial;
text-align:right;
letter-spacing: 2px;
word-spacing:5px;
*text-indent:10px;
}
#day {
position:absolute;
right:5px;
float:right;
width:auto;
font-size:35px;
font-family:'crystal', 'VT323', arial;
margin-top:0px;
margin-right:10px;
}
#divider{
position:relative;
top:7px;
background-color:#000000;
width:100%;
height:2px;
}
#zero {
position:absolute;
color:#C0C0C0;
font-family:"Karla";
left:15px;
top:110px;
}
#one {
position:absolute;
color:#C0C0C0;
font-family:"Karla";
left:17px;
top:75px;
}
#two {
position:absolute;
color:#C0C0C0;
font-family:"Karla";
left:77px;
top:75px;
}
#three {
position:absolute;
color:#C0C0C0;
font-family:"Karla";
left:142px;
top:75px;
}
#four {
position:absolute;
color:#C0C0C0;
font-family:"Karla";
left:15px;
top:40px;
}
#five {
position:absolute;
color:#C0C0C0;
font-family:"Karla";
left:77px;
top:40px;
}
#six {
position:absolute;
color:#C0C0C0;
font-family:"Karla";
left:142px;
top:40px;
}
#seven {
position:absolute;
color:#C0C0C0;
font-family:"Karla";
left:15px;
top:5px;
}
#eight {
position:absolute;
color:#C0C0C0;
font-family:"Karla";
left:77px;
top:5px;
}
#nine {
position:absolute;
color:#C0C0C0;
font-family:"Karla";
left:142px;
top:5px;
}
#period{
position:absolute;
color:#C0C0C0;
font-family:"Karla";
left:77px;
top:110px;
text-align:center;
font-weight:bold;
font-size:10px;
}
#equals {
position:absolute;
color:maroon;
font-family:"Karla";
font-size:20px;
left:142px;
top:105px;
}
#divide {
position:absolute;
color:maroon;
font-family:"Karla";
font-size:15px;
left:206px;
bottom:110px;
}
#multiply {
position:absolute;
color:maroon;
font-family:"Karla";
font-size:15px;
left:208px;
top:40px;
}
#minus {
position:absolute;
color:maroon;
font-family:"Karla";
font-size:22px;
left:208px;
top:65px;
}
#plus {
position:absolute;
color:maroon;
font-family:"Karla";
font-size:16px;
left:208px;
top:110px;
}
#greyline {
position:absolute;
top:10px;
left:8px;
width:95%;
height:4px;
background-color:#202020;
}
#line1 {
position:absolute;
top:49px;
left:8px;
width:95%;
height:1px;
background-color:#C0C0C0;
}
#line2 {
position:absolute;
top:84px;
left:8px;
width:95%;
height:1px;
background-color:#C0C0C0;
}
#line3 {
position:absolute;
top:119px;
left:8px;
width:95%;
height:1px;
background-color:#C0C0C0;
}
#line4 {
position:absolute;
top:153px;
left:8px;
width:95%;
height:1px;
background-color:#C0C0C0;
}
#textleftop {
position:absolute;
top:43px;
left:46px;
width:auto;
height:auto;
background-color:black;
z-index:1;
border-right:3px solid black;
border-left:3px solid black;
}
#textleftop p{
text-align:center;
font-size:10px;
margin:0 auto;
color:#B8860B;
font-family:"Karla"
}
#textleftbottom {
position:absolute;
top:111px;
left:46px;
width:auto;
height:auto;
background-color:black;
z-index:1;
border-right:3px solid black;
border-left:3px solid black;
}
#textleftbottom p{
text-align:center;
font-size:10px;
margin:0 auto;
color:#B8860B;
font-family:"Karla"
}
#datehour {
position:absolute;
top:41px;
right:30px;
width:auto;
height:auto;
background-color:black;
z-index:1;
border-right:3px solid black;
border-left:3px solid black;
}
#datehour p {
text-align:center;
font-size:10px;
margin:0 auto;
color:#B8860B;
font-family:"Karla"
}
#sig {
position:absolute;
top:76px;
right:30px;
width:auto;
height:auto;
background-color:black;
z-index:1;
border-right:3px solid black;
border-left:3px solid black;
}
#sig p {
text-align:center;
font-size:10px;
margin:0 auto;
color:#B8860B;
font-family:"Karla"
}
#ststp {
position:absolute;
top:111px;
right:30px;
width:auto;
height:auto;
background-color:black;
z-index:1;
border-right:3px solid black;
border-left:3px solid black;
}
#ststp p {
text-align:center;
font-size:10px;
margin:0 auto;
color:#B8860B;
font-family:"Karla"
}
#buttonarea {
position:relative;
top: 10px;
width:95%;
height:170px;
margin:0 auto;
background-color:#000000;
border-radius: 5px 5px 30px 30px;
}
button {
width:30px;
height:15px;
background-color:#101010;
border-radius:10px;
border-color:gray;
outline:none;
cursor:pointer;
cursor:hand;
}
.seven, .eight, .nine, .divide {
position:relative;
top:25px;
margin-left:35px;
float:left;
}
.four, .five, .six, .multiply {
position:relative;
top:45px;
margin-left:35px;
float:left;
}
.one, .two, .three, .minus {
position:relative;
top:65px;
margin-left:35px;
float:left;
}
.zero, .period, .equals, .plus {
position:relative;
top:85px;
margin-left:35px;
float:left;
}
#link1 {
position:relative;
bottom:15px;
background-color:#C0C0C0;
z-index:-1;
width:225px;
height:0;
margin:0 auto;
border-top:45px solid #101010;
border-left:15px solid transparent;
border-right:15px solid transparent;
}
.linkwholecenter {
position:relative;
bottom:28px;
background-color:black;
margin:0 auto;
width:70%;
height:10px;
box-shadow: inset 2px -2px 0 0 #1f1f1f;
border-radius:15px;
}
.linkwholeright {
position:absolute;
left:94%;
bottom:18px;
background-color:black;
margin:0 auto;
width:20px;
height:10px;
box-shadow: inset -2px -2px 0 0 #1f1f1f;
border-radius:20px 2px 30px 20px;
}
.linkwholeleft {
position:absolute;
right:93%;
bottom:18px;
background-color:black;
margin:0 auto;
width:20px;
height:10px;
box-shadow: inset 1px -2px 0 0 #1f1f1f;
border-radius:2px 20px 20px 30px;
}
#link2 {
position:relative;
bottom:15px;
background-color:#C0C0C0;
z-index:-1;
width:195px;
height:0;
margin:0 auto;
border-top:45px solid #181818;
border-left:15px solid transparent;
border-right:15px solid transparent;
}
#vrttxt {
position:absolute;
top:68px;
left:223px;
transform:rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
width:auto;
height:21px;
background-color:black;
white-space:nowrap;
}
#vrttxt p {
font-family:"Karla";
color:#C0C0C0;
word-spacing:25px;
font-size:10px;
}
#whtesqre {
position:absolute;
bottom:2px;
left:20px;
width:3px;
height:3px;
border:2px solid #C0C0C0;
background-color:black;
}
#whtesqre2 {
position:absolute;
bottom:2px;
left:32px;
width:7px;
height:7px;
background-color:#C0C0C0;
}
</style>
</head>
<body>
<div id=oval>
<div id=watchbody>
<div id=toplink>
</div>
<div id=watchtop>
</div>
<div id=watchleft>
</div>
<div id=watchwrap>
<div id=clockface>
<div id=brand>
<p>CASIO</p>
</div>
<div id=water>
<p>WATER RESIST
<br>ALARM CHRONO</p>
</div>
<div id=wr>
<p>WR</p>
</div>
<div id=vrttxt>
<p>ADJ MODE/C</p>
<div id=whtesqre>
</div>
<div id=whtesqre2>
</div>
</div>
<div id=clock>
<div id=day>
</div>
<div id=time>
</div>
</div>
</div>
<div id=divider>
</div>
<div id=buttonarea>
<div id=zero>
<p>0</p>
</div>
<div id=one>
<p>1</p>
</div>
<div id=two>
<p>2</p>
</div>
<div id=three>
<p>3</p>
</div>
<div id=four>
<p>4</p>
</div>
<div id=five>
<p>5</p>
</div>
<div id=six>
<p>6</p>
</div>
<div id=seven>
<p>7</p>
</div>
<div id=eight>
<p>8</p>
</div>
<div id=nine>
<p>9</p>
</div>
<div id=period>
<p>.
<br>PM</p>
</div>
<div id=equals>
<p>=</p>
</div>
<div id=divide>
<p>÷</p>
</div>
<div id=multiply>
<p>x</p>
</div>
<div id=minus>
<p>-</p>
</div>
<div id=plus>
<p>+</p>
</div>
<div id=greyline>
</div>
<div id=textleftop>
<p>▼ALM ON-OFF</p>
</div>
<div id=textleftbottom>
<p>▼LAP-RESET</p>
</div>
<div id=datehour>
<p>DATE/ST-hour▲</p>
</div>
<div id=sig>
<p>SIG ON-OFF▲</p>
</div>
<div id=ststp>
<p>START-STOP▼</p>
</div>
<!--<div class=seven>-->
<button class=seven>
</button>
<div id=line1>
</div>
<!--</div>-->
<!--<div class=eight>-->
<button class=eight>
</button>
<!--</div>-->
<!--<div class=nine>-->
<button class=nine>
</button>
<!--</div>-->
<!--<div class=divide>-->
<button class=divide id=div>
</button>
<!--</div>-->
<!--<div class=four>-->
<button class=four>
</button>
<div id=line2>
</div>
<!--</div>-->
<!--<div class=five>-->
<button class=five>
</button>
<!--</div>-->
<!--<div class=six>-->
<button class=six>
</button>
<!--</div>-->
<!--<div class=multiply>-->
<button class=multiply>
</button>
<!--</div>-->
<!--<div class=one>-->
<button class=one>
</button>
<div id=line3>
</div>
<!--</div>-->
<!--<div class=two>-->
<button class=two>
</button>
<!--</div>-->
<!--<div class=three>-->
<button class=three>
</button>
<!--</div>-->
<!--<div class=minus>-->
<button class=minus>
</button>
<!--</div>-->
<!--<div class=zero>-->
<button class=zero>
</button>
<div id=line4>
</div>
<!--</div>-->
<!--<div class=period>-->
<button class=period>
</button>
<!--</div>-->
<!--<div class=equals>-->
<button class=equals>
</button>
<!--</div>-->
<!--<div class=plus>-->
<button class=plus>
</button>
<!--</div>-->
</div>
</div>
<div id=watchright>
</div>
<div id=btnbase>
</div>
<div id=sidebtn>
</div>
<div id=watchbase>
</div>
<div id=link1>
<div class=linkwholecenter>
</div>
<div class=linkwholeright>
</div>
<div class=linkwholeleft>
</div>
</div>
<div id=link2>
<div class=linkwholecenter>
</div>
<div class=linkwholeright>
</div>
<div class=linkwholeleft>
</div>
</div>
</div>
</div>
<script>
window.onload = startTime(); dayFunction();
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
h = checkHour(h);
m = checkTime(m);
s = checkTime(s);
document.getElementById("time").innerHTML = h+":"+m+" "+" "+"\u00A0"+s;
var t = setTimeout(function(){startTime()},500);
}
function checkTime(i) {
if (i<10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
function checkHour(i) {
if (i<10) {i = "\u00A0" + i};
return i;
}
function dayFunction() {
var d = new Date();
var weekday = new Array(7);
weekday[0] = "SU";
weekday[1] = "MO";
weekday[2] = "TU";
weekday[3] = "WE";
weekday[4] = "TH";
weekday[5] = "FR";
weekday[6] = "SA";
var n = weekday[d.getDay()];
document.getElementById("day").innerHTML = n;
}
var mousedownID = -1; //Global ID of mouse down interval
function mousedown(event) {
if(mousedownID==-1) //Prevent multimple loops!
mousedownID = setInterval(whilemousedown, 2 /*execute every 1ms*/);
}
function mouseup(event) {
if(mousedownID!=-1) { //Only stop if exists
clearInterval(mousedownID);
mousedownID=-1;
}
}
function whilemousedown() {
var d = new Date();
var y = d.getFullYear();
y = y.toString().substr(2,2);
var m = d.getMonth();
var day = d.getUTCDate();
document.getElementById("time").innerHTML = y+" "+"\u00A0"+"\u00A0"+ (m+1)+"-"+ day;
/*document.getElementById("time").style.wordSpacing = "5px";*/
}
//Assign events
document.getElementById("div").addEventListener("mousedown", mousedown);
document.addEventListener("mouseup", mouseup);
//Also clear the interval when user leaves the window with mouse
document.addEventListener("mouseout", mouseup);
</script>
</body>
</html>
.