JavaScript实现简单计算器小程序
更新时间：2022年01月21日 09:52:18 作者：陰陽G.M
这篇文章主要为大家详细介绍了JavaScript实现简单计算器小程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现简单计算器的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<style>
*{padding: 0;margin: 0;box-sizing: border-box;}
body>div{width: 300px;height: 400px;background-color: rgb(141, 141, 141);display: flex;justify-content: space-around;flex-direction: column;margin: auto;border: 2px solid #000;position: relative;}
body>div>div{height: 16%;margin: 0 8px;padding: 10px;line-height: 40px; border: 3px double #000;font-size: 40px;text-align: right;background-color: rgb(221, 221, 221);overflow: hidden;}
body>div>ul{list-style: none;display: flex;flex-wrap: wrap;justify-content: space-around;user-select: none;}
body>div>ul>li{border: 1px solid #000;width: 50px;height: 50px;padding: 15px;cursor: pointer; text-align: center;background-color: rgb(219, 219, 219); border-radius: 10%;margin: 10px;}
body>div>ul>li:hover{background-color: rgb(126, 126, 126);border: 1px solid rgb(255, 228, 228);border: 1px solid rgb(201, 201, 201);}
body>div>span{position: absolute;font-size: 5px;top: 380px;left: 230px;color: rgb(94, 94, 94);}
</style>
</head>
<body>
<div>
<div></div>
<ul>
<li>0</li>
<li>C</li>
<li>/</li>
<li>*</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>-</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>+</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>=</li>
</ul>
<span>隂陽G.M ©</span>
</div>
<script>
var ul=document.querySelector("body>div>ul");
var XS=document.querySelector("body>div>div");
ul.onclick=function(e){
if(e.target.nodeName=="LI"){
switch(e.target.innerHTML){
case "C":XS.innerHTML="";break;
case "=":try{XS.innerHTML=eval(XS.innerHTML)}catch(err){XS.innerHTML="错误"};break;
default: XS.innerHTML+=e.target.innerHTML;
}
}
}
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript允许你改变站点的CSS表示层。如果想把用户的眼球吸引到那些你希望他们关注的页面元素上，改变样式是极佳的（也是很普遍的）方式。2008-10-10
这篇文章主要介绍了js如何实现检测网络是否具体连接功能 ,需要的朋友可以参考下2014-05-05
JavaScript类型转换方法及需要注意的问题小结(挺全面)
JavaScript类型转换方法及需要注意的问题，在js中经常需要对数据类型的转换操作，需要的朋友可以参考下。2010-11-11
这篇文章主要为大家详细介绍了js控件Kindeditor实现图片自动上传功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了JS中的const命令你真懂它吗，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
实现table排序，网上有很多解决方案，很多都基于jQuery，最后我选择用sortElements，实现很简单2014-05-05
今天小编就为大家分享一篇layui默认选中table的CheckBox复选框方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章介绍了微信小程序实现简易计算器的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
本文主要介绍了JavaScript利用闭包实现模块化的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
Javascript Cookie读写删除操作的函数代码，需要操作cookies的朋友可以参考下。2010-03-03
最新评论