计算器

 

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>

<meta name="keywords" content="js javascript 计算器 北京时间 js获取当前时间"/>
<meta name="description" content="作者：吴俊峰" />

<title>计算器</title>
<style>
*{padding: 0;margin: 0;}
table{border-collapse: collapse;width: 500px;height: 500px;background-color: lightslategray;border-radius: 50px;margin-top:200px;}
input{border-radius:30px ;height: 50px;width: 100px;background-color: black;color: white;}
td{text-align: center;}
.display{width: 300px;height: 40px;}
input:hover{background-color: red;}
</style>
</head>
<body>
<center>
<table border="0" cellspacing="" cellpadding="" >
<caption>js制作计算器</caption>
<tr>
    <th colspan="3"><input type="text" placeholder="显示屏" class="display"></th>
    <th><input type="button" name="" id="" value="Power" onclick="Power()"/></th>
</tr>

<tr>
<td colspan="3" align="center"><span></span></td>
<td><input type="button" id="" value="北京时间" onclick="pam()"/></td>
</tr>


<tr>
    <td><input type="button" name="" id="" value="1" onclick="fun(this)"/></td>
    <td><input type="button" name="" id="" value="2" onclick="fun(this)"/></td>
    <td><input type="button" name="" id="" value="3" onclick="fun(this)"/></td>
    <td><input type="button" name="" id="jia" value="+" onclick="fun(this)"/></td>
</tr>
<tr>
    <td><input type="button" name="" id="" value="4" onclick="fun(this)"/></td>
    <td><input type="button" name="" id="" value="5" onclick="fun(this)"/></td>
    <td><input type="button" name="" id="" value="6" onclick="fun(this)"/></td>
    <td><input type="button" name="" id="jian" value="-" onclick="fun(this)"/></td>
</tr>
<tr>
    <td><input type="button" name="" id="" value="7" onclick="fun(this)"/></td>
    <td><input type="button" name="" id="" value="8" onclick="fun(this)"/></td>
    <td><input type="button" name="" id="" value="9" onclick="fun(this)"/></td>
    <td><input type="button" name="" id="chen" value="*" onclick="fun(this)"/></td>
</tr>
<tr>
   <td><input type="button" name="" id="" value="0" onclick="fun(this)"/></td>
   <td><input type="button" name="" id="" value="Backspace" onclick="Back()"/></td>
   <td><input type="button" name="" id="chu" value="/" onclick="fun(this)"/></td>
   <td><input type="button" name="" id="dengyu" value="=" onclick="dengyu()"/></td>
</tr>
</table>
</center>
</body>
<script type="text/javascript">
var display = document.getElementsByClassName('display')[0];

//显示功能
function fun(a){
display.value += a.value;
}

//运算功能
function dengyu(){
display.value = eval(display.value);
}

//退格功能
function Back(){
display.value = display.value.substr(0,display.value.length-1);
}

//电源键功能
function Power(){
display.value = null;
}

//时间功能
var time = document.getElementsByTagName('span')[0];
time.style.color='black';
function pam(){

if(time.style.display=='none'){
time.style.display= 'block';
}else{
time.style.display= 'none';
}

}

function Time(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDay();
var hour = date.getHours();
var minute = date.getMinutes();
var sec = date.getSeconds();
time.innerHTML = year+'年'+month+'月'+day+'日'+'&nbsp;&nbsp;'+hour+':'+minute+':'+sec;

//setTimeout("Time()",1000);
}
setInterval("Time()",1000);


</script>
</html>

 

效果图如下：

 

10:33:34

posted @ 2017-09-20 10:34  龙卷风之殇  阅读(287)  评论(1)    收藏  举报