使用“三剑客”做一个简易计算器

使用HTML、原生CSS以及原生JavaScript做一个简易计算器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算器</title><style>* {padding: 0;margin: 0;}body {background-color: rgba(173, 255, 47, 0.5);}#main {position: relative;width: 400px;height: 600px;display: flex;top: 100px;left: 40%;justify-content: center;padding: 20px;box-sizing: border-box;background-color: rgba(66, 77, 88, 1);border: 3px solid gray;}#dUp {width: 370px;height: 80px;box-sizing: border-box;position: absolute;display: flex;}#text {position: absolute;padding: 2px;width: 300px;height: 100%;box-sizing: border-box;background-color: grey;border: 1px solid cadetblue;}#textbox1 {text-align: right;padding-right: 5px;box-sizing: border-box;font-size: 20px;font-weight: bolder;color: grey;width: 295px;height: 35px;border: 0;}#textbox2 {text-align: right;padding-right: 5px;box-sizing: border-box;font-size: 30px;width: 295px;height: 40px;border: 0;}#clsbox {position: absolute;display: flex;right: 0;padding: 2px;width: 65px;height: 100%;justify-content: center;box-sizing: border-box;background-color: grey;}#button {position: absolute;top: 22%;width: 340px;height: 400px;background-color: brown;border: 1px solid cadetblue;}#cls {width: 60px;height: 75px;font-size: 30px;color: aquamarine;background-color: darkred;}ul {text-decoration: none;margin-top: 45px;text-align: center;box-sizing: border-box;}ul li {display: inline-block;margin: 0 5px;}ul li button {font-size: 25px;color: aliceblue;width: 65px;height: 45px;background-color: midnightblue;border-radius: 10px;}</style><script>var str = "";var a;var result2;var result;function input(bNum) {result2 = document.getElementById("textbox2");result = document.getElementById("textbox1");result.value = "";a = "";var num = bNum.value;if (num == "=") {a = str + "=";result.value = a;str = eval(str);result2.value = str;// console.log(eval(str));// str="";} else {str += num;result2.value = str;}}function zero() {a = "";str = "";result.value = "";result2.value = 0;}</script>
</head><body><!-- 主体div --><div id="main"><!-- 上部 --><div id="dUp"><!-- 结果div --><div id="text"><input id="textbox1" type="text" value=""><input id="textbox2" type="text" value=0></div><!-- 归零按钮 --><div id="clsbox"><button id="cls" onclick="zero()">C</button></div></div><!-- 按钮div --><div id="button"><ul><li><button onclick="input(this)" value="7">7</button></li><li><button onclick="input(this)" value="8">8</button></li><li><button onclick="input(this)" value="9">9</button></li><li><button onclick="input(this)" value="+">+</button></li></ul><ul><li><button onclick="input(this)" value="4">4</button></li><li><button onclick="input(this)" value="5">5</button></li><li><button onclick="input(this)" value="6">6</button></li><li><button onclick="input(this)" value="-">-</button></li></ul><ul><li><button onclick="input(this)" value="1">1</button></li><li><button onclick="input(this)" value="2">2</button></li><li><button onclick="input(this)" value="3">3</button></li><li><button onclick="input(this)" value="*">*</button></li></ul><ul><li><button onclick="input(this)" value="0">0</button></li><li><button onclick="input(this)" value=".">.</button></li><li><button onclick="input(this)" value="=">=</button></li><li><button onclick="input(this)" value="/">/</button></li></ul></div></div>
</body></html>

使用“三剑客”做一个简易计算器相关推荐

做一个简易计算器（VB版）
今天小编来带大家用VB做一个简易计算器废话不多说,下面就是具体步骤了 1.创建控件组的方法首先创建一个命令按钮,调整其大小(觉得合适就行),名称为Command1,Caption 属性为数字 0 : ...
js 月份间隔计算器_15分钟用JS做一个简易计算器
原标题:15分钟用JS做一个简易计算器前言这个小练手旨在帮助刚上手学习Java的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退 ...
项目：使用python做一个简易计算器，图形可视化，既有界面
代码: import tkinter as tkclass Calc(tk.Frame): # 创建Calc类继承Framedef __init__(self, parent=None):" ...
简易计算器 java_用Java做一个简易计算器，要用到哪些知识？
分析问题关键词:Java.计算器深夜无聊,暂且一答. 计算器分两个步骤:计算 + 器篇一 ·「器」在编程中,我们可以把「器」理解为「GUI(图形界面)」,Java 语言描绘的图形界面有很多种类, ...
做一个简易计算器，用户输入两个数，实现加减乘除
package com.xiong.dan; import java.util.Scanner; public class calculator2 {public static void main(S ...
c语言设计程序计算器,C语言程序设计,做一个简单计算器
题目: C语言程序设计,做一个简单计算器程序内容有:加减乘除和平方,立方,开方等.用if或者swith结构来编程. 算加法时只输出加法的结果,算减法时只出减法的结果,如此类推. 解答: 已发送, # ...
如何使用 Java AWT 创建一个简易计算器
本文分享自华为云社区<手把手教你使用 Java AWT 创建一个简易计算器>,作者:海拥 . 关于AWT AWT (抽象窗口工具包)是一个有助于构建 GUI 的 API (图形用户界面)基 ...
十位数连加 c语言,用C语言编写一个简易计算器可实现加减乘除,连加连减,连乖连除....
用C语言编写一个简易计算器可实现加减乘除,连加连减,连乖连除. 用C语言编写一个简易计算器可实现加减乘除,连加连减,连乖连除. 人气:435 ℃时间:2020-04-10 06:55:13 优质解答 ...
用JavaScript实现一个简易计算器功能
简易计算器文章目录简易计算器界面一览一.需求二.body创建整体显示外观三.css样式四.JavaScript事件函数五.小结界面一览一.需求 1.构建出计算器外观. 2.显示屏跟 ...

使用“三剑客”做一个简易计算器

使用HTML、原生CSS以及原生JavaScript做一个简易计算器

使用“三剑客”做一个简易计算器相关推荐

最新文章

热门文章