前端学习(2244):计算器显示问题

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>奥里给!</title><style type="text/css">.a {height: 100px;width: 450px;border: 3px solid black;background-color: beige;font-size: 50px;}#b {height: 570px;width: 450px;border: 2px solid black;background-color: pink;font-family: 隶书;font-size: 20px;}.c {height: 90px;width: 100px;border: 1px solid black;background-color: aquamarine;float: left;font-size: 60px;color: brown;margin: 8px;border-radius: 30px;}.d {height: 90px;width: 75px;border: 1px solid black;margin: 8px;float: left;background: sandybrown;font-size: 50px;color: brown;border-radius: 30px;}.e {height: 90px;width: 100px;border: 1px solid black;background-color: sandybrown;float: left;font-size: 45px;color: brown;margin: 8px;border-radius: 30px;}.e:hover {background: skyblue;color: white;transform: scale(1.08, 1.08);}.d:hover {background: skyblue;color: white;transform: scale(1.08, 1.08);}.c:hover {background: plum;color: aliceblue;transform: scale(1.08, 1.08);}</style>
</head><body><center><div class="a" id="resultInput"></div><div id="b"><button class="c" onclick="printResultInput(this)" value="1">1</button><button class="c" onclick="printResultInput(this)" value="2">2</button><button class="c" onclick="printResultInput(this)" value="3">3</button><button class="d" onclick="printResultInput(this)" value="+">+</button><button class="c" onclick="printResultInput(this)" value="4">4</button><button class="c" onclick="printResultInput(this)" value="5">5</button><button class="c" onclick="printResultInput(this)" value="6">6</button><button class="d" onclick="printResultInput(this)" value="-">-</button><button class="c" onclick="printResultInput(this)" value="7">7</button><button class="c" onclick="printResultInput(this)" value="8">8</button><button class="c" onclick="printResultInput(this)" value="9">9</button><button class="d" onclick="printResultInput(this)" value="*">*</button><button class="e" onclick="printResultInput(this)" value=".">.</button><button class="c" onclick="printResultInput(this)" value="0">0</button><button class="e" onclick="count()">=</button><button class="d" onclick="printResultInput(this)" value="/">/</button><button class="e" onclick="tuige()">👈</button><button class="e" onclick="tuige()">👈</button><button class="e" onclick="tuige()">👈 </button><button class="d" onclick="clearNum()">AC</button> 比努力更可怕的是坚持!</div></center><script type="text/javascript">/*printResultInput(this),this可以理解为这个函数在这个按钮的功能 value是赋值*//*将点击的按钮值显示在resultInput上*/function printResultInput(l) { /*??????????????????????????????????????????????????*/document.getElementById("resultInput").innerHTML += l.value;}/* 四则运算方法 */function count() {var countText = document.getElementById("resultInput").innerHTML;var operator, result;if (countText.indexOf("+") !== -1)/*indexOf() 可以显示()里的元素的位置,显示的的是数字。indexOf() 方法对大小写敏感!注释:如果要检索的字符串值没有出现,则该方法返回 -1。。。。。。。在这里用indexof搜索,如果找到了indexof就会是
一个正数如果没有早到的话就是-1,countText.indexOf代表的是cunttext的indexof意思实在这里寻找,给indexof
定义一个区域,如果不是-1的话operator就保存了一个加号*/{operator = "+";} else if (countText.indexOf("-") !== -1) {operator = "-";} else if (countText.indexOf("*") !== -1) {operator = "*";} else if (countText.indexOf("/") !== -1) {operator = "/";}var num1 = countText.substring(0, countText.indexOf(operator));/*substring() 方法用于提取字符串中介于两个指定下标之间的字符。countText.substring表示在counttext中寻找,0是第一个字符,countText.indexOf(operator)应该是从0字符到加号前面的那个字符,,,,这么写的应该是counttext里indexof里的参数operator,不然直接找oper找不到,因为oper是个字符串屏幕上没有,屏幕上只有=-*那代表的是保存在oper的的数我感觉应该就是参数,想要找到他要找到他的父元素也就是定义它的函数也就是indexof*/var num2 = countText.substring(countText.indexOf(operator) + 1);if (operator == "+") {result = parseFloat(num1) + parseFloat(num2);} else if (operator == "-") {result = parseFloat(num1) - parseFloat(num2);} else if (operator == "*") {result = parseFloat(num1) * parseFloat(num2);} else if (operator == "/") {result = parseFloat(num1) / parseFloat(num2);}document.getElementById("resultInput").innerHTML = result;}function tuige() {var t = counttext.substring(0, countText.parseFloat(num2) - 1);document.getElementById("resultInput").innerHTML = t;}/*清零*/function clearNum() {document.getElementById("resultInput").innerHTML = '';}//退位function tui() {}//把按纽上的数字显示到上面的盒子中//获取屏幕中的元素//1判断屏幕上的是+-*/哪一个然后把他保存到一个变量中用到了indexOf()函数没有()里的字符串时显示-1//2获取=-*/前面和后面额元素然后分别把他们保存在两个变量中//把2中的两个元素字符串类型变成浮点型/1最后利用这三个变量(2中的两个变量1中的一个变量)进行计算,把结果保存在一个变量中//把计算结果的变量显示在屏幕中</script></body></html>

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417406.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL索引原理及慢查询优化

MySQL凭借着出色的性能、低廉的成本、丰富的资源&#xff0c;已经成为绝大多数互联网公司的首选关系型数据库。虽然性能出色&#xff0c;但所谓“好马配好鞍”&#xff0c;如何能够更好的使用它&#xff0c;已经成为开发工程师的必修课&#xff0c;我们经常会从职位描述上看到诸…

C语言沉浸式刷题【C语言必刷题】

1.猜凶手 某地发生了一起谋杀案&#xff0c;警察通过排查确定杀人凶手必为四个嫌疑犯的一个&#xff0c;以下是4个嫌犯的供词。已知&#xff08;请编写代码找出凶手&#xff09; A说&#xff1a;不是我。 B说&#xff1a;是C。C说&#xff1a;是D。D说&#xff1a;C再胡说。 程…

python3 while循环语句_python While 循环语句

python While 循环语句发布时间&#xff1a;2018-02-12 16:46:28编辑&#xff1a;admin阅读(2055)python 编程中 while 语句用于循环执行程序&#xff0c;即在某条件下&#xff0c;循环执行某段程序&#xff0c;以处理需要重复处理的相同任务。其基本形式为&#xff1a;while 判…

Axure 共享强制签出签入

签出时点击不签出编辑全部——确定修改后签入时点击全部偷偷签出——确定注意一定要修改后&#xff0c;否则无法检测到修改&#xff0c;不会执行签入

关于逐项作用函数的用法

关于逐项作用函数的用法讲一下Thread这个函数的用法&#xff0c;其中后面两个用法很好用&#xff0c;也常常被忽略。用法一&#xff1a;比较常用用法二&#xff1a;我觉得这一种是很实用的有拓展的方法用法三&#xff1a;构造一种映射关系&#xff0c;在配合 Association[] 关联…

git clone 时候出现Please make sure you have the correct access rights and the repository exists.

输入 git clone 命令时出现Please make sure you have the correct access rights and the repository exists.错误&#xff0c;出现改问题的原因是git服务器没有存储本地ssh密钥。 解决步骤&#xff1a; 1. 删除 .ssh 文件夹【C:\Users\(本地用户名)\.ssh】 中的 known_host…

java io之图片存取

一&#xff1a;建表 二&#xff1a;获取数据库连接 1&#xff1a;导入mysql的驱动jar包&#xff0c;mysql-connector-java-5.1.8-bin.jar 2&#xff1a;写代码连接数据库&#xff0c;如下&#xff1a; 1 /**2 * 3 */ 4 package com.hlcui.file; 5 6 import java.sql.Connec…

An error occurred while searching for implementations of method

1&#xff1a;在我安装完scala的插件后&#xff0c;在打开方法的实现类&#xff08;open implementactions&#xff09;的时候&#xff0c;抛出这个异常&#xff0c;后来发现这个异常是因为我的scala的插件跟我eclipse版本不兼容导致的。 An error occurred while searching fo…

go操作mysql创建多对多_Django 数据库表多对多的创建和增删改查

前面已经学习了在Django里面如何对单表的操作&#xff0c;同时也学习了1对多(单个外键)的表的操作。接下来&#xff0c;我们看看多对多(多个外键)的关系如何创建和管理。比如说&#xff0c;我们有一个主机表&#xff0c;也有一个应用程序表&#xff0c;一个主机可以对应多个程序…

VMware 报错“Intel VT-x处于禁止状态”

VMware Workstation 10虚拟机安装64位windows server 2008 R2系统时报错“Intel VT-x处于禁止状态”&#xff0c;如下图。 工具/原料 VMware Workstation 10 32位windows server 2008 R2 64位方法/步骤 重启电脑&#xff0c;启动中按F1键进入BIOS。(电脑不同进入BIOS的按键不同…