广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何使用HTML和JS实现简单的计算器
  • 668

0
分享到

如何使用HTML和JS实现简单的计算器

2024-04-02 19:04:59 668人浏览 薄情痞子
摘要

这篇文章主要介绍了如何使用html和js实现简单的计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 　　<!doctypehtm

这篇文章主要介绍了如何使用html和js实现简单的计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　<!doctypehtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>无标题文档</title>

　　<linkrel="stylesheet"type="text/CSS"href="untitled.css">

　　</head>

　　<scripttype="text/javascript">

　　varresult="";

　　functionjisuan(num){

　　if(num=="="){

　　document.fORM1.text.value=eval(result);

　　}else{

　　result=result+num;

　　document.form1.text.value=result;

　　}

　　}

　　</script>

　　<body>

　　<pclass="box">

　　<forMaction=""class="form1"name="form1">

　　<pclass="header">

　　<inputtype="text"id="text"name="text"class="text"/>

　　</p>

　　<pclass="nav">

　　<tableclass="table">

　　<tr>

　　<td><inputid="1"style="height:55px;width:55px;"type="button"value="1"onClick="jisuan(this.id)"/></td>

　　<td><inputid="2"style="height:55px;width:55px;"type="button"value="2"onClick="jisuan(this.id)"/></td>

　　<td><inputid="3"style="height:55px;width:55px;"type="button"value="3"onClick="jisuan(this.id)"/></td>

　　<td><inputid="+"style="height:55px;width:55px;"type="button"value="+"onClick="jisuan(this.id)"/></td>

　　</tr>

　　<tr>

　　<td><inputid="4"style="height:55px;width:55px;"type="button"value="4"onClick="jisuan(this.id)"/></td>

　　<td><inputid="5"style="height:55px;width:55px;"type="button"value="5"onClick="jisuan(this.id)"/></td>

　　<td><inputid="6"style="height:55px;width:55px;"type="button"value="6"onClick="jisuan(this.id)"/></td>

　　<td><inputid="-"style="height:55px;width:55px;"type="button"value="-"onClick="jisuan(this.id)"/></td>

　　</tr>

　　<tr>

　　<td><inputid="7"style="height:55px;width:55px;"type="button"value="7"onClick="jisuan(this.id)"/></td>

　　<td><inputid="8"style="height:55px;width:55px;"type="button"value="8"onClick="jisuan(this.id)"/></td>

　　<td><inputid="9"style="height:55px;width:55px;"type="button"value="9"onClick="jisuan(this.id)"/></td>

　　<td><inputid="*"style="height:55px;width:55px;"type="button"value="*"onClick="jisuan(this.id)"/></td>

　　</tr>

　　<tr>

　　<td><inputid="/"style="height:55px;width:55px;"type="button"value="/"onClick="jisuan(this.id)"/></td>

　　<td><inputid="0"style="height:55px;width:55px;"type="button"value="0"onClick="jisuan(this.id)"/></td>

　　<td><inputid="."style="height:55px;width:55px;"type="button"value="."onClick="jisuan(this.id)"/></td>

　　<td><inputid="="style="height:55px;width:55px;"type="button"value="="onClick="jisuan(this.id)"/></td>

　　</tr>

　　</table>

　　</p>

　　</form>

　　</p>

　　</body>

　　</html>

感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用HTML和JS实现简单的计算器”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网VUE频道，更多相关知识等着你来学习!

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何使用HTML和JS实现简单的计算器

