标签：练习 代码 JavaScript value cal 新手 click 计算器
最适合新手练习JavaScript的小项目：网页计算器
网页计算器是由HTML和CSS以及最重要的JavaScript来构建出来的，能和普通的计算器一样进行各种运算包括开根号等等的复杂运算，并且有助于理解JavaScript中的面向对象和函数调用并且全长代码只有80行，是最适合新手的小项目了
不多BB上代码：
<!doctype html>
<html lang="en">
<head>
<!-- 添加文档头部内容 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="author" content="king">
<meta name="revised" content="king,08/05/2017">
<meta name="generator" content="WebStorm 2016.2.4">
<meta name="description" content="CSS & CSS3">
<meta name="keywords" content="HTML5, CSS, JavaScript">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>JavaScript 在线计算器</title>
</head>
<body>
<!-- 添加文档主体内容 -->
<header>
<nav>JavaScript - 在线计算器（Calculator）</nav>
</header>
<hr>
<!-- 添加文档主体内容 -->
<table>
<tr>
<td colspan="1">
<input type="text" id="id-input-text-calculator" />
</td>
<td colspan="1">
<input type="button" id="id-input-btn-calculator" onclick="on_cal_click()" value="计算"/>
</td>
<td colspan="1">
<div id="id-div-result"></div>
</td>
</tr>
<tr>
<td colspan="3">
<button type="button" id="id-btn-1" onclick="on_btn_click(this.id)" value="1">1</button>
<button type="button" id="id-btn-2" onclick="on_btn_click(this.id)" value="2">2</button>
<button type="button" id="id-btn-3" onclick="on_btn_click(this.id)" value="3">3</button>
<button type="button" id="id-btn-add" onclick="on_btn_click(this.id)" value="+">+</button>
</td>
</tr>
<tr>
<td colspan="3">
<button type="button" id="id-btn-4" onclick="on_btn_click(this.id)" value="4">4</button>
<button type="button" id="id-btn-5" onclick="on_btn_click(this.id)" value="5">5</button>
<button type="button" id="id-btn-6" onclick="on_btn_click(this.id)" value="6">6</button>
<button type="button" id="id-btn-minus" onclick="on_btn_click(this.id)" value="-">−</button>
</td>
</tr>
<tr>
<td colspan="3">
<button type="button" id="id-btn-7" onclick="on_btn_click(this.id)" value="7">7</button>
<button type="button" id="id-btn-8" onclick="on_btn_click(this.id)" value="8">8</button>
<button type="button" id="id-btn-9" onclick="on_btn_click(this.id)" value="9">9</button>
<button type="button" id="id-btn-times" onclick="on_btn_click(this.id)" value="*">×</button>
</td>
</tr>
<tr>
<td colspan="3">
<button type="button" id="id-btn-0" onclick="on_btn_click(this.id)" value="0">0</button>
<button type="button" id="id-btn-c" onclick="on_btn_click(this.id)" value="c">C</button>
<button type="button" id="id-btn-equal" onclick="on_btn_click(this.id)" value="=">=</button>
<button type="button" id="id-btn-divide" onclick="on_btn_click(this.id)" value="/">÷</button>
</td>
</tr>
</table>
<script type="text/javascript">
function on_cal_click() {
var v_cal = document.getElementById("id-input-text-calculator").value;
var v_result = eval(v_cal);
document.getElementById("id-div-result").innerText = " 结果: " + v_result;
}
function on_btn_click(thisid) {
var btn = document.getElementById(thisid);
btn.addEventListener('click', function(event) {
var v_value = event.target.value;
console.log(v_value);
if(v_value == "c") {
document.getElementById("id-input-text-calculator").value = "";
} else if(v_value == "=") {
on_cal_click();
} else {
document.getElementById("id-input-text-calculator").value += v_value;
}
}, false);
}
</script>
</body>
</html>
完成之后的运行效果：
其中并没有使用css进行过多的渲染因为主要是对JavaScript的操作进行考验的，大家有兴趣的可以自己试试渲染一下。
在代码中第14~58行的代码通过
在第17行代码中input元素定义了一个文本框支持用户进行手动输入数字
第20行定义了onclick事件处理方法（“on_cal_click”）
第59~79行通过script标签定义了一段嵌入式JavaScript脚本
第60~64行主要是对自定义函数on_cal_click的具体功能实现，用来处理第二十行的功能键，主要通过eval方法计算表达式结果
第65~67行代码是表示自定义函数on_cal_click的具体实现，主要是通过addeventlistener事件方法监听用户的案件单击操作，并将用户输入的在第十七行代码中通过input元素定义输入到文本框中。
实际代码还是要靠自己去实践的。如果代码或者描述出现问题或者技术交流可以加QQ2029788643
标签：练习,代码,JavaScript,value,cal,新手,click,计算器 来源： https://blog.csdn.net/sharp0016/article/details/120582191
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。