Day1-JS-运用函数的简单实例

2024-02-08 21:13:28

一、简单计算器

①效果：

②知识点：　　

　　　　1、通过getFirstNumber（）和 getTwiceNumber（）这两个函数来得到input中输入的

　　　　　　具体就是通过，对input进行id标记了之后，通过 document.getElementById("first/twice).value

　　　　　　来得到用户输入的值，然后通过return 返回给各个加减乘除函数的

function getFirstNumber() {
  var firstNumber = document.getElementById("first").value;
  return firstNumber;
}

　　　　2、每一个加减乘除函数都要把结果显示出来，就要用到document.getElementById("result").innerHTML=re;

　　　　　　所以为了减少代码行，就吧这个功能也变成了一个函数（sendResult（））

function sendResult(result_1) {
  var num = document.getElementById("result")
  num.innerHTML = result_1;
}

　　　　3、通过&nbsp来给 html中的四个按钮进行隔开（空格）

　　　　4、由于在表格后面要显示result，开始的时候仅仅是

 <tr>
    <td colspan="2" rowspan="2">
      <p id="result"></p>
    </td>
  </tr>

内容是空的，所以开始的时候最后的那个方框是不会显示出来的，

只有在后面给这个id=“result” 通过innerHTML传值了之后才会吧表格显示并且吧值也显示了

③完整代码

JS代码

<script>
        var result_1;
//加法
function add() {
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re =Number( a) +Number( b);
  sendResult(re);
}

//减法
function subtract() {
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re = a - b;
  sendResult(re);
}

//乘法
function ride() {
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re = a * b;
  sendResult(re);
}

//除法
function devide() {
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re = a / b;
  sendResult(re);
}

//给p标签传值
function sendResult(result_1) {
  var num = document.getElementById("result")
  num.innerHTML = result_1;
}

//获取第一位数字
function getFirstNumber() {
  var firstNumber = document.getElementById("first").value;
  return firstNumber;
}

//获取第二位数字
function getTwiceNumber() {
  var twiceNumber = document.getElementById("twice").value;
  return twiceNumber;
}
    </script>

<body>
    <p>简单计算器:</p>
<table border="1" style="position:center;">
  <tr>
    <td>第一个数：</td>
    <td><input type="text" id="first"/></td>
  </tr>
  <tr>
    <td>第二个数：</td>
    <td><input type="text" id="twice"/></td>
  </tr>
  <tr>
    <td colspan="2" >
      &nbsp;
      <button style="width:inherit" onclick="add()">+</button>
      &nbsp;
      <button style="width:inherit" onclick="subtract()">-</button>
      &nbsp;
      <button style="width:inherit" onclick="ride()">*</button>
      &nbsp;
      <button style="width:inherit" onclick="devide()">/</button>
    </td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">
      <p id="result"></p>
    </td>
  </tr>
</table>
 
</body>

HTML代码

二、入门以上计算机

①效果图：

②知识点：

　　　　1、在HTML中，巧妙的用class和id，用于像用户输入0到9还有各种符号的，都可以设置统一的样式，只要可以显示在

　　　　　　屏幕上就行。

　　　　2、在HTML中，分别对结果的显示 id=“show” 还原id="clear" 和等于号id=“ok” 分别搞样式，其他的都是统一的修改样式的

　　　　3、在JS中（减少后面的代码，统一初始化了，其中的getElementsByClassName 就是为了上面统一设置的class=“td”做准备的，

　　　　　　　　　　为了给0到9和加减乘除等进行统一设置样式的

var oTd = document.getElementsByClassName("td");
var oK = document.getElementById("ok");
var oShow = document.getElementById("show");
var oClear = document.getElementById("clear");

　　　　4、没有对加减乘除单独的进行计算，而是把用户在显示屏中加入的变成一个字符串存到run中

var run = '';//全局变量 公式

·　　　　5、点击“=”的时候，通过对run这个字符串传入到已知函数 eval（str），这个函数就是可以对传入的字符串进行计算的

　　　　6、因为可能开始的时候显示屏中和run都是0，后面可能在得到一个数之后，还想要继续进行加减乘除的话，为了不要重新的输入

（也就是在按“=”之后还可以继续加减乘除然后再按“=”）

oK.onclick=function(){
  if(run!==""){
    oShow.innerHTML = eval(run);
  }
  if(oShow.innerHTML!=="0"){
    run = show.innerHTML;
  }
}

这个表示的就是，如果run不是一个空的字符串的话，声明要进行计算的，调用eval ；如果在显示屏中显示的结果不是0的话（说明至少按过

了一次“=”，这个时候就把run重新赋值为上一次的结果）

　　　　　7、还原函数的设计

oClear.onclick=function(){
  run = '';
  show.innerHTML = '0';
}

还原的话既要吧显示的结果变成0，也要把计算的字符串run 变成0的

　　　　　　8、对0到9和加减乘除等字符设置统一的样式

　　　　　　因为在开始的时候，通过

var oTd = document.getElementsByClassName("td");

　　　　　　获取了多个 class=td的元素，这个时候oTd其实是一个数组，里面有全部class=td的元素的，所以可以用数组的length来得到元素的个数

　　　　　　通过 oTd[i].index = i; 给每一个元素 “标记”

oTd[i].onclick=function(){
    //alert(oTd[this.index].innerHTML)
    run += oTd[this.index].innerHTML;
   oShow.innerHTML = run;
  };

　　　　　　这就是在每一个被标记的按钮被点击的时候，让run这个计算字符串尾部加上当前这个按钮所代表的符号

　　　　　　这里的 oTd[this.index].innerHTML 表示的就是td中写入的内容 + - * / 这些，既要吧run尾部进行加入，也要在结果框中显示用户加入的这个字符

③完整代码：

<body>
    <table>
        <tr>
            <td colspan="5" id="show">0</td>
        </tr>
        <tr>
            <td class="td" id="zero">0</td>
          <td class="td">.</td>
          <td id="last"><</td>
          <td id="clear" colspan="2">c</td>
        </tr>
        <tr>
            <td class="td">1</td>
          <td class="td">2</td>
          <td class="td">3</td>
          <td class="td">+</td>
          <td class="td">-</td>
        </tr>
        <tr>
            <td class="td">4</td>
          <td class="td">5</td>
          <td class="td">6</td>
          <td class="td">*</td>
          <td class="td">/</td>
        </tr>
        <tr>
            <td class="td">7</td>
          <td class="td">8</td>
          <td class="td">9</td>
          <td id="ok" colspan="2">=</td>
        </tr>
      </table>
</body>

HTML代码

    <script>
        var oTd = document.getElementsByClassName("td");
var oK = document.getElementById("ok");
var oShow = document.getElementById("show");
var oClear = document.getElementById("clear");
var run = '';//全局变量 公式

oK.onclick=function(){
  if(run!==""){
    oShow.innerHTML = eval(run);
  }
  if(oShow.innerHTML!=="0"){
    run = show.innerHTML;
  }
}

oClear.onclick=function(){
  run = '';
  show.innerHTML = '0';
}

for(var i = 0;i<=oTd.length;i++){
  oTd[i].index = i;
  oTd[i].onclick=function(){
    //alert(oTd[this.index].innerHTML)
    run += oTd[this.index].innerHTML;
   oShow.innerHTML = run;
  };
}
    </script>

JS代码

    <style>
        table,tr,td{
  border:1px solid blue;  
}
#ok,.td,#clear,#last{
  text-align:center;
}

    </style>

css代码

码农公寓

相关文章