最适合新手练习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