本文链接: https://www.lsjlt.com/news/89815.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何使用HTML和JS实现简单的计算器
    这篇文章主要介绍了如何使用HTML和JS实现简单的计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 　　<!doctypehtm...
    99+
    2022-10-19
  • 基于HTML+JS实现简单的年龄计算器
    目录前言演示效果HTML代码CSS代码Javascript代码演示地址前言 在线演示地址：http://haiyong.site/age-calculator JavaScript提...
    99+
    2022-11-12
  • HTML如何实现简单计算器
    本篇内容介绍了“HTML如何实现简单计算器”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！代码如下： 　　...
    99+
    2022-10-19
  • 使用JS实现简单计算器的方法
    今天小编给大家分享的是使用JS实现简单计算器的方法，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。JS是什么JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为J...
    99+
    2023-06-14
  • js如何实现简单的计算器功能
    这篇文章主要介绍js如何实现简单的计算器功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！示例代码：<!DOCTYPE html>...
    99+
    2022-10-19
  • 使用JS实现简易计算器
    使用JS完成简易计算器，供大家参考，具体内容如下 要求：输入的值只能是数字，使用正则表达式 onchange():值改变时执行事件 onblur():鼠标移出时执行事件 <...
    99+
    2022-11-12
  • 使用Javascript如何实现简单计算器
    小编给大家分享一下使用Javascript如何实现简单计算器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体内容如下1.htm...
    99+
    2022-10-19
  • js如何实现日历的简单算法
    这篇文章将为大家详细讲解有关js如何实现日历的简单算法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。最近有用到日历可需要编辑文本的日历，为了...
    99+
    2022-10-19
  • 小程序如何实现简单的计算器
    本篇内容介绍了“小程序如何实现简单的计算器”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果如下：#app.json{  ...
    99+
    2023-06-08
  • Swift如何实现简单计算器项目
    本篇文章为大家展示了Swift如何实现简单计算器项目，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。////  ViewController.swift//  ...
    99+
    2023-06-28
  • QT如何实现简单计算器功能
    这篇文章主要讲解了“QT如何实现简单计算器功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“QT如何实现简单计算器功能”吧！效果图：新建工程，创建类MainWindow，基类是QMainWi...
    99+
    2023-06-30
  • JSP如何实现简单网页计算器
    小编给大家分享一下JSP如何实现简单网页计算器，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！一、构造一个简单的计算器，能够进行“+、&mdash;、*、/”运算（1）编写jsp页面，用户通过表单输入两个操作数和运算...
    99+
    2023-06-29
  • Java如何实现一个简单计算器
    这篇文章主要介绍了Java如何实现一个简单计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。先来看看界面效果：源码如下：package test1; i...
    99+
    2023-06-22
  • 怎么使用C#实现简单的计算器功能
    这篇文章主要介绍怎么使用C#实现简单的计算器功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！环境：VS2010及以上版本建立个Window窗体应用在工具箱里拖出两个TextBox，第一个放上面，第二个放下面 。主要...
    99+
    2023-06-29
  • js如何实现简单实用的AJAX
    这篇文章主要介绍了js如何实现简单实用的AJAX，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。JS是什么JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被...
    99+
    2023-06-08
  • 如何利用python的tkinter实现一个简单的计算器
    目录1.准备工作2. 开始2.1 生成控件2.2 定义输入和计算函数2.3 绑定键盘事件2.4 循环3.全部代码4. 结束语做一个计算器，这是我想要达成的效果： 在按下按钮或者按下...
    99+
    2022-11-12
  • python如何使用tkinter做个简单的计算器
    这篇文章主要介绍了python如何使用tkinter做个简单的计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。设计思路首先，导入我们需要的包 — tkinter，并通过 ...
    99+
    2023-06-14
  • 用C语言实现简单的计算器功能
    本文实例为大家分享了C语言实现简单的计算器功能的具体代码，供大家参考，具体内容如下 简单计算器，实现简单的加减乘除功能，选择对应的运算符输出运算符对应的编号，然后输入我们要计算的两个...
    99+
    2022-11-13
  • 如何使用JS简单实现apply、call和bind方法
    这篇文章主要讲解了“如何使用JS简单实现apply、call和bind方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用JS简单实现apply、call和bind方法”吧！1.方法介...
    99+
    2023-06-29
  • 如何使用Java图形化界面编程实现简单计算器
    这篇文章主要为大家展示了“如何使用Java图形化界面编程实现简单计算器”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用Java图形化界面编程实现简单计算器”这篇文章吧。1.简单计算器使用A...
    99+
    2023-06-22
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作