html+css+js를 사용하여 계산기 구현
html+css+js를 사용하여 계산기를 구현하고 계산 여정을 시작하세요
렌더링:
코드는 다음과 같습니다. 복사하여 사용하세요.
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<style>
/* 主体 */
.counter{
width: 396px;
height: 486px;
background-color: #F2F2F2;
border: 1px solid #C2C3C6;
margin: 50px auto;
}
/* 显示框 */
#box {
height: 70px;
width: 336px;
background-color: #323232;
border: none;
margin: 40px 25px 32px 25px;
font: 700 40px/70px "微软雅黑";
color: #ffffff;
padding-right: 10px;
}
/* 功能区 */
.funct {
padding: 0 20px;
position: relative;
}
/* 按钮样式 */
.funct input {
height: 40px;
width: 60px;
margin: 10px 10px;
font: 400 20px/40px "微软雅黑";
}
/* 清除按钮样式 */
.funct #res {
width: 150px;
}
/* + - = . 按钮浮动 */
#add, #reduce, #round, #sum {
position: absolute;
right: 0px;
bottom: 0px;
}
/* 减号位置 */
#reduce {
right: 30px;
top: 60px;
}
/* 加号位置 */
#add {
right: 30px;
top: 120px;
}
/* 等于号位置 */
#sum {
height: 100px;
right: 30px;
bottom: 0px;
}
/* 小数点位置 */
#round {
right: 120px;
bottom: 0px;
}
/* 0 */
#zero {
width: 150px;
}
/* 数字区 */
.numb {
width: 280px;
}
</style>
<script>
window.onload = function(){
// 数据容器
var left = 0; //被除数
var right = 0; //除数
var sum = 0; //和
var numb = 0; //此变量用来限制点的输入
// 获取id并返回
function $(id){
return document.getElementById(id);
}
// 运算函数
function operation(id){
if( $("box").value != "0"){
if(left == 0)
{
$("box").value = $("box").value + $(id).value;
left = parseFloat($("box").value);
}
}
//numb 转为number类型 让点可以再输入一次
numb = 0;
}
// 数字盘函数
function figure(id){
// 判断被除数是否有值
if(left == 0)
{
// 改变value默认值
if ($("box").value === "0" ) {
$("box").value = $(id).value;
}else{
$("box").value = $("box").value + $(id).value;
}
}else{
$("box").value = $("box").value + $(id).value;
var str = $("box").value;
var num = "";
// 获取第二次输入的数字
for (var i = 0; i < str.length; i++) {
// 判断加减乘除
if(str[i]== "+"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}else if(str[i]== "-"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
else if(str[i]== "*"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
else if(str[i]== "/"){
for (var j = i + 1; j < str.length; j++) {
num+=str[j];
};
right = parseFloat(num);
}
};
}
// 清空所有数据
if(sum != 0){
left = 0;
right = 0;
sum = 0;
numb = 0;
$("box").value = $(id).value;
}
}
// 数字键盘区----------------------------------------------------------开始
$("one").onclick = function(){
figure("one");
}
$("two").onclick = function(){
figure("two");
}
$("three").onclick = function(){
figure("three");
}
$("four").onclick = function(){
figure("four");
}
$("five").onclick = function(){
figure("five");
}
$("six").onclick = function(){
figure("six");
}
$("seven").onclick = function(){
figure("seven");
}
$("eight").onclick = function(){
figure("eight");
}
$("nine").onclick = function(){
figure("nine");
}
$("zero").onclick = function(){
figure("zero");
}
// 数字键盘区----------------------------------------------------------结束
//功能区-----------------------------------------------------------开始
// 加
$("add").onclick = function(){
operation("add");
}
//减
$("reduce").onclick = function(){
operation("reduce");
}
// 乘
$("ride").onclick = function(){
operation("ride");
}
// 除
$("division").onclick = function(){
operation("division");
}
// 点
$("round").onclick = function(){
// 限制点的输入
if(numb === 0 && sum == 0){ //numb值等于0 类型等于number
$("box").value = $("box").value + $("round").value;
numb = ($("box").value); //numb赋值为字符串
}
}
// 清除
$("res").onclick = function(){
if($("box").value != "0")
{
left = 0;
right = 0;
sum = 0;
numb = 0;
$("box").value = "0";
}
}
// 求和
$("sum").onclick = function(){
var symbol = "";
if(left != 0 && right != 0){
for (var i = 0; i < $("box").value.length; i ++ ) {
symbol = $("box").value[i];
if(symbol == "+"){
sum = left + right;
$("box").value = sum;
}else if(symbol == "-"){
sum = left - right;
$("box").value = sum;
}
else if(symbol == "*"){
sum = left * right;
$("box").value = sum;
}
else if(symbol == "/"){
sum = left / right;
$("box").value = sum;
}
};
}
}
}
// 功能区--------------------------------------------------------------------------结束
</script>
</head>
<body>
</div>
<div>
<input type="text" id="box" style="text-align:right" readOnly="true" value="0">
<div>
<input type="reset" id="res" value="C">
<input type="button" id="division" value="/">
<input type="button" id="ride" value="*">
<input type="button" id="add" value="+">
<input type="button" id="reduce" value="-">
<input type="button" id="round" value=".">
<input type="button" id="sum" value="=">
<div>
<input type="button" id="one" value="1">
<input type="button" id="two" value="2">
<input type="button" id="three" value="3">
<input type="button" id="four" value="4">
<input type="button" id="five" value="5">
<input type="button" id="six" value="6">
<input type="button" id="seven" value="7">
<input type="button" id="eight" value="8">
<input type="button" id="nine" value="9">
<input type="button" id="zero" value="0">
</div>
</div>
</div>
</body>
</html>위 내용은 html+css+js를 사용하여 계산기 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7462
15
1376
52
77
11
44
19
17
17
계산기의 ac 키는 무엇입니까?
Feb 24, 2023 am 10:19 AM
계산기의 ac는 "모두 지우기" 키입니다. ac의 전체 영어 이름은 "모든 지우기 키"를 의미합니다. ac 키를 누르면 숫자 입력 중에 모든 레지스터의 값이 지워집니다. , 처음 누를 때 ac 키를 누르면 메모리 내용을 제외한 모든 값이 지워집니다.
계산기에서 e는 무엇입니까
Oct 19, 2022 am 11:23 AM
계산기의 e는 10의 거듭제곱을 나타내며, 이는 밑이 10인 지수를 의미합니다. 예를 들어, 1.99714E13은 19971400000000과 같습니다. 10의 n제곱을 곱한 형태로 숫자를 표현하는 것을 과학적 표기법이라고 합니다. : 크거나 작은 것을 많은 자릿수로 표시하거나 연산하고자 할 때, 과학적 표기법을 사용하면 많은 공간과 시간의 낭비를 피할 수 있습니다.
win10 계산기를 여는 방법을 가르쳐주세요
Jul 12, 2023 pm 11:21 PM
win10 시스템에는 많은 네티즌이 다운로드, 설치 및 사용하도록 유도하는 많은 강력한 기능이 있습니다. 또한 win10 계산기 도구와 같은 실용적인 장치도 많이 있습니다. 일부 네티즌들은 아직 Win10 계산기를 여는 방법을 모릅니다. Win10 계산기를 여는 방법을 가르쳐 드리겠습니다. 방법 1: 시작 메뉴에서 검색 1. Windows 10 시스템 바탕 화면에서 "시작/계산기" 메뉴 항목을 클릭합니다. 2. Windows 10의 계산기 창을 열 수 있습니다. 방법 2: Cortana 검색 열기 1. Windows 10 바탕 화면에서 작업 표시줄 왼쪽 하단에 있는 "Cortana 검색" 아이콘을 클릭합니다. 2. 검색할 팝업 메뉴에 "계산기"라는 키워드를 입력하고, 검색 결과에서 계산기 메뉴 항목을 클릭하세요.
저장기능이 없는 계산기란 무엇인가요?
Dec 29, 2020 am 10:59 AM
저장 기능이 없는 계산기는 공학용 계산기를 말하며, 공학용 계산기는 지수, 제곱근, 지수, 로그, 삼각 함수, 통계 등의 연산을 수행할 수 있는 전자 계산기의 일종으로 함수 계산기라고도 합니다. 일반적으로 계산기, 컨트롤러, 메모리, 키보드, 디스플레이, 전원 공급 장치, 일부 선택적 주변 장치 및 전자 액세서리로 구성됩니다.
PHP로 작성된 효율적인 피보나치 수열 계산기
Mar 21, 2024 am 10:06 AM
효율적인 피보나치 수열 계산기: 피보나치 수열의 PHP 구현은 매우 고전적인 수학 문제입니다. 규칙은 각 숫자가 이전 두 숫자의 합과 동일하다는 것입니다. 즉, F(n)=F(n -1)+F입니다. (n-2), 여기서 F(0)=0이고 F(1)=1입니다. 피보나치 수열을 계산할 때 재귀적으로 구현할 수는 있지만 값이 커질수록 성능 문제가 발생합니다. 따라서 이 기사에서는 PHP를 사용하여 효율적인 피보나치 작성 방법을 소개합니다.
JavaScript를 사용하여 간단한 계산기 기능을 구현하는 방법은 무엇입니까?
Oct 27, 2023 pm 02:51 PM
JavaScript를 사용하여 간단한 계산기 기능을 구현하는 방법은 무엇입니까? 계산기는 일상생활에서 흔히 사용되는 도구 중 하나이며 간단한 수학 연산을 수행하는 데 사용할 수 있습니다. 오늘은 자바스크립트를 이용하여 간단한 계산기 기능을 구현해 보겠습니다. 이 글에서는 기본적인 수학 연산과 계산기 인터페이스를 구현하기 위해 JavaScript로 코드를 작성하는 방법을 보여드리겠습니다. 먼저 작업 결과를 표시하기 위한 텍스트가 포함된 HTML 파일을 만들어야 합니다.
Mac 시스템 계산기에서 통화를 변환하는 방법 - Mac 시스템 계산기에서 통화를 변환하는 방법
Mar 18, 2024 pm 03:58 PM
여러분, Mac 시스템 계산기에서 환율을 변환하는 방법을 알고 계시나요? 오늘은 Mac 시스템 계산기에서 환율을 변환하는 방법을 설명하겠습니다. 관심이 있으시면 저와 함께 살펴보시기 바랍니다. 1단계: Mac 시스템 계산기를 열고 메뉴 표시줄에서 변환을 클릭합니다. 2단계: 전환 메뉴에서 통화를 클릭하세요. 3단계: 변환할 통화를 선택한 후 변환 버튼을 클릭하세요.
계산기의 ac 키는 무엇입니까?
Aug 18, 2023 am 09:48 AM
계산기의 "AC" 키는 "모두 지우기"를 의미합니다. AC 키를 누르면 계산기의 모든 입력과 작업이 지워지고 계산기가 초기 상태로 재설정됩니다. 이는 계산을 다시 시작하는 것과 같습니다.
