小粉兔简易计算器—

用HTML+CSS+JS实现一个简易的计算器：

<html>
<head>
<title>小粉兔计算器</title><style>form.formtotal{background-image:url("file:///C:/Users/86136/Desktop/cute.jpg");height:400px;width:400px;}div.divone{float:left;height:97%;width:60%;margin:6px;}input[type="text"]{font-size:x-large;float:left;width:235px; height:50px;border-radius: 13px;background-color:#FFF7FB;outline:none;}input[type="button"].btnone{font-size:large;font-family:"华文行楷";width:29%;height:20%;border-radius: 13px;background-color:#FFECF5;margin-top:7px;margin-left:4px;cursor:pointer;outline:none;}div.divtwo{float:right;width:34%;height:97%;margin:6px;}input[type="button"].backspace{font-family:"华文行楷";font-size:x-large;float:left;width:48%;height:50px;border-radius: 13px;background-color:#FFECF5;cursor:pointer;outline:none;}input[type="button"].delete{font-family:"华文行楷";font-size:x-large;float:right;width:48%;height:50px;border-radius: 13px;background-color:#FFECF5;cursor:pointer;outline:none;}input[type="button"].btntwo{font-family:"华文行楷";font-size:x-large;width:85%;height:20%;border-radius: 13px;background-color:#FFECF5;margin-top:7px;margin-left:10px;cursor:pointer;outline:none;}input[type="button"]:hover {background-color: #FFECF5;}</style>
</head><body><form class="formtotal"><div class="divone"><input type="text" class="txt" id="textshow" /> <input type="button" class="btnone" id="btn" value="1" onclick="caclufunction(this.value)"/><input type="button" class="btnone" id="btn" value="2" onclick="caclufunction(this.value)"/><input type="button" class="btnone" id="btn" value="3" onclick="caclufunction(this.value)"/><input type="button" class="btnone" id="btn" value="4" onclick="caclufunction(this.value)"/><input type="button" class="btnone" id="btn" value="5" onclick="caclufunction(this.value)"/><input type="button" class="btnone" id="btn" value="6" onclick="caclufunction(this.value)"/><input type="button" class="btnone" id="btn" value="7" onclick="caclufunction(this.value)"/><input type="button" class="btnone" id="btn" value="8" onclick="caclufunction(this.value)"/><input type="button" class="btnone" id="btn" value="9" onclick="caclufunction(this.value)"/><input type="button" class="btnone" id="btn" value="0" onclick="caclufunction(this.value)"/><input type="button" class="btnone" id="btn" value="." onclick="caclufunction(this.value)"/><input type="button" class="btnone id="btn" value="="  οnclick="caclufunction(this.value)"/></div><div class="divtwo"><input type="button" class="delete" id="btn" value="C" onclick="caclufunction(this.value)"/><input type="button" class="backspace" id="btn" value="back" onclick="caclufunction(this.value)"/><input type="button" class="btntwo" id="btn" value="+" onclick="caclufunction(this.value)"/><input type="button" class="btntwo" id="btn" value="-" onclick="caclufunction(this.value)"/><input type="button" class="btntwo" id="btn" value="*" onclick="caclufunction(this.value)"/><input type="button" class="btntwo" id="btn" value="/" onclick="caclufunction(this.value)"/></div></form><script>function  caclufunction(val){var num = document.getElementById("textshow");switch (val) {case "back":num.value=num.value.substring(0,num.value.length-1);break;case "=":num.value = eval(num.value);break;case "C":num.value = "";break;default:num.value = num.value + val;break;}}</script>
</body>
</html>

小粉兔简易计算器——一只小巨子相关推荐

js 月份间隔计算器_15分钟用JS做一个简易计算器
原标题:15分钟用JS做一个简易计算器前言这个小练手旨在帮助刚上手学习Java的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退 ...
简单的android小程序计算机,Android实现简易计算器小程序
本文实例为大家分享了Android实现简易计算器小程序的具体代码,供大家参考,具体内容如下目标效果: 通过编写代码,可以实现整数和小数的加减乘除运算,以及删除和清空的功能. 1.页面中Button使 ...
Java程序设计图形用户界面小巫版简易计算器
/** 作者:wwj 时间:2012/4/13 功能:实现一个计算器应用程序实验要求:编写一个模拟计算器的应用程序,使用面板和网格布局, 添加一个文本框,10个数字按钮(0~9),4个加减乘除按钮, ...
微信小程序-简易计算器
代码地址如下: http://www.demodashi.com/demo/14210.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
Android小程序-简易计算器的实现
目标效果: 通过编写代码,可以实现整数和小数的加减乘除运算,以及删除和清空的功能. 1.页面中Button使用的是线性布局,最外边一个是父布局,第一行C,DEL,/,*为第一个子布局,第二行7,8 ...
python中用于释放类占用的资源的方法是()_编写一个简易计算器,要求根据输入的数字和四则运算符号,计算运算结果并输出。_学小易找答案...
[简答题]20191220 课前作业新工作页4.1的3-5-3页的填空题,参考教材P135-P144 [简答题]AutoCAD改编视图,尽量不用虚线 1. 主视图采用局部剖,表达右上角小圆筒(及孔) ...
微信小程序开发之简易计算器
微信小程序之简易计算器一.介绍 1.中缀表达式中缀表达式是一种通用的算术或逻辑公式表示方法,操作符以中缀形式处于操作数的中间.中缀表达式是人们常用的算术表示方法. 虽然人的大脑很容易理解与分析中缀 ...
微信小程序--简易计算器
一.项目概述本文主要介绍了微信小程序的一个简易计算器的实现代码实例. 实现的功能有: 实现简单的加减乘除删除全部清空小程序页面目录如下: 计算器页面如下: 二.WXML文件编写首先我们对计算 ...
vue简易计算器小案例09
简易计算器小案例逻辑部分没有完全实现,主要用来练手,加强理解父子组件之间的通信过程. 效果: 简易计算器代码 counter.html <!DOCTYPE html> <html ...

小粉兔简易计算器——一只小巨子

小粉兔简易计算器——一只小巨子相关推荐

最新文章

热门文章