多功能手表，简单实用。不舍得花钱的小伙伴，现在给自己来一块。
<!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 硬件配置...
多功能的手环，包括多级菜单、温湿度显示、闹钟设置、手电筒功能、日历显示、设置菜单。 文章链接：https://blog.csdn.net/m0_74712453/article/details/144195191
心率、体温测量并计步的多功能医疗健康手表.zip心率、体温测量并计步的多功能医疗健康手表.zip心率、体温测量并计步的多功能医疗健康手表.zip心率、体温测量并计步的多功能医疗健康手表.zip心率、体温测量并计步的多...
标题中的“带有Arduino Uno的多功能手表-项目开发”是一个基于Arduino Uno控制器的创新项目，旨在构建一个具有多种功能的手表。这种手表不仅限于显示时间，还具备其他实用功能，如温度读取、计时器和报警功能。这...
本作品设计了一种可以同时检测心率和体温，并可以实现计步功能的手表，该装置包括单片机控制器、MLX90614红外测温模块、MMA7455计步模块、系统实时时钟、Pulse Sensor心率模块、OLED12864显示模块、nRF24L01无线通信...
基于 STM32、FreeRTOS、LVGL 的强大智能手表
STM32F103C8T6是意法半导体（STMicroelectronics）推出的一款基于ARM Cortex-M3内核的微控制器，广泛应用于各种嵌入式系统设计，包括物联网设备、智能家居、工业控制以及本例中的多功能智能手表。这款芯片具有高性能...
标题中的“行业分类-电子-基于多功能电子手表的说明分析”揭示了我们即将探讨的主题，即电子行业的多功能电子手表。这种设备集成了多种功能，超越了传统手表的时间显示功能，通常包括健康监测、通讯、娱乐等多种特性...
要操作这款多功能手表，用户首先应该了解如何检查其充电状态。手表的充电状态可以通过特定的操作进行查看，具体方法是将手表模式切换至[TME]或[UTC]，随后按下并释放右上方的[@]按钮，功能指针会指示剩余电量级别，...
【天梭151多功能运动款触屏腕表】是一款结合了现代科技与经典设计的高级手表，专为追求时尚与实用性的用户设计。这款腕表不仅具备传统的计时功能，还提供了丰富的智能特性，如多时区显示、触屏操作、防水性能等。...
本文将详细介绍一种新型多功能运动手表的制作方法，这款手表在提升舒适性、实用性和安全性方面实现了多项创新。 传统的运动手表虽然功能丰富，但设计上往往存在一些不足，比如佩戴不够舒适、吸汗性能不佳、防水性能...
近期，一种集成了消毒功能的多功能智能手表的制作方法的出现，更是为我们的日常生活带来了革命性的改变。这款手表不仅具备传统手表的计时功能，而且还融合了消毒和健康管理的新技术，让我们在任何时间、任何地点都能...
标题中的“电信设备-一种具有通讯的多功能智能手表”揭示了我们要探讨的主题——一款集成了通信功能的智能手表。这款设备不仅具备传统智能手表的多种功能，还特别强调了其在通信方面的能力，可能包括打电话、发送...
在详细阐述基于STM32F103C8T6多功能健康测试腕表的设计与实现之前，需要对本文中所提及的关键组件和技术进行深入分析。本论文提出了一款集成多传感器的智能健康腕表，该腕表以STM32F103C8T6单片机为核心，集成了多种...
电子政务-多功能智能电子手表.zip
Citizen西铁城手表G90X机芯是一款先进的多功能手表，其说明书涵盖了从基本操作到高级特性的全面指南。以下是对主要知识点的详细说明： 1. **主要特长**：这款手表具有自动修正日期（包括闰年）的万年历功能，确保了...
一种基于手表拆装用多功能压机的制作方法旨在解决手表维修和装配过程中工具繁多、操作复杂、劳动强度大的问题。传统的手表拆装通常需要使用各种专用工具，这不仅增加了操作的复杂性，还加重了技术人员的工作负担，...
【标题】：“利用ds18b20做的一个手表（含代码、AD仿真文件）”这一项目涉及到的是基于单片机技术与DS18B20温度传感器制作的一款多功能手表。DS18B20是一种广泛应用的数字温度传感器，它可以直接通过单总线接口与微...
8. **复杂功能集成**：多功能手表的计时码表、闹钟等功能，对应于计算机软件的多任务处理和模块化设计，将多种功能整合在一个系统中。 9. **时间管理**：手表的日差指标反映了时间测量的精确度，而在IT行业中，时间...