JavaScript实现简单计算器小程序
作者：陰陽G.M 时间：2024-05-02 16:28:39
本文实例为大家分享了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>
来源：https://blog.csdn.net/u010100877/article/details/109718457
标签：js,计算器
0
投稿猜你喜欢
浅析Flask如何使用日志功能
2023-06-17 17:18:21
python 计算两个列表的相关系数的实现
2021-10-07 10:43:57
MySQL数据库的多种连接方式及工具
2024-01-13 10:37:14
python opencv 检测移动物体并截图保存实例
2023-11-05 16:10:35
python中用ctypes模拟点击的实例讲解
2023-10-29 23:18:42
09年QQ登录Banner之转变
2009-02-16 12:53:00
Python分支语句与循环语句应用实例分析
2022-12-02 03:35:31
GoLang中panic与recover函数以及defer语句超详细讲解
2024-03-22 09:41:37
SQL Server误区30日谈 第3天 即时文件初始化特性可以在SQL Server中开启和关闭
2024-01-16 18:38:28
Python实现多张图片合成一张马赛克图片
2022-02-15 21:09:46
在SQL server2005数据库下创建计划任务
2008-12-26 09:19:00
使用git config --global设置用户名和邮件问题
2022-02-14 11:01:08
python 多维切片之冒号和三个点的用法介绍
2023-05-05 11:57:23
MSSQL 2000 使用帮助(sql server简明教程)
2024-01-22 06:17:34
MySQL SQL预处理(Prepared)的语法实例与注意事项
2024-01-14 17:50:09
Go与C语言的互操作实现
2024-02-04 08:39:28
远程过程调用RPC基本概念及实现原理
2022-09-24 06:45:30
Python打包方法Pyinstaller的使用
2022-06-08 13:25:21
常用SQL功能语句
2024-01-15 17:08:58
golang中json操作的完全指南
2024-04-23 09:35:00
