calculator_digital_clcock_gauge_01.html
<!DOCTYPE HTML>
<html>
<body>
<center><h1>Arduino HTML Magic Coding</h1></center>
</body>
<head>
<style>
body{
background-color:tan;}
.box{background-color:#3d4543;height:380px;width:520px; border-style:solid; border-color:lightblue;
border-radius:10px;position:relative;top:1px;left:1%;}
.display{background-color:#222;width:440px; position:relative;
left:2px;top:20px;height:40px;}
.display input{width:415px;position:relative;left:2px;top:2px;height:30px;
color:black;background-color:#bccd95;font-size:21px;text-align:right;}
.keys{position:relative;top:50px;}
.button{width:40px;height:30px;border-radius:8px; border-style:solid; border-color:green;
margin-left:12px;cursor:pointer;border-top:2px solid transparent;}
.button.gray{color:white;background-color:#6f6f6f;
border-bottom:black 2px solid;border-top:2px #6f6f6f solid;}
.button.pink{color:black;background-color:#ff4561;
border-bottom:black 2px solid;}
.button.black{color:white;background-color:#303030;
border-bottom:black 2px solid;border-top:2px #303030 solid;}
.button.orange{color:black;background-color:FF9933;
border-bottom:black 2px solid;border-top:2px FF9933 solid;}
.gray:active{border-top:black 2px solid;
border-bottom:2px #6f6f6f solid;}
.pink:active{border-top:black 2px solid;
border-bottom:#ff4561 2px solid;}
.black:active{border-top:black 2px solid;
border-bottom:#303030 2px solid;}
.orange:active{border-top:black 2px solid;
border-bottom:FF9933 2px solid;}
.buttondigiclock{width:125px;height:40px;border:none;border-radius:8px;margin-left:15px;
cursor:pointer;border-top:2px solid transparent;}
.buttondigiclock.black{color:white;background-color:;
border-bottom:lightblue 2px solid;border-top:2px 303030 solid;}
p{line-height:10px;}
</style>
</head>
<body>
<center>
<div class="box">
<div class="display">
<input type="text" readonly size="18" id="d">
</div>
<div class="keys">
<table><tbody>
<tr>
<td><input type="button" class="button gray" value="Pi" onclick='v("3.14159")'></td>
<td><input type="button" class="button gray" value="(" onclick='v("(")'></td>
<td><input type="button" class="button gray" value=")" onclick='v(")")'></td>
<td><input type="button" class="button black" value="7" onclick='v("7")'></td>
<td><input type="button" class="button black" value="8" onclick='v("8")'></td>
<td><input type="button" class="button black" value="9" onclick='v("9")'></td>
<td><input type="button" class="button pink" value="/" onclick='v("/")'></td>
<td><input type="button" class="button pink" value="*" onclick='v("*")'></td>
</tr>
</tbody>
<tr>
<td><input type="button" class="button black" value="4" onclick='v("4")'></td>
<td><input type="button" class="button black" value="5" onclick='v("5")'></td>
<td><input type="button" class="button black" value="6" onclick='v("6")'></td>
<td><input type="button" class="button black"value="1" onclick='v("1")'></td>
<td><input type="button" class="button black" value="2" onclick='v("2")'></td>
<td><input type="button" class="button black" value="3" onclick='v("3")'></td>
<td><input type="button" class="button pink" value="-" onclick='v("-")'></td>
<td><input type="button" class="button pink" value="+" onclick='v("+")'></td>
</tr>
<tr>
<td><input type="button" class="button black" value="0" onclick='v("0")'></td>
<td><input type="button" class="button black" value="." onclick='v(".")'></td>
<td><input type="button" class="button black" value="sin" onclick='v("Math.sin")'></td>
<td><input type="button" class="button black" value="cos" onclick='v("Math.cos")'></td>
<td><input type="button" class="button black" value="tan" onclick='v("Math.tan")'></td>
<td><input type="button" class="button black" value="log" onclick='v("Math.log")'></td>
<td><input type="button" class="button black" value="C" onclick='c("")'></td>
<td><input type="button" class="button orange" value="=" onclick='e()'></td>
</tr>
</tbody></table>
<table><tbody>
<tr>
<td>
<form name="theClock">
<input type=text class="button buttondigiclock black" name="theDate" style="font-size:20px;text-align: center;">
</td>
<td>
<input type=text class="button buttondigiclock black" name="theTime" style="font-size:20px;text-align: center;">
</form>
</td>
</tr>
</tbody></table>
<table><tbody>
<tr>
<td><center>
<body onload="updateTime()">
<!-- viewBox is coordinate system, width and height are on-screen size -->
<svg id="clock" viewBox="0 0 100 100" width="100" height="100">
<circle id="face" cx="50" cy="50" r="45"/> <!-- the clock face -->
<circle id="smallface" cx="150" cy="50" r="45"/> <!-- the small clock face -->
<g id="ticks">
<!-- 12 hour tick marks -->
<line x1='50' y1='5.000' x2='50.00' y2='10.00'/>
<line x1='72.50' y1='11.03' x2='70.00' y2='15.36'/>
<line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/>
<line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/>
<line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/>
<line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/>
<line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/>
<line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/>
<line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/>
<line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/>
<line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/>
<line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/>
</g>
<g id="smallticks">
<line x1='150' y1='5.000' x2='150.00' y2='10.00'/>
<line x1='195.00' y1='50.00' x2='190.00' y2='50.00'/>
<line x1='150.00' y1='95.00' x2='150.00' y2='90.00'/>
<line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/>
<line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/>
<line x1='105.000' y1='50.00' x2='110.00' y2='50.00'/>
</g>
<g id="numbers">
<!-- Number the cardinal directions-->
<text x="50" y="18">12</text><text x="85" y="53">3</text>
<text x="50" y="88">6</text><text x="15" y="53">9</text>
</g>
<!-- Draw hands pointing straight up. We rotate them in the code. -->
<g id="hands"> <!-- Add shadows to the hands -->
<line id="hourhand" x1="50" y1="50" x2="50" y2="24"/>
<line id="minutehand" x1="50" y1="50" x2="50" y2="20"/>
<line id="secondhand" x1="150" y1="50" x2="150" y2="20"/>
</g>
</svg>
</body></center>
</td>
</tr>
</tbody></table>
</div>
</div>
<script type='text/javascript'>
function c(val){
document.getElementById("d").value=val;}
function v(val){
document.getElementById("d").value+=val;}
function e() {
try {
c(eval(document.getElementById("d").value)) }
catch(e) {
c('Error') } }
</script>
</center>
</body>
<head>
<script>
function updateTime() { // Update the SVG clock
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = (now.getHours() % 12) + min/60;
var secangle = sec*6;
var minangle = min*6;
var hourangle = hour*30;
var actualMonth = now.getMonth() + 1;
//Prepare time output!
document.theClock.theTime.value = ""
+ now.getHours() + ":"
+ now.getMinutes() + ":"
+ now.getSeconds();
document.theClock.theDate.value = ""
+ now.getFullYear() + ":"
+ actualMonth + ":"
+ now.getDate();
// Get SVG elements for the hands of the clock
var sechand = document.getElementById("secondhand");
var minhand = document.getElementById("minutehand");
var hourhand = document.getElementById("hourhand");
// Set an SVG attribute on them to move them around the clock face
hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
sechand.setAttribute("transform", "rotate(" + secangle + ",150,50)");
setTimeout(updateTime, 1000);
}
</script>
<style>
/* These CSS styles all apply to the SVG elements defined below */
#clock {
/* styles for everything in the clock */
stroke: black;
/* black lines */
stroke-linecap: round;
/* with rounded ends */
fill: #eef;
/* on a light blue gray background */
}
#face { stroke-width: 3px;}
/* clock face outline */
#smallface { stroke:green; stroke-width: 1px;}
/* clock face outline */
#ticks { stroke-width: 2; }
/* lines that mark each hour */
#smallticks { stroke:green; stroke-width: 1; }
#hourhand {stroke-width: 5px;}
/* wide hour hand */
#minutehand {stroke: deepskyblue; stroke-width: 3px;} /* narrow minute hand */
#secondhand {stroke:red; stroke-width: 1px;}
#numbers {
/* how to draw the numbers */
font-family: sans-serif; font-size: 7pt; font-weight: bold;
text-anchor: middle; stroke: none; fill: blue;
}
</style>
</head>
</html>
'전기차 제작' 카테고리의 다른 글
| EV ART: 클릭 전기차 엔진 룸 레이아웃 디자인 작업에 관하여 (0) | 2012.09.18 |
|---|---|
| EV ART 클릭 전기차 제작 재돌입 (0) | 2012.07.11 |
| 온습도, 미세먼지 측정 및 ESP8266 NodeMCU WiFi 코딩 (0) | 2012.01.01 |
| 아날로그 시계+초시계+온도계 (0) | 2011.12.27 |
| 아날로그 시계 내부 작은 초시계 HTML+SVG (0) | 2011.12.27 |