教你如何使用JavaScript如何80行代码写个小项目_如何写javascript的项目目地(1)

		</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="-">&minus;</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="\*">&times;</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="/">&divide;</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>

完成之后的运行效果：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e1d93fa8617f42baa6d398fe2d93dafb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAc2hhcnAwMDE2,size_20,color_FFFFFF,t_70,g_se,x_16)  
 其中并没有使用css进行过多的渲染因为主要是对JavaScript的操作进行考验的，大家有兴趣的可以自己试试渲染一下。  
 在代码中第14~58行的代码通过

标签元素对计算器的简易界面进行了定义，并且使用了button进行了按钮的定义，并且在按钮上定义了onclick事件处理方法。 
  
 在第17行代码中input元素定义了一个文本框支持用户进行手动输入数字 
  
 第20行定义了onclick事件处理方法（“on\_cal\_click”） 
  
 第59~79行通过script标签定义了一段嵌入式JavaScript脚本 
  
 第60~64行主要是对自定义函数on\_cal\_click的具体功能实现，用来处理第二十行的功能键，主要通过eval方法计算表达式结果 


### 文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**