热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

JS快速实现简单计算器

这篇文章主要为大家详细介绍了JS快速实现简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现简单计算器的具体代码,供大家参考,具体内容如下

直接上图

HTML部分



 
 
 
 
 
 
 
 

欢迎使用


输入不要超过8位数哦

制作人:xxx    监督人:xxx

CSS部分

* {
 margin: 0px;
 padding: 0px;
}
/*body {
 background: cornflowerblue;
}*/
.box {
 width: 260px;
 height: 330px;
 border: 5px solid cornflowerblue;
 margin: 60px auto;
 border-radius: 10px;
}
.header {
 width: 260px;
 height: 80px;
 background:lightcyan;
}
.screen {
 width: 260px;
 height: 40px;
 background:lightcyan;
 font-size: 25px;
 text-align: center;
}
.content {
 width: 260px;
 height: 250px;
 color: yellowgreen;
 background: #FAEBD7;
 text-align: center;
}
input {
 text-align: center;
 width: 60px;
 height: 40px;
 background: pink;
 margin-top: 4px;
 font-size: 15px;
}
b {
 color: fuchsia;
}

JS部分

window.Onload= function() {
 function $(id) {
 return document.getElementById(id);
 }
 function put1(id){
 $(id).Onclick= function() {
 
 $("s1").innerHTML = $("s1").innerHTML+this.value;
 if ($("s1").innerHTML==116) {
 prompt("你爱我吗");
 $("s1").innerHTML = "嘻嘻"
 }
 if ($("s1").innerHTML==1129) {
 alert("我爱你");
 }
 if ($("s1").innerHTML==1314520) {
 alert("我爱你");
 }
 }
 }
 var result;
 $("b=").Onclick= function() {
 result = eval($("s1").innerHTML);
 $("s2").innerHTML = "="+result;
 }
 $("start").Onclick= function() {
 $("s1").innerHTML = "欢迎使用";
 $("s2").innerHTML = "使用前清零";
 $("music").play();
 
 }
 
 $("clear").Onclick= function() {
 $("s1").innerHTML = "";
 $("s2").innerHTML = "";
 }
 $("stop").Onclick= function() {
 $("s1").innerHTML = "再见";
 setTimeout(function() {
 $("s1").innerHTML = "";
 $("s2").innerHTML = "";
 },3000);
 $("music").pause();
 }
 $("del").Onclick= function() {
 $("s1").innerHTML = $("s1").innerHTML.substr(0, $("s1").innerHTML.length - 1);
 }
 
 put1("b1");
 put1("b2");
 put1("b3");
 put1("b4");
 put1("b5");
 put1("b6");
 put1("b7");
 put1("b8");
 put1("b9");
 put1("b0");
 put1("b+");
 put1("b-");
 put1("bx");
 put1("b÷");
 put1("b.");
}

更多计算器功能实现,请点击专题: 计算器功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • Gty的二逼妹子序列 - 分块与莫队算法的应用
    Autumn 和 Bakser 正在研究 Gty 的妹子序列,但遇到了一个难题。他们希望计算某个区间内美丽度属于 [a, b] 的妹子的美丽度种类数。本文将详细介绍如何利用分块和莫队算法解决这一问题。 ... [详细]
  • 年前,我发表了一篇文章,分享了自己通过在线教育平台学习IT技能的经历。文中详细探讨了在线教育与传统线下教育在技能培训方面的优缺点。许多网友在讨论在线教育时,常常提到“在线教育是否缺乏学习氛围”的问题。本文将对此进行深入分析。 ... [详细]
  • 本文介绍了如何在 Qt 应用程序中实现状态栏、浮动窗口(铆接部件)和中心部件。通过简单的代码示例,详细解释了每个组件的创建和设置方法。 ... [详细]
  • 本文介绍了如何使用Postman构建和发送HTTP请求,包括四个主要部分:方法(Method)、URL、头部(Headers)和主体(Body)。特别强调了Body部分的重要性,并详细说明了不同类型的请求体。 ... [详细]
  • 本文介绍了 Confluence 6 中使用的其他 Cookie,这些 Cookie 主要用于存储产品的基本持久性和用户偏好设置,以提升用户体验。 ... [详细]
  • Bootstrap 插件使用指南
    本文详细介绍了如何在 Web 前端开发中使用 Bootstrap 插件,包括自动触发插件的方法、插件的引用方式以及具体的实例。 ... [详细]
  • iOS snow animation
    CTSnowAnimationView.hCTMyCtripCreatedbyalexon1614.Copyright©2016年ctrip.Allrightsreserved.# ... [详细]
  • 如何解决TS1219:实验性装饰器功能可能在未来版本中更改的问题
    本文介绍了两种方法来解决TS1219错误:通过VSCode设置启用实验性装饰器,或在项目根目录下创建配置文件(jsconfig.json或tsconfig.json)。 ... [详细]
  • 本文探讨了 Canvas 元素在不同尺寸设置下出现变形失真的原因,并详细解释了 HTML 尺寸和 CSS 尺寸的区别及其对视觉效果的影响。 ... [详细]
  • 第七卷《英才》强调,即使有良药,若不对症,效果也不如低等药物;即使有贤才,若不适用,效果也不如普通人。文中通过多个比喻,阐述了人才使用的重要性,指出合适的人才在适当的时间和场合才能发挥最大效用。 ... [详细]
  • packagecom.panchan.tsmese.utils;importjava.lang.reflect.ParameterizedType;importjava.lang. ... [详细]
  • .children() 方法用于获取选中元素的所有直接子元素。此方法仅遍历DOM树的一层,如需遍历多层子元素,请使用 .find() 方法。 ... [详细]
  • 蒜头君的倒水问题(矩阵快速幂优化)
    蒜头君将两杯热水分别倒入两个杯子中,每杯水的初始量分别为a毫升和b毫升。为了使水冷却,蒜头君采用了一种特殊的方式,即每次将第一杯中的x%的水倒入第二杯,同时将第二杯中的y%的水倒入第一杯。这种操作会重复进行k次,最终求出两杯水中各自的水量。 ... [详细]
  • 经过一年的思考,我发现自己对开发的兴趣并不浓厚,而对算法研究则更加热衷。本文将探讨开发与算法之间的本质差异,并分享我的未来学习计划。 ... [详细]
  • CSS 百分比单位的取值依据是什么
    本文详细探讨了 CSS 中百分比单位的取值依据,包括不同定位方式下的包含块概念及其应用。通过具体的示例和代码,帮助读者更好地理解和掌握这一知识点。 ... [详细]
author-avatar
Jessica_猪猪到_697
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有