自己期末复习的时候就一直想要写一个计算器,闲暇的时候也在想具体怎么实现,觉得应该不难,但就是想写。昨天终于可以开始动工,刚开始还以为实现出来需要一个周左右至少两天的时间,想着实现完我就可以先回家两天了,但没想到整个实现过程算比较顺利吧,昨天用了大概六个小时完成了从设计到具体实现。
有大概一个月没怎么写代码了,整个大脑都不适应,反应也慢,一些基本的东西都有点模糊不清了。可能是原来就没有太理解,再加上没有其余练习,导致效率有些低。
<强>正文
& lt; div类=" errorHint " id=" errorHint祝辞& lt; img src=" https://github.com/crystalYY/calculator/blob/master/img/error.png& # 63;生=true”祝辞& lt;/div>
& lt;表格单元格边距=" 0 "比;
& lt; tr>
& lt; th colspan=" 5 "祝辞计算器& lt;/th>
& lt;/tr>
& lt; tr>
& lt; td colspan=?”比;
& lt;输入类型="文本" value=" https://www.yisu.com/zixun/0 " name=" showResult祝辞
& lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> & lt; button> 7 & lt;/button> & lt;/td>
& lt; td> & lt; button> 8 & lt;/button> & lt;/td>
& lt; td> & lt; button> 9 & lt;/button> & lt;/td>
& lt; td> & lt;按钮类=" setChange " id=巴烁瘛痹谕烁? lt;/button> & lt;/td>
& lt; td> & lt;按钮类=" setChange " id=" clearNum祝辞C & lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> & lt; button> 4 & lt;/button> & lt;/td>
& lt; td> & lt; button> 5 & lt;/button> & lt;/td>
& lt; td> & lt; button> 6 & lt;/button> & lt;/td>
& lt; td> & lt; button> + & lt;/button> & lt;/td>
& lt; td> & lt; button> & lt;/button> & lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> & lt; button> 1 & lt;/button> & lt;/td>
& lt; td> & lt; button> 2 & lt;/button> & lt;/td>
& lt; td> & lt; button> 3 & lt;/button> & lt;/td>
& lt; td> & lt; button> * & lt;/button> & lt;/td>
& lt; td> & lt; button>/& lt;/button> & lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> & lt; button> 0 & lt;/button> & lt;/td>
& lt; td> & lt; button>灵活;/button> & lt;/td>
& lt; td> & lt; button> % & lt;/button> & lt;/td>
& lt; td colspan=" 2 "祝辞& lt;按钮类=" setChange " id=" gainResult祝辞Enter & lt;/td>
& lt;/tr>
& lt;/table>
& lt;脚本type=" text/javascript src=" https://www.yisu.com/zixun/index.js "比;
& lt;/script>
*{保证金:0 px;填充:0 px;}
.errorHint{:绝对;左:130 px;上图:-282 px;}
.showError{边界:1 px固体红色;}
表{边界:2 px固体# 996 c33;宽度:550 px;填充:10 px;保证金:150 px的汽车;背景:url (https://github.com/crystalYY/calculator/blob/master/img/bg2.jpg& # 63;生=trueg)离开中心不再重演;border - radius: 10 px;}
表td {
text-align:中心;
宽度:100 px;
高度:40像素;
padding-left: 2 px;
padding-bottom: 2 px;
}
表th {
字体大小:18 px;
字体类型:“楷体”;
颜色:# 8 b0000;
}
表td按钮{
宽度:98%;
高度:98%;
字体大小:16 px;
字体类型:“微软yahei”;
背景:无;
颜色:# 8 b4726;
大纲:没有;
边界:1 px固体# 000;
border - radius: 5 px;
光标:指针;
}
表td输入{
宽度:100%;
保证金:10 px 0;
填充:5 px;
边界:1 px固体# 996 c33;
box-sizing: border-box;
text-align:正确;
字体大小:16 px;
字体类型:“微软yahei”;
}
var oinput=document.getElementsByTagName(“输入”)[0];//获取外部样式
函数getStyle (obj,名称)
{
如果(obj.currentStyle)
{
返回obj.currentStyle[名字];
}
其他的
{
返回getComputedStyle (obj, false)[名字];
}
}//渐变动画
函数移动(obj, attr,焦油){
clearInterval (obj.timer);
obj.timer=setInterval(函数(){
var cur=方法(getStyle (obj, attr));
var itarget=方法(tar);
var速度=(itarget-cur)/6;
速度=speed> 0 & # 63; Math.ceil(速度):Math.floor(速度);
obj.style [attr]=方法(getStyle (obj, attr)) +速度+“px”;
如果(速度==0){
clearInterval (obj.timer);
}
},30);
}//事件绑定函数
函数addEvent (obj, ev,乐趣){
如果(obj.attachEvent) {
obj.attachEvent (' ' + ev、有趣);
其他}{
obj.addEventListener (ev,有趣,假);
}
}//阻止默认行为
函数stopEvent (ev) {
var e=ev | | window.event;
如果(e.preventDefault) {
e.preventDefault ();
}
其他{
e.returnValue=https://www.yisu.com/zixun/false;//ie
}
}//计算最终结果
函数getResult () {
函数evalResult () {
结果var=eval (oinput.value);
返回结果;
}//捕获异常
尝试{
var x=evalResult ();
返回x;
}
抓住(e) {
oinput.className=皊howError”;
var errorHint=. getelementbyid (“errorHint”);
移动(errorHint,“顶级”,0);
setTimeout(函数(){
oinput.className=";
移动(errorHint,‘前’,-282);
},2000);
返回oinput.value;
}
}//文本框获取焦点,错误提示消失//按下回车得到结果
函数enterResult (ev) {
var e=ev | | window.event;
如果(e.keyCode==13) {
stopEvent (ev);//阻止输入键的默认行为
var=结果getResult ();
oinput.value=https://www.yisu.com/zixun/result;
}
}//绑定点击事件
init()函数{
var otable=document.getElementsByTagName(“表”)[0];
addEvent (otable keydown,函数(ev) {
enterResult (ev);
});
addEvent (otable,“点击”,函数(ev) {
stopEvent (ev);
var e=ev | | window.event;
var的itat=e。target | | e.srcElement;
var obtns=document.getElementsByTagName(“按钮”);
如果(itat.nodeName.toLowerCase()==鞍磁ァ?{
我(var=0; i< obtns.length;我+ +){
obtns[我].style.borderColor=? 000”;
}
itat.style.borderColor=鞍住?
如果(itat.className !=setChange) {
如果(oinput.valuehttps://www.yisu.com/zixun/=='0”) {
oinput.value=";
oinput.value +=itat.innerHTML;
}
其他{
oinput.value +=itat.innerHTML;
}
其他}{
如果(itat.id==巴烁瘛?{
oinput.value=https://www.yisu.com/zixun/oinput.value.toString () .slice (0,1);
}
else if (itat.id==clearNum) {
oinput.value=' https://www.yisu.com/zixun/0 ';
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
