HTML实现简易计算器

随便写的,可能有bug,可以在评论区指出哈。
HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AI简易计算器</title>
</head>
<body>
<table id="calculater" onClick="calculater()">
        <tr>
            <td id="display" colspan="5">0</td>
        </tr>
        <tr>
            <td class="numberkey" >1</td>
            <td class="numberkey" >2</td>
            <td class="numberkey" >3</td>
            <td class="numberkey" >+</td>
            <td class="numberkey"  id="deletesign">c</td>   
        </tr>
        <tr>
            <td class="numberkey" >4</td>
            <td class="numberkey" >5</td>
            <td class="numberkey" >6</td>
            <td class="numberkey" >-</td>
            <td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td> 
        </tr>
        <tr>
            <td class="numberkey" >7</td>
            <td class="numberkey" >8</td>
            <td class="numberkey" >7</td>
            <td class="numberkey" >*</td>
        </tr>
        <tr >
            <td class="numberkey" >+/-</td>
            <td class="numberkey" >0</td>
            <td class="numberkey" >.</td>
            <td class="numberkey" >/</td>            
        </tr>
</body>
</html>

CSS代码:

*{
        padding:0;
        margin:1px;
    }
    #calculater{
        margin: auto;
        margin-top: 30px;
        border: solid 6px #2371D3;
        border-spacing: 0px;
    }
    #display{
        width: 100%;
        height: 30px;
        border-bottom: solid 4px #2371D3;
         font-weight: bold;
         color: #193D83;
        font-family: 黑体;
        padding-left: 2px;
    }
    .numberkey{
        cursor: pointer;
        width: 40px;
        height: 30px;
        border: solid 1px #FFFFFF;
        background: #2371D3;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-family: 黑体;
    }
    #equality{
       cursor: pointer;
       width: 40px; 
       height: 100%;
       background: #2371D3;
        border: solid 1px #FFFFFF;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-family: 黑体; 
    }
    .numberkey:hover{
       background: #EA6F30; 
    }
    #equality:hover{
       background: #EA6F30; 
    }

Javascript代码:

var results="";
    var calresults="";
    function calculater(){
        if (event.srcElement.innerText=="=") {
            return;
        }
       results+=event.srcElement.innerText;
       display.innerText=results;
    }
    function resultscalcaulte(){
      calresults=eval(results);
      display.innerText=calresults;
    }

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/182889.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

二十四、RestClient操作文档

