Controller_On_calculator_01
Controller_On_calculator_01
<!--DOCTYPE html-->
<html><body><head>
<style>
body{
background-color:tan;}
.box{background-color:#3d4543;height:400px;width:250px;border-radius:10px;
position:relative;top:20px;left:0%;}
.display{background-color:#222;width:220px;position:relative;left:15px;
top:20px;height:40px;}
.display input{position:relative;left:2px;top:2px;height:35px;color:black;
background-color:#bccd95;font-size:21px;text-align:right;}
.keys{position:relative;top:15px;}
.button{width:40px;height:30px;border:none;border-radius:8px;margin-left:17px;
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;}
.button.blue{color:white;background-color:blue;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;}
.buttoncommand{width:100px;height:30px;border:none;border-radius:8px;margin-left:17px;
cursor:pointer;border-top:2px solid transparent;}
.buttoncommand.black{color:white;background-color:303030;
border-bottom:black 2px solid;border-top:2px 303030 solid;}
p{line-height:10px;}
</style></head>
<div class="box">
<div class="display"><input type="text" readonly size="18" id="d"></div>
<div class="keys">
<p><input type="button" class="button gray" value="Pi" onclick='v("3.14")'>
<input type="button" class="button gray" value="(" onclick='v("(")'>
<input type="button" class="button gray" value=")" onclick='v(")")'>
<input type="button" class="button pink" value="/" onclick='v("/")'></p>
<p><input type="button" class="button black" value="7" onclick='v("7")'>
<input type="button" class="button black" value="8" onclick='v("8")'>
<input type="button" class="button black" value="9" onclick='v("9")'>
<input type="button" class="button pink" value="*" onclick='v("*")'></p>
<p><input type="button" class="button black" value="4" onclick='v("4")'>
<input type="button" class="button black" value="5" onclick='v("5")'>
<input type="button" class="button black" value="6" onclick='v("6")'>
<input type="button" class="button pink" value="-" onclick='v("-")'></p>
<p><input type="button" class="button black"value="1" onclick='v("1")'>
<input type="button" class="button black" value="2" onclick='v("2")'>
<input type="button" class="button black" value="3" onclick='v("3")'>
<input type="button" class="button pink" value="+" onclick='v("+")'></p>
<p><input type="button" class="button black" value="0" onclick='v("0")'>
<input type="button" class="button black" value="." onclick='v(".")'>
<input type="button" class="button black" value="C" onclick='c("")'>
<input type="button" class="button orange" value="=" onclick='e()'></p>
<p><input type="button" class="button black" value="sin" onclick='v("Math.sin")'>
<input type="button" class="button black" value="cos" onclick='v("Math.cos")'>
<input type="button" class="button black" value="tan" onclick='v("Math.tan")'>
<input type="button" class="button black" value="log" onclick='v("Math.log")'>
<br><br>
<a href=http://192.168.0.9/ ><button class="buttoncommand black"> Start </button></a>
<a href=http://192.168.0.5/ ><button class="buttoncommand black"> Begin </button></a>
</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>
</body>
</html>
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 웹서버 속의 클라이언트 (0) | 2012.01.01 |
|---|---|
| 온습도계를 가진 아날로그시계 (0) | 2011.12.30 |
| 계산기+디지털시계+아날로그시계 HTML/JavaScript 코드 (0) | 2011.12.29 |
| 아두이노 NodeMCU 무선 와이파이 코딩: 아날로그 시계로 장식된 HTML/JavaScript 계산기 (0) | 2011.12.28 |
| 초보자를 위한 아두이노 와이파이 코딩 책 구매자를 위한 목차 인터넷 주소 리스트 (0) | 2011.12.08 |