📚题目要求
项目提成为只读模式，要求有3个角色可以选择，分别为程序员、项目经理、销售人员。效果图如下，要按照每个角色，点击“计算”按钮，可以进行计算。
📚题目提供的代码如下
(本题的部分考点内容与20226月考试题目不一样)
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><(1)> * { margin: 0; padding: 0; } header { text-align: center; margin-bottom: 15px; } #box { margin: 20px auto 0; width: 300px; text-align: center; } #bonus { height: 50px; width: 280px; background-color: #f3f3f3; } #benefit { height: 25px; width: 140px; } (2) { height: 22px; width: 130px; vertical-align: bottom; } #count { padding-top: 10px; padding-right: 11px; text-align: right; } #countBtn { height: 25px; width: 70px; text-align: center; background-color: #ffffff; cursor: pointer; } #benefit, #roles#countBtn, #bonus { border: 1px solid #d4d4d4; } </(1)><(4)> function roles() { // 程序员提成计算 this.programmer = (5) { if ((6) > 10000) { return data * 0.05; } else if (data >= 2000) { return 50; } else { return 0; } } // 项目经理提成计算 this.manager = (5) { if ((6) > 20000) { return data * 0.2; } else { return data * 0.1; } } // 销售人员提成计算 this.salesman = (5) { if ((6) > 100000) { return data * 0.3; } else if (data >= 50000) { return data * 0.2 } else { return data * 0.05; } } } // 提成对象 function bonus() { // 项目收益 this.benefit = 0; } bonus.(7).setBenefit = function (data) { // 设置项目收益 this.benefit = data; } // 设置bonus的原型链roles bonus.(8) = new roles(); bonus.(7).getBonus = function (role) { // 通过角色策略方法计算返回提成 (9) role(this.benefit); } // 创建bonus的实例对象 var bonusCount = (10) bonus(); // 角色策略筛选 var strategies = { "1": function () { // 程序员角色策略计算 return bonusCount.(11)(bonus.programmer); }, "2": function () { // 项目经理角色策略计算 return bonusCount.(11)(bonus.manager); }, "3": function () { // 销售人员角色策略计算 return bonusCount.(11)(bonus.salesman); } } function countFun() { // 获取项目受益值 var benefit = document.(13)("benefit").value; // 获取选择的角色值 var roles = document.(13)("roles").value; // 设置项目收益 bonusCount.(12)(benefit); //角色策略对应的提成计算值 document.(13)("bonus").value = strategies[role](); } </(4)></head><body><divid="box"><header>项目提成计算器</header><divid="dataBox"><inputtype="text"id="bonus"(14)="(14)"placeholder="项目提成"></div><inputtype="text"id="benefit"value="0"><selectname=""id="roles"><optionvalue="1">程序员</option><optionvalue="2">项目经理</option><optionvalue="3">销售人员</option></select><divid="count"><inputtype="button"id="countBtn"value="计算"(15)="countFun()"></div></div></body></html>
📚完整代码如下
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style> * { margin: 0; padding: 0; } header { text-align: center; margin-bottom: 15px; } #box { margin: 20pxauto0; width: 300px; text-align: center; } #bonus { height: 50px; width: 280px; background-color: #f3f3f3; } #benefit { height: 25px; width: 140px; } #roles { height: 22px; width: 130px; vertical-align: bottom; } #count { padding-top: 10px; padding-right: 11px; text-align: right; } #countBtn { height: 25px; width: 70px; text-align: center; background-color: #ffffff; cursor: pointer; } #benefit, #roles#countBtn, #bonus { border: 1pxsolid#d4d4d4; } </style><script>functionroles() { // 程序员提成计算this.programmer=function(data) { if (data>10000) { returndata*0.05; } elseif (data>=2000) { return50; } else { return0; } } // 项目经理提成计算this.manager=function(data) { if (data>20000) { returndata*0.2; } else { returndata*0.1; } } // 销售人员提成计算this.salesman=function(data) { if (data>100000) { returndata*0.3; } elseif (data>=50000) { returndata*0.2 } else { returndata*0.05; } } } // 提成对象functionbonus() { // 项目收益this.benefit=0; } bonus.prototype.setBenefit=function (data) { // 设置项目收益this.benefit=data; } // 设置bonus的原型链rolesbonus.__proto__=newroles(); bonus.prototype.getBonus=function (role) { // 通过角色策略方法计算返回提成returnrole(this.benefit); } // 创建bonus的实例对象varbonusCount=newbonus(); // 角色策略筛选varstrategies= { "1": function () { // 程序员角色策略计算returnbonusCount.getBonus(bonus.programmer); }, "2": function () { // 项目经理角色策略计算returnbonusCount.getBonus(bonus.manager); }, "3": function () { // 销售人员角色策略计算returnbonusCount.getBonus(bonus.salesman); } } functioncountFun() { // 获取项目受益值varbenefit=document.getElementById("benefit").value; // 获取选择的角色值varrole=document.getElementById("roles").value; // 设置项目收益bonusCount.setBenefit(benefit); //角色策略对应的提成计算值document.getElementById("bonus").value=strategies[role](); } </script></head><body><divid="box"><header>项目提成计算器</header><divid="dataBox"><inputtype="text"id="bonus"readonly="readonly"placeholder="项目提成"></div><inputtype="text"id="benefit"value="0"><selectname=""id="roles"><optionvalue="1">程序员</option><optionvalue="2">项目经理</option><optionvalue="3">销售人员</option></select><divid="count"><inputtype="button"id="countBtn"value="计算"onclick="countFun()"></div></div></body></html>
📚题目分析
①关于该试题整体难度为难，考核点其实还算常规考核点
②本题的考核主要是JavaScript，包括了表单的只读属性和点击事件，js定义函数，js获取元素等知识，这些属于较简单的题目。
③此题的项目提成计算器使用了原型和原型链，如果之前没了解过这个知识点，这题就难做了不过也可以写对10空以上的这题，这块知识点是JavaScript中相对难以理解的内容，在完成某一个功能时，一般使用的是面向过程的编程思想。
📚实现效果
