扫码关注官方微信

扫码下载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://lsjlt.com/news/89815.html(转载时请注明来源链接)

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

猜你喜欢
  • 如何使用HTML和JS实现简单的计算器
    这篇文章主要介绍了如何使用HTML和JS实现简单的计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 　　<!doctypehtm...
    99+
    2024-04-02
  • HTML如何实现简单计算器
    本篇内容介绍了“HTML如何实现简单计算器”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！代码如下： 　　...
    99+
    2024-04-02
  • 使用JS实现简单计算器的方法
    今天小编给大家分享的是使用JS实现简单计算器的方法，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。JS是什么JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为J...
    99+
    2023-06-14
  • 基于HTML+JS实现简单的年龄计算器
    目录前言演示效果HTML代码CSS代码Javascript代码演示地址前言 在线演示地址：http://haiyong.site/age-calculator JavaScript提...
    99+
    2024-04-02
  • js如何实现简单的计算器功能
    这篇文章主要介绍js如何实现简单的计算器功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！示例代码：<!DOCTYPE html>...
    99+
    2024-04-02
  • 使用Javascript如何实现简单计算器
    小编给大家分享一下使用Javascript如何实现简单计算器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体内容如下1.htm...
    99+
    2024-04-02
  • 使用JS实现简易计算器
    使用JS完成简易计算器，供大家参考，具体内容如下 要求：输入的值只能是数字，使用正则表达式 onchange():值改变时执行事件 onblur():鼠标移出时执行事件 <...
    99+
    2024-04-02
  • 原生JS实现简单计算器功能
    本文实例为大家分享了JS实现简单计算器功能的具体代码，供大家参考，具体内容如下 使用html和css写出计算器的基本结构和样式，用原生JS实现计算器的加减乘除运算功能，只能计算简单的...
    99+
    2024-04-02
  • JS实现简单计数器
    用HTML CSS和JavaScript实现简单计数器，有加、减和零三个按钮，分别实现加一、减一和归零操作。下面先看一下效果图。 HTML代码 <div class="b...
    99+
    2024-04-02
  • 用javascript实现简单计算器
    本文实例为大家分享了javascript实现简单计算器的具体代码，供大家参考，具体内容如下 设计一个简单的计算器 代码 <body> <a>第一个...
    99+
    2024-04-02
  • js如何实现日历的简单算法
    这篇文章将为大家详细讲解有关js如何实现日历的简单算法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。最近有用到日历可需要编辑文本的日历，为了...
    99+
    2024-04-02
  • 小程序如何实现简单的计算器
    本篇内容介绍了“小程序如何实现简单的计算器”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果如下：#app.json{  ...
    99+
    2023-06-08
  • swift实现简单的计算器
    本文实例为大家分享了swift实现简单计算器的具体代码，供大家参考，具体内容如下 代码 // //  ViewController.swift //  Calculator // ...
    99+
    2024-04-02
  • Java如何实现一个简单计算器
    这篇文章主要介绍了Java如何实现一个简单计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。先来看看界面效果：源码如下：package test1; i...
    99+
    2023-06-22
  • Swift如何实现简单计算器项目
    本篇文章为大家展示了Swift如何实现简单计算器项目，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。////  ViewController.swift//  ...
    99+
    2023-06-28
  • JSP如何实现简单网页计算器
    小编给大家分享一下JSP如何实现简单网页计算器，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！一、构造一个简单的计算器，能够进行“+、&mdash;、*、/”运算（1）编写jsp页面，用户通过表单输入两个操作数和运算...
    99+
    2023-06-29
  • QT如何实现简单计算器功能
    这篇文章主要讲解了“QT如何实现简单计算器功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“QT如何实现简单计算器功能”吧！效果图：新建工程，创建类MainWindow，基类是QMainWi...
    99+
    2023-06-30
  • 原生JS怎么实现简单计算器功能
    本篇内容主要讲解“原生JS怎么实现简单计算器功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“原生JS怎么实现简单计算器功能”吧!使用html和css写出计算器的基本结构和样式，用原生JS实现计...
    99+
    2023-06-29
  • JS如何实现计算器
    这篇文章将为大家详细讲解有关JS如何实现计算器，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。代码：<!DOCTYPE html> <html&...
    99+
    2024-04-02
  • unity实现简单计算器
    本文实例为大家分享了unity实现简单计算器的具体代码，供大家参考，具体内容如下 using System.Text; using UnityEngine; using Unit...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作