首页 | 目录 | 世界 | 学科 | 文科 | 科学 | 数学 | 物理 | 化学 | 医学 | 计算 | 软件 | 帮助 | 打赏
+ + + =
X

Save Your Code

If you click the save button, your code will be saved, and you get an URL you can share with others.

By clicking the "Save" button you agree to our terms and conditions.

Report Error

X

Save to Google Drive

If you have a Google account, you can save this code to your Google Drive.

Google will ask you to confirm Google Drive access.

X

Open from Google Drive

If you have saved a file to Google Drive, you can open it here:

File Save Orien Theme Result Size: 300 x 150
X
Load from Google DriveOpen file Save Code Change Orientation Change Theme, Dark/Light

​x
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器 - 作者: Mr Yuan</title>
​
​
<script type="text/javascript">
  var curState;
  var curOper;    //正义函数或者是正切函数。。。。记得不清  这里理解定义变量名但是没定义赋值  ，你就这样理解吧
  var num1;
  var preOper;
 //定义浏览器打开页面最初的状态
  function beginState(){
     curState="beStart";   //当前计算机的初始状态
     form1.result.value=0;    //显示器的默认值
     curOper="start";  // =号按键"start"的情况下时待点击
     preOper=false;   //操作符(+,- x)啥的  现在时默认未选择
     console.log("本页面由袁智豪赞助写出");
  
  }
​
​
​
function addnumber(i)   //在body里面 数字按钮onClick属性都是addnumber  唯一每个数字按钮不同的是我在括号里添加了数字的属性,这里addnumber(i)意思就是在这些按钮中的某一个的时候的函数
{
   if(preOper)  //如果操作符都是没有点击和选择 的情况下
   {
     form1.result.value=i;  //定义某个按钮的addnumber('数字')里面的传输到文本框里面
     preOper=false //并且恢复操作运算符的默认值(待点击或者选择)
   }else{
     if(form1.result.value == "0"){  //如果文本框里面的值是字符串0的时候
      form1.result.value=i;  //把文本框里面的值传输到数字按钮number('数字')的值
      curState="beInteger" //重置计算器的状态为整数类型
     }
     else //上面第一个if判断了如果文本框是字符串0的时候的运行,那么这里就是相反,也就是不为0的时候
      { form1.result.value +=i;  //处理文本框的内容下一个
​
      }
​
   }
}
​
​
​
​
​
/*清除功能*/
function cleartext(){
​
if(form1.result.value == "" || form1.result.value == 0 || form1.result.value == null){ 
  alert("啥子都没有你清楚啥,瓜娃子");
return false
} else{
  form1.result.value="0"; //给文本框赋值字符串是0
   curState="beStart"; //整个页面初始化
  curOper="start"  //让=号按钮为待点击
alert("清除成功,请重新开始计算");
​
}  
}
​
​
function totalnumber(){
  if(form1.result.value == "" || form1.result.value == null || form1.result.value == 0){ 
    alert("你输入的是不能运行的值");
    beginState(); //因为当用户瞎搞的时候,这里就直接让整个页面恢复到最初的状态
    return false}
​
   if(curOper != "start") 
   { //如果=号按钮不是处于待点击，也就是当点击的过后的事件
​
 switch(curOper)   //多重语句分支结构,类似于if语句
  {
    case "+":
    num1=parseFloat(num1)+parseFloat(form1.result.value);  //当点击操作运算符中的+号是运算两数之间的和
    break;
    case "-":
    num1=parseFloat(num1)-parseFloat(form1.result.value); //原理同上
    break;
    case "x":
    num1=parseFloat(num1)*parseFloat(form1.result.value); //原理同上
    break;
    case "/":
    num1=parseFloat(num1)/parseFloat(form1.result.value); //原理同上
    break;
}
   
​
form1.result.value=num1;  //文本框的内容是num1
  preOper=true; //设置操作符为true 则已点击
​
curOper="start";  //设置=号键初始化
}}
​
​
​
​
​
​
​
function setOper(oper)
{
    preOper=true; //重置preOper值为true，表示点击了操作符
  if(curOper ="start") //若点击的是除了=号外的操作符，即=键还没点击
  {
  num1=0+form1.result.value; //显示屏正常显示按键上的值
  curOper=oper;//重置当前运算符的值，等待用户的下一步操作
  }
  else //若点击的操作符恰好是=号，即=号键按下了
  {
  totalnumber(); //调用函数totalnumber()，开始计算
  curOper=oper; //重置当前运算符的值，其值为用户点击的+ ― * / 中是的某一个
  }
}
​
​
​
​
​
function backspace(){
       var o = document.getElementById('text11');  //定义o的赋值动态插入在id为txttest的(就是获取内容)\\\
​
   var v = o.value; //定义v的赋值是o.value
   v.length > 0 && (o.value = v.substr(0, v.length - 1));//这里的话就按照我这样的理解,就是当输入的内容的长度大于0的时候
       //并且定义你输入的内容赋值位txttest的动态插入的字符长度是从第一个到最后一个 substr(start,length)这个句子的套用
      if(v == "" || v == null || v == 0){
        alert("你删除个啥,告诉我怎么删除")
        return false;
      }
}
      
 
​
​
     </script>