目录 一、新增文档 1、编写测试代码 二、查询文档 1、编写测试代码 三、删除文档 1、编写测试代码 四、修改文档 1、编写测试代码 五、批量导入文档 批量查询 一、新增文档 1、编写测试代码 SpringBootTest public class HotelDocumentTest {private RestHighLevelC…

Cesium 展示——地球以及渲染数据导出(下载)为图片或 pdf

文章目录 需求分析新加需求分析第一种方式第二种方式需求 将 Cesium 球体以及渲染数据导出为 jpg/png/pdf 分析 获取场景 scene 信息,转为image 的 octet-stream 流 进行下载为图片 /*** @todo canvas 导出图片* @param {string} dataurl - 地址* @return {Blob}*/ functio…

GeoTrust SSL数字安全证书介绍

一、GeoTrust OV证书的介绍 GeoTrust OV证书是由GeoTrust公司提供的SSL证书&#xff0c;它是一种支持OpenSSL的数字证书&#xff0c;具有更高的安全性和可信度。GeoTrust是全球领先的网络安全解决方案提供商&#xff0c;为各类用户提供SSL证书和信任管理服务。GeoTrust OV证书…

成为AI产品经理——模型评估概述

目录 一、模型宣讲和评估的原因 二、模型宣讲 三、模型评估 1. 重要特征 ① 特征来源 ②特征意义 2.选择测试样本 3.模型性能和稳定性 一、模型宣讲和评估的原因 刘海丰老师提到他们在做一个金融AI产品未注重模型指标&#xff0c;过于注重业务指标&#xff0c;导致产生…

C语言——深入理解指针(1)

目录 1.内存与地址 1.1 什么是内存 1.2 编址 2. 指针的变量和地址 2.1 取地址&#xff08;&&#xff09; 2.2 指针变量 2.3 解引用 2.4 指针变量大小 3. 指针变量类型存在的意义 3.1 不同类型指针的解引用 3.2 指针对整数的运算&#xff08;&#xff0c;-&#…

CentOS Stream 9系统Cgroup问题处理

安装docker容器启动失败 之前适配过Ubuntu系统的容器&#xff0c;由于版本比较高&#xff0c;没有挂载Cgroup的路径。这次使用Centos Stream 9系统安装docker容器时也遇到了这个情况。由于处理方式有些不一样&#xff0c;所以记录一下。 这是docker容器启动过报错的输出日志。…

实例讲解:在3dMax中如何使用python脚本?

如果你是Python或Maxscript的新手&#xff0c;你现在可以跟着这篇文章开始做一些代码了&#xff0c;本文将让我们从非常基本的东西开始学习。 如何在3dmax中获取选定的节点并打印出它们的名称&#xff1f;所有场景对象如何&#xff1f;我们直接看代码&#xff1a; import MaxP…

斯坦福大学引入FlashFFTConv来优化机器学习中长序列的FFT卷积

斯坦福大学的FlashFFTConv优化了扩展序列的快速傅里叶变换(FFT)卷积。该方法引入Monarch分解&#xff0c;在FLOP和I/O成本之间取得平衡&#xff0c;提高模型质量和效率。并且优于PyTorch和FlashAttention-v2。它可以处理更长的序列&#xff0c;并在人工智能应用程序中打开新的可…

预处理机制

跟着肯哥&#xff08;不是我&#xff09;学预处理机制 预处理类别 宏定义&#xff1a;#define 将文本替换为表达式或语句 条件编译&#xff1a;#ifdef、#ifndef和#if、#elif、#endif 根据标识符是否被定义选择编译代码 头文件包含&#xff1a;#include 将其他文件&#x…

万界星空科技商业开源MES/免费MES/低代码MES

万界星空科技商业开源MES可以提供包括制造数据管理、计划排程管理、生产调度管理、库存管理、质量管理、人力资源管理、工作中心/设备管理、工具工装管理、采购管理、成本管理、项目看板管理、生产过程控制、底层数据集成分析、上层数据集成分解等管理模块&#xff0c;打造一个…

Python+jieba+wordcloud实现文本分词、词频统计、条形图绘制及不同主题的词云图绘制

目录 序言&#xff1a;第三方库及所需材料函数模块介绍分词词频统计条形图绘制词云绘制主函数 效果预览全部代码 序言&#xff1a;第三方库及所需材料 编程语言&#xff1a;Python3.9。 编程环境&#xff1a;Anaconda3&#xff0c;Spyder5。 使用到的主要第三方库&#xff1a;…

gitee推荐-PHP面试准备的资料

该内容为giee项目。PHP-Interview: 这个项目是自己准备PHP面试整理的资料。包括PHP、MySQL、Linux、计算机网络等资料。方便自己以后查阅&#xff0c;会不定期更新&#xff0c;欢迎提交pr&#xff0c;如果错误&#xff0c;请指出&#xff0c;谢谢 在线预览地址&#xff1a;Intr…

【LeetCode】每日一题 2023_11_23 HTML 实体解析器(调库/打工)

文章目录 刷题前唠嗑题目&#xff1a;HTML 实体解析器题目描述代码与解题思路 结语 刷题前唠嗑 题目&#xff1a;HTML 实体解析器 题目链接&#xff1a;1410. HTML 实体解析器 题目描述 代码与解题思路 func entityParser(s string) (ans string) {return strings.NewRepla…

OpenHarmony之NAPI框架介绍

张志成 诚迈科技高级技术专家 NAPI是什么 NAPI的概念源自Nodejs&#xff0c;为了实现javascript脚本与C库之间的相互调用&#xff0c;Nodejs对V8引擎的api做了一层封装&#xff0c;称为NAPI。可以在Nodejs官网&#xff08;https://nodejs.org/dist/latest-v20.x/docs/api/n-api…

C语言——从键盘输人三角形的三个边长 a、b、c,求出三角形的面积。

从键盘输人三角形的三个边长 a、b、c,求出三角形的面积。求三角形的面积用公式areasqrt(s*(s-a)*(s-b)*(s-c)),其中 s1/2(a十bc)。注:要求对输人三角形的三个边长做出有效性判断。 #define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> #include<math.h> int main…

System-V共享内存和基于管道通信实现的进程池

文章目录 一.进程间通信:进程间通信的本质: 二.Linux管道通信匿名管道:关于管道通信的要点:基于匿名管道构建进程池: 三.System-V共享内存共享内存和命名管道协同通信 参考Linux内核源码版本------linux-2.4.3 一.进程间通信: 操作系统中,为了保证安全性,进程之间具有严格的独…

<JavaEE> 什么是线程(Thread)?进程和线程有什么区别?

目录 一、线程&#xff08;Thread&#xff09;的概念 二、线程存在的意义 2.1 并发编程 2.2 比进程更“轻量” 三、使用线程时应该注意 四、进程和线程的区别 五、Java中的线程和操作系统中的线程是不同的概念 六、多线程编程 一、线程&#xff08;Thread&#xff09;的…

Web服务器(go net/http) 处理Get、Post请求

大家好 我是寸铁&#x1f44a; 总结了一篇Go Web服务器(go net/http) 处理Get、Post请求的文章✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 go http请求如何编写简单的函数去拿到前端的请求(Get和Post) 服务器(后端)接收到请求后&#xff0c;又是怎么处理请求&#xff0c…

gitlab各版本安装注意点:

研发团队在安装gitlab各版本过程中可能遇到各种问题&#xff0c;为了后续容易查看特将我们在实践过程中遇到的各类问题要点总结如下&#xff1a; gitlab 10.8.3 (564c342&#xff09;安装 centos Linux yum安装网址查找网址&#xff1a;gitlab/gitlab-ce - Results for gitla…

【赠书第7期】从零基础到精通Flutter开发

文章目录 前言 1 安装Flutter和Dart 2 了解Flutter的基础概念 2.1 Widget 2.2 MaterialApp和Scaffold 2.3 Hot Reload 3 编写你的第一个Flutter应用 3.1 创建一个Flutter项目 3.2 修改默认页面 3.3 添加交互 4 深入学习Flutter高级特性 4.1 路由和导航 4.2 状态管…