本文实例为大家分享了javascript实现简单计算器的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html> <h
本文实例为大家分享了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>--结束END--
本文标题: JavaScript实现简单计算器小程序
本文链接: https://www.lsjlt.com/news/163211.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0