​
     <!-----------------------
              --------------               
      -------------------
       -----------------
      -分割线----
      ---------------------------
      ----------------->
       
       <style type="text/css">
body{
   background-color: skyblue;
   position: absolute;
   top: 10px;
   left: 00px;
​
}
.numberbutton{
  border-radius: 10px;
   font-size: 30px;
   background-color:white;
   width: 75px;
   height: 65px;
   border: 0px;
   cursor: pointer;
   transition: color 1s linear;
    transition: background-color 1s linear;
    
​
    
}
.numberbutton:hover{ 
background-color:black;
color: white;
​
}
.numberbutton1{
  border-radius: 10px;
   font-size: 30px;
   background-color:white;
   width: 75px;
   height: 65px;
   border: 0px;
   cursor: pointer;
   transition: color 1s linear;
    transition: background-color 1s linear;
    
​
    
}
.numberbutton1:hover{ 
background-color:orange;
color: white;
​
}
​
.numberbutton2{
  border-radius: 10px;
   font-size: 30px;
   background-color:white;
   width: 75px;
   height: 65px;
   border: 0px;
   cursor: pointer;
   transition: color 1s linear;
    transition: background-color 1s linear;
    
​
    
}
.numberbutton2:hover{ 
background-color:pink;
color: white;
​
}
​
.numberbutton3{
  border-radius: 10px;
   font-size: 30px;
   background-color:white;
   width: 75px;
   height: 65px;
   border: 0px;
   cursor: pointer;
   transition: color 1s linear;
    transition: background-color 1s linear;
    
​
    
}
.numberbutton3:hover{ 
background-color:green;
color: white;
​
}
​
​
​
.numberbutton4{
  border-radius: 10px;
   font-size: 30px;
   background-color:white;
   width: 75px;
   height: 65px;
   border: 0px;
   cursor: pointer;
   transition: color 1s linear;
    transition: background-color 1s linear;
    
​
    
}
.numberbutton4:hover{ 
background-color:brown;
color: white;
​
}
​
​
​
​
#text11{ 
  font-size: 50px;
  font-weight: bold;
  width: 400px;
  height: 60px;
  border: 0px;
  border-radius: 10px;
  transition: color 1s linear;
  transition: background-color 3s linear;
}
#text11:hover{ 
  border: 0px;
  background-color: black;
  color: white;
​
​
}
h2{ 
  margin-top:300px;
​
}
#selecet1{ 
  border: 0px;
  background-color: skyblue;
  color: white;
  transition:background-color 1s linear;
}
#selecet1:hover{ 
  background-color: black;
​
}
</style>
 <!-----------------------
              --------------               
      -------------------
       -----------------
      -分割线----
      ---------------------------
      ----------------->
