文章详情页

javascript代码实现简易计算器

【字号：大中小】日期：2023-06-10 15:27:25浏览：9作者：猪猪

本文实例为大家分享了javascript实现简易计算器的具体代码，供大家参考，具体内容如下

编辑了几个小时研发了一个简易好理解的计算器。不停改Bug，终于改好了。

这是样式

javascript代码实现简易计算器

这是Css部分

这是HTML部分

<div id='box'> <div id='reckon'> <input type='text' id='input1'> <ul> <li class='num'>7</li> <li class='num'>8</li> <li class='num'>9</li> <li class='opcr'>+</li> <li class='num'>4</li> <li class='num'>5</li> <li class='num'>6</li> <li class='opcr'>- </li> <li class='num'>1</li> <li class='num'>2</li> <li class='num'>3</li> <li class='opcr'>*</li> <li class='num'>0</li> <li id='returnZero'>C</li> <li id='resule'>=</li> <li class='opcr'>/</li> </ul> </div> </div>/* 定义两个标签来存放符号跟第一个值*/ <input type='text' style='display:none'> <input type='text' style='display:none'>

html部分的话就是吧所有数字定义为一个class名字，把所有运算符号定义为一个class 以及定义两个input来存放运算符

完整部分

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>简易计算器</title> <style> #box { background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); width: 500px; height: 420px; margin: auto; margin-top: 200px; position: relative; } .reckon { width: 280px; height: 200px; background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); ; position: absolute; top: 100px; left: 100px; border: 5px solid #2a2b2c } #input1 { background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); border: none; width: 220px; height: 8px; float: right; margin-top: 10px; margin-right: 20px; outline: none; padding: 10px } ul li { float: left; list-style: none; margin: 4px 2px; border-radius: 3px; background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); box-shadow: 2px 2px #ccc; color: #fff; font-weight: '楷体'; width: 50px; height: 30px; text-align: center; line-height: 30px; } ul { margin-top: 5px; } ul li:hover { opacity: 0.7; } </style></head><body> <div id='box'> <div id='reckon'> <input type='text' id='input1'> <ul> <li class='num'>7</li> <li class='num'>8</li> <li class='num'>9</li> <li class='opcr'>+</li> <li class='num'>4</li> <li class='num'>5</li> <li class='num'>6</li> <li class='opcr'>- </li> <li class='num'>1</li> <li class='num'>2</li> <li class='num'>3</li> <li class='opcr'>*</li> <li class='num'>0</li> <li id='returnZero'>C</li> <li id='resule'>=</li> <li class='opcr'>/</li> </ul> </div> </div> <input type='text' style='display:block'> <input type='text' style='display:block'> <script> lis = document.querySelectorAll('#box ul .num')//获取所有的数字 opcr = document.querySelectorAll('#box ul .opcr')//获取+——*/ for (var i = 0; i < lis.length; i++) { //遍历所有的数字 lis[i].onclick = function () { input1.value += parseInt(this.innerHTML)//点击input1显示 } } //遍历所有的+——*/ for (let i = 0; i < opcr.length; i++) { opcr[i].onclick = function () { if (text1.value == '') {//当存放第一个值为空时候 text1.value = input1.value//存放第一个值 input1.value = '' //input框里的值为空 per.value = this.innerHTML; //存放符号的值为空 } else { text1.value = eval(text1.value + per.value + input1.value)//不是空的时候计算值 per.value = this.innerHTML;//存放符号的值为点击的值 input1.value = ''//input框里的值为空 } } } //等于 resule.onclick = function () { input1.value = eval(text1.value + per.value + input1.value)//计算里面的值 per.value = '' //清空存放per的值 text1.value = ''//input框里的值为空 } //点击清空所有 returnZero.onclick = function () { input1.value = '' per.value = '' text1.value = '' } </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。

JavaScript

上一条：JavaScript实现点击切换功能下一条：JavaScript实现下拉列表

相关文章：

1. Django rest framework使用类视图实现首页API2. python中Task封装协程的知识点总结3. 理解Django 中Call Stack机制的小Demo4. django 获取字段最大值,最新的记录操作5. js实现简单抽奖功能6. 用python对excel查重7. Django用户认证系统如何实现自定义8. Django数据库迁移常见使用方法9. python输出国际象棋棋盘的实例分享10. Python随机函数random随机获取数字、字符串、列表等使用详解

排行榜

					
					js实现简单抽奖功能
python中Task封装协程的知识点总结
Django用户认证系统如何实现自定义
Django数据库迁移常见使用方法
用python对excel查重
理解Django 中Call Stack机制的小Demo
django 获取字段最大值,最新的记录操作
Django rest framework使用类视图实现首页API
window属性onbeforeunload语法教程示例
Python Flask微信小程序登录流程及登录api实现代码
Python requests.post方法中data与json参数区别详解
				

热门标签