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 动态生成方法的例子
Jul 22 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
通过webpack引入第三方库的方法
Jul 20 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
PL-880隐藏功能
2021/03/01 无线电
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
php 代码优化之经典示例
2011/03/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP常用数组函数介绍
2014/07/28 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
HTML Dom与Css控制方法
2010/10/25 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
python使用turtle库绘制时钟
2020/03/25 Python
python学习开发mock接口
2019/04/28 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
关于打架的检讨书
2014/01/17 职场文书
书香校园建设方案
2014/05/02 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
承兑汇票延期证明
2015/06/23 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
如何正确理解python装饰器
2021/06/15 Python