老师您可以帮我看看我这个计算机的面向编程写法提点意见吗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.calculator{
width: 300px;
margin: 100px auto;
}
.calculator_num{
margin-bottom: 10px;
}
.calculator_num input{
width: 100px;
height: 15px;
}
</style>
</head>
<body>
<div id="calculator">
<div class="calculator_num">
<input type="text" class="inp1">
<em class="operator">/</em>
<input type="text" class="inp2">
<em>=</em>
<span class="result">15</span>
</div>
<div class="calculator_btn">
<button class="add">+</button>
<button class="sub">-</button>
<button class="mul">*</button>
<button class="division">/</button>
</div>
</div>
<script>
var that;
class Operation{
constructor(id,inp1Class,inp2Class,result){
that=this;
/* 获取元素 */
this.calculator=document.querySelector(id);
this.inp1=this.calculator.querySelector(inp1Class);
this.inp2=this.calculator.querySelector(inp2Class);
this.result=this.calculator.querySelector(result);
this.operator=this.calculator.querySelector('.operator');
this.add=this.calculator.querySelector('.add');
this.sub=this.calculator.querySelector('.sub');
this.mul=this.calculator.querySelector('.mul');
this.divisi=this.calculator.querySelector('.division');
/* 创建对象实例时绑定事件 */
this.init();
}
/* 绑定事件 */
init(){
this.add.onclick=this.addition;
this.sub.onclick=this.subtraction;
this.mul.onclick=this.multiplication;
this.divisi.onclick=this.division;
}
/* 复用函数 */
simpleoperation(symbol2){
that.operator.innerHTML=symbol2;
}
/* 加法功能 */
addition(){
that.result.innerHTML=+that.inp1.value+ +that.inp2.value;
that.simpleoperation(this.innerHTML)
}
/* 减法功能 */
subtraction(){
that.result.innerHTML=that.inp1.value-that.inp2.value;
that.simpleoperation(this.innerHTML);
}
/* 乘法功能 */
multiplication(){
that.result.innerHTML=that.inp1.value*that.inp2.value;
that.simpleoperation(this.innerHTML);
}
/* 除法功能 */
division(){
that.result.innerHTML=that.inp1.value/that.inp2.value;
that.simpleoperation(this.innerHTML);
}
}
new Operation('#calculator','.inp1','.inp2','.result');
</script>
</body>
</html>
正在回答
同学你好，自己不会封装这个很正常，因为你才刚入门，没有什么经验。这个也不需要你专门去训练，因为它是一个经验的积累。平时看视频，跟着老师敲几遍代码，学习老师是怎么封装的。当然了，不同的人，封装的代码可能也会不一样。所以你别着急，当下最重要的任务打好基础。等以后工作了，积累经验多了，慢慢就有自己的一套方式了。
祝学习愉快 ~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星