html用js计算显示,html+css+js实现计算器功能
/* 主体 */
.counter{
width: 396px;
height: 486px;
background-color: #F2F2F2;
border: 1px solid #C2C3C6;
margin: 50px auto;
}
/* 显示框 */
#box {
height: 70px;
width: 336px;
background-color: #323232;
border: none;
margin: 40px 25px 32px 25px;
font: 700 40px/70px "微软雅黑";
color: #ffffff;
padding-right: 10px;
}
/* 功能区 */
.funct {
padding: 0 20px;
position: relative;
}
/* 按钮样式 */
.funct input {
height: 40px;
width: 60px;
margin: 10px 10px;
font: 400 20px/40px "微软雅黑";
}
/* 清除按钮样式 */
.funct #res {
width: 150px;
}
/* 加、减、等于等按钮浮动 */
#add, #reduce, #round, #sum {
position: absolute;
right: 0px;
bottom: 0px;
}
/* 减号位置 */
#reduce {
right: 30px;
top: 60px;
}
/* 加号位置 */
#add {
right: 30px;
top: 120px;
}
/* 等于号位置 */
#sum {
height: 100px;
right: 30px;
bottom: 0px;
}
/* 小数点位置 */
#round {
right: 120px;
bottom: 0px;
}
/* 0 */
#zero {
width: 150px;
}
/* 数字区 */
.numb {
width: 310px;
}
window.onload = function(){
// 数据容器
var left = 0; //被除数
var right = 0; //除数
var sum = 0; //和
var numb = 0; //此变量用来限制点的输入
// 获取id并返回
function $(id){
return document.getElementById(id);
}
// 运算函数
function operation(id){
if( $("box").value != "0"){
if(left == 0)
{
$("box").value = $("box").value + $(id).value;
left = parseFloat($("box").value);
}
}
//numb 转为number类型 让点可以再输入一次
numb = 0;
}
// 数字盘函数
function figure(id){
// 判断被除数是否有值
if(left == 0)
{
// 改变value默认值
if ($("box").value === "0" ) {
$("box").value = $(id).value;
}else{
$("box").value = $("box").value + $(id).value;
}
}else{
$("box").value = $("box").value + $(id).value;
var str = $("box").value;
var num = "";
// 获取第二次输入的数字
for (var i = 0; i < str.length; i++) {
// 判断加减乘除
if(str[i]== "+"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}else if(str[i]== "-"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
else if(str[i]== "*"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
else if(str[i]== "/"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
};
}
// 清空所有数据
if(sum != 0){
left = 0;
right = 0;
sum = 0;
numb = 0;
$("box").value = $(id).value;
}
}
// 数字键盘区(开始)
$("one").onclick = function(){
figure("one");
}
$("two").onclick = function(){
figure("two");
}
$("three").onclick = function(){
figure("three");
}
$("four").onclick = function(){
figure("four");
}
$("five").onclick = function(){
figure("five");
}
$("six").onclick = function(){
figure("six");
}
$("seven").onclick = function(){
figure("seven");
}
$("eight").onclick = function(){
figure("eight");
}
$("nine").onclick = function(){
figure("nine");
}
$("zero").onclick = function(){
figure("zero");
}
// 数字键盘区(结束)
//主要功能区
// 加
$("add").onclick = function(){
operation("add");
}
//减
$("reduce").onclick = function(){
operation("reduce");
}
// 乘
$("ride").onclick = function(){
operation("ride");
}
// 除
$("division").onclick = function(){
operation("division");
}
// 点
$("round").onclick = function(){
// 限制点的输入
if(numb === 0 && sum == 0){ //numb值等于0 类型等于number
$("box").value = $("box").value + $("round").value;
numb = ($("box").value); //numb赋值为字符串
}
}
// 清除
$("res").onclick = function(){
if($("box").value != "0")
{
left = 0;
right = 0;
sum = 0;
numb = 0;
$("box").value = "0";
}
}
// 求和(sum)
$("sum").onclick = function(){
var symbol = "";
if(left != 0 && right != 0){
for (var i = 0; i < $("box").value.length; i ++ ) {
symbol = $("box").value[i];
if(symbol == "+"){
sum = left + right;
$("box").value = sum;
}else if(symbol == "-"){
sum = left - right;
$("box").value = sum;
}
else if(symbol == "*"){
sum = left * right;
$("box").value = sum;
}
else if(symbol == "/"){
sum = left / right;
$("box").value = sum;
}
};
}
}
}
// 功能区(结束)
html用js计算显示,html+css+js实现计算器功能相关推荐
- html css js编程顺序,html css js先学哪个呢?
前端开发三剑客为 HTML.CSS.JavaScript.这三门语言的掌握对前端开发程序员来说是必须的,但有不少同学不懂得先学习哪一门语言.那么这篇文章 w3cschool 小编就来为你解答一下 HT ...
- html css js 完整案例,html+css+js实例
[实例简介] 用html+css+js做的一个简单小网页,可以作为初学者的参考资料. [实例截图] [核心代码] travel └── travel ├── css.css ├── images │ ...
- js计算日期差;js计算天数差
场景:首先要注意两种情况 1.只是计算年月日的天数差,例如2022-10-10 12:00:00与 2022-10-11 00:00:00 相差1天 2.计算包含时分秒的天数差,例如2022-10-1 ...
- html css js知识整理,Html+Css+Js实用知识汇总(持续更新中...)
Html篇 基本概念: html:超文本标记语言(Hyper Text Markup Language) html5:下一代的html xhtml:更严谨更纯净的html 表头 网站标题 //页面编码 ...
- js计算浮点数出现小数;解决js计算小数问题;js数组相加出现小数;
原博1 原博2 方案1和方案2都是有效的 情景: 在计算浮点数时候,出现多余小数. 例如: 1.11 + 1 = 2.1100000000000003 为什么计算小数会出现误差? 浮点数值的最高进度是 ...
- d3.js html显示图片,d3.js v4:如何在鼠标点击节点后显示图像
在使用d3.js时仍然相当缺乏经验,我碰到了一个障碍. 希望有人能帮助我.d3.js v4:如何在鼠标点击节点后显示图像 我试图在鼠标单击图形中的节点时显示图片. 理想情况下,我想单击几个节点并显示图 ...
- html js中间显示悬浮窗,Js 悬浮窗口(可固定位置)代码
本节内容: Js 悬浮窗口 说明: 固定位置的Js悬浮窗口,代码有详细的注释. 例子: 复制代码 代码示例: Fixed固定位置的悬浮 - www.jquerycn.cn * { font-size: ...
- js 实时显示服务器时间,js获取服务器实时时间
本文主要和大家分享js获取服务器实时时间,主要以代码的方法和大家分享,希望能帮助到大家. AJAX获取服务器时间 /* * ajax 函数,处理 ajax 请求 * @param function c ...
- js html显示emoji表情,js emoji表情长度判断(示例代码)
1.需求:输入框长度限制为10个字符,包括表情.超出长度提示. 注:iPhone手机自定义的表情,有四个小人的,三个小人的,主要是长度还都不一样.有的表情可能一个就超出了长度限制(10),比如???? ...
最新文章
- 机器学习基础知识之矩阵
- thonny中文版(python编辑器)
- 软件测试-PR录制脚本程序ie的时候闪退
- WEBBASE篇: 第五篇, CSS知识3
- 前端学习(1424):ajax低版本兼容问题
- 【转】c#数字图像处理(一)Bitmap类、 Bitmapdata类和 Graphics类
- python win32ui_Python创建普通菜单示例【基于win32ui模块】
- Android Bundle类别
- C#中对注册表的操作指南
- 详解用OpenCV绘制各类几何图形
- php pg_fetch_row,pg_fetch_row
- platform_device_add()函数分析
- java二级考试真题_计算机等级考试真题2(JAVA)
- NIS企业级应用案例-统一Linux和Windows身份验证(二)
- 201809-1—卖菜
- 北京地铁票价查询系统 c++ Dijkstra算法
- HDU - 1520 Anniversary party (有向入门树形DP)
- Vegas的新功能——触摸编辑
- 普元云计算-你适合微服务么:实施微服务的4个先决条件和重点工作
- Profinet Commander下载方法
热门文章
- windows 安装RabbitMQ 遇到 epmd error for host xxx: address (cannot connect to host/port)错误解决方法
- 单片机七阶音符_求单片机一些音乐的音符及节拍
- MySQL 大数据in查询该怎么优化
- IceDemos:使用IceBox
- 520│和周大福一起甜蜜出击,花“饰”告白
- 大屏幕服务器无信号,关于思讯互动平台大屏幕使用过程中错误的排查
- linux远程登录、拷贝及无线配置
- figma那些好用的小技巧,你知道吗?
- 手机号码、电话号码正则表达式
- 用java编写一个聊天程序_基于JAVA实现的一个简单的网络聊天程序