简易JS计算器

最新推荐文章于 2023-12-01 19:30:20 发布

TurtleOrange

最新推荐文章于 2023-12-01 19:30:20 发布

阅读量258

点赞数 1

分类专栏：实践前端文章标签：前端实操

本文链接：https://blog.csdn.net/TurtleOrange/article/details/93594136

版权

实践同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

前端

30 篇文章 0 订阅

订阅专栏

简易JS计算器

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>原创--计算器</title>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<style type="text/css">
		.num{
			min-width: 20px;
			height: 18px;
			display: inline-block;
			border: 1px solid #000;
			vertical-align: middle;  /*使得块级元素垂直居中*/
		}
	</style>
</head>
<body>
	<input type="" name="" id="n1">
	<span>+</span>
	<input type="" name="" id="n2">
	<span>=</span>
	<div class="num" id="num"> </div>
	<button onclick="handleClick()">click</button>

	<script type="text/javascript">
		function handleClick(){
			var a = Number($('#n1').val())
			var b = Number($('#n2').val())
			var c = a + b
			$('#num').text(c)
		}
	</script>
</body>
</html>

TurtleOrange

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简易JS计算器

简易JS计算器<!DOCTYPE html><html><head> <title>原创--计算器</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style type="text/css"...
复制链接

扫一扫