​
</head>
​
<body onload="beginState()">
    <form name="form1">
     <table>
      <tr>
     <td colspan="8"><input type="text" name="result"  size="40" id="text11"></td>
     <td><input type="button" name="" title="清除" value="C" onclick="cleartext()" class="numberbutton"></td>
     <td><img src="back.png" name="" title="退格" onclick="backspace()" class="numberbutton" /></td>
    </tr>
<tr>
 <td><input type="button" value="9" onclick="addnumber('9')" class="numberbutton"></td>
 <td><input type="button" value="8" onclick="addnumber('8')" class="numberbutton"></td>
 <td><input type="button" value="7" onclick="addnumber('7')" class="numberbutton"></td>
 <td><input type="button" name="" value="-" onclick="setOper('-')" class="numberbutton3"></td>
 <td><input type="button" value="x" onclick="setOper('x')" class="numberbutton1"></td>
​
​
 </tr>
<tr>
​
</tr>
 <tr>
 <td><input type="button" value="6" onclick="addnumber('6')" class="numberbutton"></td>
 <td><input type="button" value="5" onclick="addnumber('5')" class="numberbutton"></td>
 <td><input type="button" value="4" onclick="addnumber('4')" class="numberbutton"></td>
 <td><input type="button" value="+" onclick="setOper('+')" class="numberbutton4"></td>
 <td><input type="button" value="/" onclick="setOper('/')" class="numberbutton2"></td>
​
   </tr>
   <tr>
 <td><input type="button" value="3" onclick="addnumber('3')" class="numberbutton"></td>
 <td><input type="button" value="2" onclick="addnumber('2')" class="numberbutton"></td>
 <td><input type="button" value="1" onclick="addnumber('1')" class="numberbutton"></td>
 <td><input type="button" name=""  onclick="addnumber('0')" value="0" class="numberbutton"></td>
 <td><input type="button" name="" value="=" onclick="totalnumber()" class="numberbutton"></td>
​
 
     </tr>
</table></form>
 <!-----------------------
              --------------               
      -------------------
       -----------------
      -分割线----
      ---------------------------
      ----------------->
<h2>第二种实现计算器的方式</h2>
​
​
<form id="form2">
  <input type="text" placeholder="请输入数字" onclick="number1()" value="0" id="n1">
  <select  id="selecet1">
    <option onclick="total('+')">+</option>
    <option onclick="total('-')">-</option>
    <option onclick="total('*')">x</option>
    <option onclick="total('/')">/</option>
​
  </select>
   <input type="text" placeholder="请输入数字" onclick="number2()" value="0" id="n2">
   <input type="button" value="="  onclick="end()" >
   <input type="text" id="result1" size="20">
​
</form>
​
​
 <!-----------------------
              --------------               
      -------------------
       -----------------
      -分割线----
      ---------------------------
      ----------------->
<script>
  function number1(){
    form2.n1.value="";   //这个主要的目的是当用户点击文本框时,插入空值然后显示文本框的属性placeholder的文本来提示用户
    
  }
  function number2(){
    form2.n2.value="";  //原理同上
    
  }
  function end(){
​
var aa=form2.n1.value;   //获取第一个文本框的内容
var bb=form2.n2.value;   //获取第二个文本框的内容
 
var cc=form2.selecet1.value;   //获取结果的文本框
switch(cc){     //switch语句就是通过一个表达式进行不同的从句判断,在上面我定义了cc这个函数是下拉列表里面的值
  case "+":        //当下拉列表的内容是+号的时候,执行下面这些句子
  document.getElementById('result1').value=parseFloat(aa)+parseFloat(bb);
  break;
  case "-":             //原理同上
  document.getElementById('result1').value=parseFloat(aa)-parseFloat(bb);
  break;
  case "x":
  document.getElementById('result1').value=parseFloat(aa)*parseFloat(bb);
  break;
  case "/":
  document.getElementById('result1').value=parseFloat(aa)/parseFloat(bb);
  break;
}
  
  }
</script>
​
              
</body>
​
</html>
X

Report a Problem: