教你如何使用JavaScript如何80行代码写个小项目

最新推荐文章于 2023-09-25 13:23:38 发布

打工人C&K

最新推荐文章于 2023-09-25 13:23:38 发布

阅读量332

点赞数 1

分类专栏： JavaScript HTML+CSS 文章标签： javascript html css

本文链接：https://blog.csdn.net/sharp0016/article/details/120582191

版权

JavaScript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

HTML+CSS

19 篇文章 0 订阅

订阅专栏

最适合新手练习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="-">&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>
</body>
</html>

完成之后的运行效果：
在这里插入图片描述
其中并没有使用css进行过多的渲染因为主要是对JavaScript的操作进行考验的，大家有兴趣的可以自己试试渲染一下。
在代码中第14~58行的代码通过

标签元素对计算器的简易界面进行了定义，并且使用了button进行了按钮的定义，并且在按钮上定义了onclick事件处理方法。
在第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

打工人C&K

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
教你如何使用JavaScript如何80行代码写个小项目

最适合新手练习JavaScript的小项目：网页计算器网页计算器是由HTML和CSS以及最重要的JavaScript来构建出来的，能和普通的计算器一样进行各种运算包括开根号等等的复杂运算，并且有助于理解JavaScript中的面向对象和函数调用并且全长代码只有80行，是最适合新手的小项目了不多BB上代码：<!doctype html><html lang="en"><head>  <meta http-eq
复制链接

扫一扫