console
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computer of juju</title>
</head>
<body>
<style type="text/css">
*{
border: none;
font-family: 'Open Sans',sans-serif;
margin: 0;
padding: 0;
}
h1{
color: #495678;
font-size: 30px;
margin-top: 20px;
padding-top: 50px;
display: block;
text-align: center;
text-decoration: none;
}
form{
background-color: #495678;
box-shadow: 4px 4px #3d4a65;
margin: 40px auto;
padding: 40px 0 30px 40px;
width:280px;
}
.btn{
outline: none;
cursor: pointer;
font-size: 20px;
height: 45px;
margin: 5px 0 5px 10px;
width: 45px;
}
.btn :first-child{
margin: 5px 0 5px 10px;
}
.btn,#display,form{
border-radius: 25px;
}
#display{
height: 47px;
outline: none;
background-color: #98d1dc;
box-shadow: inset 6px 6px 0px #3facc0;
color: #dededc;
font-size: 20px;
text-align: right;
width: 115px;
padding-right: 10px;
margin-left: 5px;
}
.num{
background-color:#72778b;
box-shadow: 0 5px #5f6680;
color: #dededc;
}
.num:active{
box-shadow: 0 2px #5f6680;
}
.op{
background-color: #dededc;
box-shadow: 0 5px #5f6680;
color: #72778b;
}
.op:active{
box-shadow: 0 2px #5f6680;
}
.other{
background-color: #e3844c;
box-shadow: 0 5px #e76a3d;
color: #dededc;
}
.other:active{
box-shadow: 0 2px #e76a3d;
}
</style>
<h1>计算器</h1>
<form>
<input type="button" id="clear" class="btn other" value="C">
<input type="button" id="delete" class="btn other" value="D">
<input tupe="text" id="display">
<br>
<input type="button" class="btn num" value="7" onclick="get(this.value);">
<input type="button" class="btn num" value="8" onclick="get(this.value);">
<input type="button" class="btn num" value="9" onclick="get(this.value);">
<input type="button" class="btn op" value="+" onclick="get(this.value);">
<br>
<input type="button" class="btn num" value="4" onclick="get(this.value);">
<input type="button" class="btn num" value="5" onclick="get(this.value);">
<input type="button" class="btn num" value="6" onclick="get(this.value);">
<input type="button" class="btn op" value="*" onclick="get(this.value);">
<br>
<input type="button" class="btn num" value="1" onclick="get(this.value);">
<input type="button" class="btn num" value="2" onclick="get(this.value);">
<input type="button" class="btn num" value="3" onclick="get(this.value);">
<input type="button" class="btn op" value="-" onclick="get(this.value);">
<br>
<input type="button" class="btn num" value="0" onclick="get(this.value);">
<input type="button" class="btn op" value="." onclick="get(this.value);">
<input type="button" class="btn op" value="/" onclick="get(this.value);">
<input type="button" class="btn other" id="cal" value="=">
</form>
<p align="center" id="time"></p>
</body>
<script>
function get(num){
var shownums=document.getElementById("display");
shownums.value+=num;
}
var cc=document.getElementById("clear");
function clear(){
document.getElementById("display").value="";
}
var dd=document.getElementById("delete");
cc.addEventListener("click",clear,false);
function backspace(){
var shownums= document.getElementById("display");
shownums.value=shownums.value.substring(0,shownums.value.length-1)
}
dd.addEventListener("click",backspace,false);
var re=document.getElementById("cal");
function cal(){
var result=0;
result=document.getElementById("display").value;
document.getElementById("display").value=eval(result);
}
re.addEventListener("click",cal,false)
function showTime(){
var today=new Date();
var y=today.getFullYear();
var M=today.getMonth()+1;
var d=today.getDate();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
var week=today.getDay();
var w=new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
document.getElementById("time").innerHTML=y+"年"+M+"月"+d+"日"+"</br>"+h+":"+m+":"+s+" "+w[week];
setTimeout("showTime()",1000);
}
function checkTime(i){
if(i<10){
i="0"+i;
}
return i;
}
window.onload=function() {
showTime();
}
</script>
</html>