多功能手表，简单实用。不舍得花钱的小伙伴，现在给自己来一块。
<!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>
.
相关推荐
毕业设计-智能多功能手表，对开源GPS自行车码表进行修改，重新设计板子增加功能设计为手表。源码及其相关文档和截图。详细情况请看我的文章：https://blog.csdn.net/m0_65636467/article/details/137262781 硬件配置...
心率、体温测量并计步的多功能医疗健康手表.zip心率、体温测量并计步的多功能医疗健康手表.zip心率、体温测量并计步的多功能医疗健康手表.zip心率、体温测量并计步的多功能医疗健康手表.zip心率、体温测量并计步的多...
标题中的“带有Arduino Uno的多功能手表-项目开发”是一个基于Arduino Uno控制器的创新项目，旨在构建一个具有多种功能的手表。这种手表不仅限于显示时间，还具备其他实用功能，如温度读取、计时器和报警功能。这...
本作品设计了一种可以同时检测心率和体温，并可以实现计步功能的手表，该装置包括单片机控制器、MLX90614红外测温模块、MMA7455计步模块、系统实时时钟、Pulse Sensor心率模块、OLED12864显示模块、nRF24L01无线通信...
基于 STM32、FreeRTOS、LVGL 的强大智能手表
STM32F103C8T6是意法半导体（STMicroelectronics）推出的一款基于ARM Cortex-M3内核的微控制器，广泛应用于各种嵌入式系统设计，包括物联网设备、智能家居、工业控制以及本例中的多功能智能手表。这款芯片具有高性能...
标题中的“行业分类-电子-基于多功能电子手表的说明分析”揭示了我们即将探讨的主题，即电子行业的多功能电子手表。这种设备集成了多种功能，超越了传统手表的时间显示功能，通常包括健康监测、通讯、娱乐等多种特性...
【天梭151多功能运动款触屏腕表】是一款结合了现代科技与经典设计的高级手表，专为追求时尚与实用性的用户设计。这款腕表不仅具备传统的计时功能，还提供了丰富的智能特性，如多时区显示、触屏操作、防水性能等。...
标题中的“电信设备-一种具有通讯的多功能智能手表”揭示了我们要探讨的主题——一款集成了通信功能的智能手表。这款设备不仅具备传统智能手表的多种功能，还特别强调了其在通信方面的能力，可能包括打电话、发送...
在详细阐述基于STM32F103C8T6多功能健康测试腕表的设计与实现之前，需要对本文中所提及的关键组件和技术进行深入分析。本论文提出了一款集成多传感器的智能健康腕表，该腕表以STM32F103C8T6单片机为核心，集成了多种...
一种新型多功能运动手表的制作方法主要关注的是提升运动手表的舒适性、实用性以及安全性。这款手表设计了一系列创新点，以解决传统运动手表存在的问题。 首先，手表表盘两侧固定有手表表带，使得用户可以方便地佩戴...
电子政务-多功能智能电子手表.zip
一种多功能智能消毒手表的制作方法旨在克服传统消毒方式的不便，提供一个集成在手表中的消毒系统，方便用户随时随地对手部或其他部位进行消毒。这款手表融合了先进的科技元素，旨在提高便携性和实用性。 手表主体由...
Citizen西铁城手表G90X机芯是一款先进的多功能手表，其说明书涵盖了从基本操作到高级特性的全面指南。以下是对主要知识点的详细说明： 1. **主要特长**：这款手表具有自动修正日期（包括闰年）的万年历功能，确保了...
一种基于手表拆装用多功能压机的制作方法旨在解决手表维修和装配过程中工具繁多、操作复杂、劳动强度大的问题。传统的手表拆装通常需要使用各种专用工具，这不仅增加了操作的复杂性，还加重了技术人员的工作负担，...
【标题】：“利用ds18b20做的一个手表（含代码、AD仿真文件）”这一项目涉及到的是基于单片机技术与DS18B20温度传感器制作的一款多功能手表。DS18B20是一种广泛应用的数字温度传感器，它可以直接通过单总线接口与微...
8. **复杂功能集成**：多功能手表的计时码表、闹钟等功能，对应于计算机软件的多任务处理和模块化设计，将多种功能整合在一个系统中。 9. **时间管理**：手表的日差指标反映了时间测量的精确度，而在IT行业中，时间...
_基于STM32的多功能智能健康手表设计.caj
标题中的“基于STM32F103C8T6多功能健康测试腕表的设计与实现”揭示了这个项目的核心——一款结合了健康监测功能的智能腕表，它使用了STM32F103C8T6微控制器作为核心处理单元。STM32F103C8T6是意法半导体...
此外，还有古董手表、多功能手表和卡通手表等特色市场。\n\n目标市场的选择需要综合考虑市场规模、内部结构吸引力和企业资源条件。理想的目标市场应有适度需求规模和发展趋势，内部竞争环境和企业资源匹配。企业可...