简单的网页版计算器

最新推荐文章于 2023-02-06 11:31:05 发布
最新推荐文章于 2023-02-06 11:31:05 发布
阅读量536 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heat_anne/article/details/50707931
版权 
<!DOCTYPE html> 
<html>
<meta name="content-type" content="text/html; charset=UTF-8"> 
	<head>
		<title>cal</title>
		<script type="text/javascript"> 
			var str;
			function onclicknum(num)
			{
				str = document.getElementById("result_show"); 
				str.value =str.value + num;
			}
			function OnClickResult()
			{
				str = document.getElementById("result_show");
				str.value = eval(str.value);
			}
			function OnClickClear()
			{
				str = document.getElementById("result_show");
			        str.value = "";
			} 
		</script>	 
	</head>
 
 	<body bgcolor="#ADD8E6">
	<!--定义按键表格,每个按键对应一个事件触发-->
		<table border="1"align="center" bgColor="#FFB6C1"
		style="height: 350px; width: 270px">
			<tr>
				<td colspan="4">
					<input type="text" value="" id="result_show"
					style="height: 90px; width: 380px; font-size: 50px" />
				</td>
			</tr> 
			<tr>
				<td>
					<input type="button" value="1" id="btn_1" οnclick="onclicknum(1)"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
				<td>
					<input type="button" value="2" id="btn_2" οnclick="onclicknum(2)"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
				<td>
					<input type="button" value="3" id="btn_3" οnclick="onclicknum(3)"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
				<td>
					<input type="button" value="+" id="btn_add" οnclick="onclicknum('+')"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
			</tr>

			<tr>
				<td>
					<input type="button" value="4" id="btn_4" οnclick="onclicknum(4)"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
				<td>
					<input type="button" value="5" id="btn_5" οnclick="onclicknum(5)"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
				<td>
					<input type="button" value="6" id="btn_6" οnclick="onclicknum(6)"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
				<td>
					<input type="button" value="-" id="btn_sub" οnclick="onclicknum('-')"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
			</tr>

			<tr>
				<td>
					<input type="button" value="7" id="bnt_7" οnclick="onclicknum(7)"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
				<td>
					<input type="button" value="8" id="bnt_8" οnclick="onclicknum(8)"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
				<td>
					<input type="button" value="9" id="bnt_9" οnclick="onclicknum(9)"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
				<td>
					<input type="button" value="*" id="bnt_mul" οnclick="onclicknum('*')"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
			</tr> 
			<tr>
				<td colspan="2">
					<input type="button" value="0" id="bnt_0" οnclick="onclicknum(0)"
					style="height: 70px; width: 190px; font-size: 35px">
				</td>
				<td>
					<input type="button" value="." id="bnt_point" οnclick="onclicknum('.')"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
				<td>
					<input type="button" value="/" id="bnt_division"οnclick="onclicknum('/')"
					style="height: 70px; width: 90px; font-size: 35px">
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" value="Del" id="bnt_clear"οnclick="OnClickClear()"
					style="height: 70px; width: 190px; font-size: 35px" />
				</td>
				<td colspan="2">
					<input type="button" value="=" id="bnt_result"οnclick="OnClickResult()"
					style="height: 70px; width: 190px; font-size: 35px" />
				</td>

				</tr>  
  

 	</body>
 
</html>

heat_anne
关注
专栏目录
js网页版计算器的简单实现
10-27
### JS网页版计算器的简单实现 #### 一、概述 本文档将详细介绍一个简单的JS网页版计算器的实现方法。此计算器能够完成基本的数学运算，包括加法、减法、乘法、除法以及数字输入等功能。对于学习前端开发尤其是...
前端——编写一个简易网页计算器
最新发布
Sakurapaid的博客
10-24 1653
前端代码实现一个简易网页计算器，输入两个运算数，点击不同的运算符，会在下方得到不同的运算结果
制作一个最基本的网页计算器
JavaIdot的博客
01-15 1999
你想做一个基本的网页计算器么？这里有源码！
JavaScript 网页简易计算器
weixin_62630571的博客
02-06 866
JavaScript 设计简易计算器
WEB网页版计算器（HTML、CSS、JavaScript实现）
weixin_60414376的博客
12-20 1万+
一、效果截图： 功能： 1、实现简单的四则运算。2、包含正负号操作。 3、M按钮实现跳转到一个网页。 4、可以使用小数运算。 二、代码实现： 1、HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> ......
简单网页计算器代码
qq_33721778的博客
11-13 1万+
注：本人为初学者，欢迎各位大神指教 简单计算器实现效果： HTML代码counter.html 计算器
简易网页版计算器
10-17
【简易网页版计算器】是一个基于Web Service技术实现的在线计算工具，它允许用户在网页上进行基本的数学运算，如加、减、乘、除等。这个项目的核心目标是将传统的桌面计算器功能移植到网络环境中，使用户可以不受...
网页版计算器
03-05
接下来，我们将深入探讨构建网页版计算器所需的关键知识点。 1. HTML 结构设计： - `<form>` 标签：用于创建表单，计算器的数字键和运算符通常通过按钮（`<button>`）呈现。 - `<input>` 标签：用于创建输入框，...
网页版简单计算器特效代码
03-20
网页版简单计算器是一种基于HTML、CSS和JavaScript技术实现的在线计算工具，它可以提供基本的数学运算，如加法、减法、乘法和除法。这个计算器通常用于教学目的，或者作为网页的一部分，为用户提供方便的计算功能。...
用JavaScript制作简单的网页计算器
小言同学的博客
11-12 8396
一、题目 利用JavaScript中的函数，完成数字加、减、乘、除的运算，实现一个简单的计算器。 二、代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>网页计算器</title> </head> <body> <div> <p>数字1：<input type="text" id="num1"/&g
一个简易的网页计算器
04-15
这是一个简易的网页计算器，利用HTML5,、CSS3、JavaScript，实现计算器的基本功能。
非常实用的简易网页计算器
06-23
简易网页计算器，说简易其实非常实用，外观也可以！特此分享给大家！！
用javascript做简单计算器
10-10
用javascript做简单计算器，实现加减乘除的简单运算。
js实现网页计算器
05-27
一个漂亮的网页计算器，学习的人可以做为参考！
Web实现简化版网页计算器
PQpingLee的博客
11-09 870
web实现网页计算器功能
（javaweb）用三种方式制作网页版简易计算器（JSP,JSP+javaBean,JSP+javaBean+Servlet）
xiaoniu667的博客
12-29 7785
第一种：在jsp中用语句块<%%>写java代码，最后用表达式<%=%>展示出来。这种方式耦合性太高了，不利于维护。 calculator.jsp： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...
用HTML,CSS,JS实现简单的计算器网页
qq_52025208的博客
03-29 1281
一、HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据 表，或在页面中嵌入图片和视频。 二、CSS 是一种样式规则语言，可将样式应用于 HTML 内容， 例如设置背景颜色和字体，在多个列中 布局内容。（美化） 三、JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很 多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。） 四、 用jQuery实现计算器页面 <html> <head>
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值