课后作业2
<!DOCTYPE html>
<html>
<head>
<meat charset="utf-8">
<title>计算器代码</title>
<style>
*{margin: 0px; padding: 0px;}
.errorHint{position: absolute; left: 330px; top:-500px;}
.showError{border:1px solid yellow;}
table{ border: 2px solid black; width: 800px; padding: 80px; margin: 300px auto; left center no-repeat; border-radius: 10px;}
table td{
text-align: center;
width: 200px;
height: 100px;
padding-left: 6px;
padding-bottom: 6px;
}
table th{
font-size: 28px;
font-family:'楷体';
color: green ;
}
table td button{
width: 98%;
height: 98%;
font-size: 16px;
font-family: 'Microsoft yahei';
background: none;
color: mediumvioletred;
outline:none;
border:1px solid blueviolet;
border-radius: 5px;
cursor: pointer;
}
table td input{
width: 100%;
margin: 10px 0;
padding: 5px;
border:1px solid midnightblue;
box-sizing: border-box;
text-align: right;
font-size: 16px;
font-family: 'Microsoft yahei';
}
<html>
<head>
<meat charset="utf-8">
<title>计算器代码</title>
<style>
*{margin: 0px; padding: 0px;}
.errorHint{position: absolute; left: 330px; top:-500px;}
.showError{border:1px solid yellow;}
table{ border: 2px solid black; width: 800px; padding: 80px; margin: 300px auto; left center no-repeat; border-radius: 10px;}
table td{
text-align: center;
width: 200px;
height: 100px;
padding-left: 6px;
padding-bottom: 6px;
}
table th{
font-size: 28px;
font-family:'楷体';
color: green ;
}
table td button{
width: 98%;
height: 98%;
font-size: 16px;
font-family: 'Microsoft yahei';
background: none;
color: mediumvioletred;
outline:none;
border:1px solid blueviolet;
border-radius: 5px;
cursor: pointer;
}
table td input{
width: 100%;
margin: 10px 0;
padding: 5px;
border:1px solid midnightblue;
box-sizing: border-box;
text-align: right;
font-size: 16px;
font-family: 'Microsoft yahei';
}
</style>
</head>
<body>
<div class="errorHint" id="errorHint"></div>
<table cellpadding="0">
<tr>
<th colspan="5">计算机</th>
</tr>
<tr>
<td colspan="5">
<input type="text" value="0" name="showResult">
</td>
</tr>
<tr>
<td><button>9</button></td>
<td><button>8</button></td>
<td><button>7</button></td>
<td><button class="setChange" id="backSpace">C</button></td>
<td><button class="setChange" id="clearNum">回退</button></td>
</tr>
<tr>
<td><button>6</button></td>
<td><button>5</button></td>
<td><button>4</button></td>
<td><button>-</button></td>
<td><button>+</button></td>
</tr>
<tr>
<td><button>3</button></td>
<td><button>2</button></td>
<td><button>1</button></td>
<td><button>/</button></td>
<td><button>*</button></td>
</tr>
<tr>
<td><button>0</button></td>
<td><button>.</button></td>
<td colspan="2"><button class="setChange" id="gainResult">=</button></td>
</tr>
</table>
<script type="text/javascript" src='index.js'>
</script>
<script type="text/javascript">
var oinput=document.getElementsByTagName('input')[0];
//获取外部样式
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}
</head>
<body>
<div class="errorHint" id="errorHint"></div>
<table cellpadding="0">
<tr>
<th colspan="5">计算机</th>
</tr>
<tr>
<td colspan="5">
<input type="text" value="0" name="showResult">
</td>
</tr>
<tr>
<td><button>9</button></td>
<td><button>8</button></td>
<td><button>7</button></td>
<td><button class="setChange" id="backSpace">C</button></td>
<td><button class="setChange" id="clearNum">回退</button></td>
</tr>
<tr>
<td><button>6</button></td>
<td><button>5</button></td>
<td><button>4</button></td>
<td><button>-</button></td>
<td><button>+</button></td>
</tr>
<tr>
<td><button>3</button></td>
<td><button>2</button></td>
<td><button>1</button></td>
<td><button>/</button></td>
<td><button>*</button></td>
</tr>
<tr>
<td><button>0</button></td>
<td><button>.</button></td>
<td colspan="2"><button class="setChange" id="gainResult">=</button></td>
</tr>
</table>
<script type="text/javascript" src='index.js'>
</script>
<script type="text/javascript">
var oinput=document.getElementsByTagName('input')[0];
//获取外部样式
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}
function move(obj,attr,tar){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=parseInt(getStyle(obj,attr));
var itarget=parseInt(tar);
var speed=(itarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px';
if(speed==0){
clearInterval(obj.timer);
}
},30);
}
function addEvent(obj,ev,fun){
if(obj.attachEvent){
obj.attachEvent('on'+ev,fun);
}else{
obj.addEventListener(ev,fun,false);
}
}
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=parseInt(getStyle(obj,attr));
var itarget=parseInt(tar);
var speed=(itarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px';
if(speed==0){
clearInterval(obj.timer);
}
},30);
}
function addEvent(obj,ev,fun){
if(obj.attachEvent){
obj.attachEvent('on'+ev,fun);
}else{
obj.addEventListener(ev,fun,false);
}
}
function stopEvent(ev){
var e=ev||window.event;
if(e.preventDefault){
e.preventDefault();
}
else{
e.returnValue=false;//ie
}
}
function getResult(){
function evalResult(){
var result=eval(oinput.value);
return result;
}
try{
var x=evalResult();
return x;
}
catch (e){
oinput.className='showError';
var errorHint=document.getElementById('errorHint');
move(errorHint,'top',0);
setTimeout(function(){
oinput.className='';
move(errorHint,'top',-282);
},2000);
return oinput.value;
}
}
function enterResult(ev){
var e=ev||window.event;
if(e.keyCode==13){
stopEvent(ev);
var result=getResult();
oinput.value=result;
}
}
function init(){
var otable=document.getElementsByTagName('table')[0];
addEvent(otable,'keydown',function(ev){
enterResult(ev);
});
addEvent(otable,'click',function(ev){
stopEvent(ev);
var e=ev||window.event;
var itat=e.target||e.srcElement;
var obtns=document.getElementsByTagName('button');
if(itat.nodeName.toLowerCase()=='button'){
for(var i=0;i<obtns.length;i++){
obtns[i].style.borderColor='#000';
}
itat.style.borderColor='white';
if(itat.className!='setChange'){
if(oinput.value=='0'){
oinput.value='';
oinput.value+=itat.innerHTML;
}
else{
oinput.value+=itat.innerHTML;
}
}else{
if(itat.id=='backSpace'){
oinput.value=oinput.value.toString().slice(0,-1);
}
else if(itat.id=='clearNum'){
oinput.value='0';
}else{
var result=getResult();
oinput.value=result;
}
}
}
});
}
init();
var e=ev||window.event;
if(e.preventDefault){
e.preventDefault();
}
else{
e.returnValue=false;//ie
}
}
function getResult(){
function evalResult(){
var result=eval(oinput.value);
return result;
}
try{
var x=evalResult();
return x;
}
catch (e){
oinput.className='showError';
var errorHint=document.getElementById('errorHint');
move(errorHint,'top',0);
setTimeout(function(){
oinput.className='';
move(errorHint,'top',-282);
},2000);
return oinput.value;
}
}
function enterResult(ev){
var e=ev||window.event;
if(e.keyCode==13){
stopEvent(ev);
var result=getResult();
oinput.value=result;
}
}
function init(){
var otable=document.getElementsByTagName('table')[0];
addEvent(otable,'keydown',function(ev){
enterResult(ev);
});
addEvent(otable,'click',function(ev){
stopEvent(ev);
var e=ev||window.event;
var itat=e.target||e.srcElement;
var obtns=document.getElementsByTagName('button');
if(itat.nodeName.toLowerCase()=='button'){
for(var i=0;i<obtns.length;i++){
obtns[i].style.borderColor='#000';
}
itat.style.borderColor='white';
if(itat.className!='setChange'){
if(oinput.value=='0'){
oinput.value='';
oinput.value+=itat.innerHTML;
}
else{
oinput.value+=itat.innerHTML;
}
}else{
if(itat.id=='backSpace'){
oinput.value=oinput.value.toString().slice(0,-1);
}
else if(itat.id=='clearNum'){
oinput.value='0';
}else{
var result=getResult();
oinput.value=result;
}
}
}
});
}
init();
</script>
</body>
</html>
</body>
</html>
