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 相关文章推荐
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
vue 扩展现有组件的操作
Aug 14 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
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
django中的ajax组件教程详解
2018/10/18 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
js实现拖拽效果
2015/02/12 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python冒泡排序简单实现方法
2015/07/09 Python
Python字符串处理实现单词反转
2017/06/14 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Python list和str互转的实现示例
2020/11/16 Python
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
请说出几个常用的异常类
2013/01/08 面试题
黄河的主人教学反思
2014/02/07 职场文书
借款协议书范本
2014/04/22 职场文书
差生评语大全
2014/05/04 职场文书
努力学习演讲稿
2014/05/10 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
社区活动总结范文
2015/05/07 职场文书
化验室安全管理制度
2015/08/06 职场文书
《植树问题》教学反思
2016/03/03 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL