JS快速实现简单计算器


Posted in Javascript onApril 08, 2020

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

直接上图

JS快速实现简单计算器

HTML部分

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>我的第一个计算器</title>
 <link rel="stylesheet" href="计算器.css" rel="external nofollow" />
 <script src="计算器.js">
 </script>
 </head>
 <body>
 <h1 style="text-align: center;">欢迎使用</h1>
 <!--<audio src="audio/1.mp3" id="music">
 
 </audio>-->
 <hr />
 <p style="text-align: center;color:#6495ED;">输入不要超过8位数哦</p>
 <div class="box">
 <div class="header">
 <div class="screen"><b id="s1"></b></div>
 <div class="screen"><b id="s2"></b></div>
 </div>
 <div class="content">
 <input type="button" name="" id="start" value="开始" />
 <input type="button" name="" id="clear" value="清零" />
 <input type="button" name="" id="del" value="删除" />
 <input type="button" name="" id="stop" value="关闭" />
 <input type="button" name="" id="b1" value="1" />
 <input type="button" name="" id="b2" value="2" />
 <input type="button" name="" id="b3" value="3" />
 <input type="button" name="" id="b+" value="+" />
 <input type="button" name="" id="b4" value="4" />
 <input type="button" name="" id="b5" value="5" />
 <input type="button" name="" id="b6" value="6" />
 <input type="button" name="" id="b-" value="-" />
 <input type="button" name="" id="b7" value="7" />
 <input type="button" name="" id="b8" value="8" />
 <input type="button" name="" id="b9" value="9" />
 <input type="button" name="" id="bx" value="*" />
 <input type="button" name="" id="b0" value="0" />
 <input type="button" name="" id="b." value="." />
 <input type="button" name="" id="b=" value="=" />
 <input type="button" name="" id="b÷" value="÷" />
 <span style="line-height: 30px;">
 制作人:xxx    监督人:xxx
 </span>
 </div>
 </div>
 </body>
</html>

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.");
}

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

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

Javascript 相关文章推荐
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 #Javascript
vue-cli3单页构建大型项目方案
Apr 07 #Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 #Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 #Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 #Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 #Javascript
flexible.js实现移动端rem适配方案
Apr 07 #Javascript
You might like
PHP生成静态页
2006/11/25 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
php实现httpclient类示例
2014/04/08 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
js单例模式详解实例
2013/11/21 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
javascript arguments使用示例
2014/12/16 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python中如何获取类属性的列表
2016/12/26 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Python Pandas 箱线图的实现
2019/07/23 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
sort命令的作用和用法
2012/11/04 面试题
几个Shell Script面试题
2012/08/31 面试题
给老婆的搞笑检讨书
2014/01/12 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
投资入股合作协议书
2014/10/28 职场文书
2015年见习期工作总结
2014/12/12 职场文书
爱心募捐通知范文
2015/04/27 职场文书
职工培训工作总结
2015/08/10 职场文书