【JavaScript脚本】——T2事件操作

【JavaScript脚本】——T2事件操作

自定义函数

function 函数名 ( 参数1,参数2){undefined

        执行语句

}

      function fun(obj){
         return obj;
      }
  
 

函数的使用

可以通过调用函数名称的方式直接使用函数：

      <script>
         function max(x, y) {
             if (x > y) {
                 return x;
              } else {
                 return y;
              }
          }
         document.write(max(10, 20));
      </script>
  
 

系统函数

格式化parseInt()与parseFloat()函数

      <script>
         var num = 12345;
         document.write(num % 10);
         document.write("<br/>");
         document.write(num / 10 % 10);
         document.write("<br/>");
         document.write(num / 100 % 10);
         document.write("<br/>");
         document.write(num / 1000 % 10);
         document.write("<br/>");
         document.write(num / 10000);
         document.write("<hr/>");
         var num1 = parseInt(12345);
         document.write(parseInt(num1) % 10);
         document.write("<br/>");
         document.write(parseInt(num1 / 10) % 10);
         document.write("<br/>");
         document.write(parseInt(num1 / 100) % 10);
         document.write("<br/>");
         document.write(parseInt(num1 / 1000) % 10);
         document.write("<br/>");
         document.write(parseInt(num1 / 10000));
      </script>
  
 

      var num = "3.14f";
      //输出3.14
      document.write(parseFloat(num));
  
 

      var num = "f3.14f";
      //输出【NaN】
      document.write(parseFloat(num));
  
 

      var num = "123";
      //输出false
      document.write(isNaN(num));
  
 

eval() 函数

字符串公式计算

document.write(eval("5+6+11+99*12-7/3*66"));
 

JS计算器demo1、

一般计算方式:

      <p>
         <input type="text" id="x" placeholder="请输入X值:" />
      </p>
      <p>
         <input type="text" id="ysf" placeholder="请输入运算符:" />
      </p>
      <p>
         <input type="text" id="y" placeholder="请输入Y值:" />
      </p>
      <p>
         <input type="button" onclick="calc()" value="计算" />
      </p>
      <div id="show"></div>
      <script>
         function calc() {
             var x = document.getElementById("x").value;
             var ysf = document.getElementById("ysf").value;
             var y = document.getElementById("y").value;
             if (ysf == '+') {
                 document.getElementById("show").innerText = parseFloat(x) + parseFloat(y);
              } else if (ysf == '-') {
                 document.getElementById("show").innerText = parseFloat(x) - parseFloat(y);
              } else if (ysf == '*') {
                 document.getElementById("show").innerText = parseFloat(x) * parseFloat(y);
              } else if (ysf == '/') {
                 document.getElementById("show").innerText = parseFloat(x) / parseFloat(y);
              } else {
                 document.getElementById("show").innerText = "无此运算";
              }
          }
      </script>
  
 

JS计算器demo2、

eval() 计算方式:

      <p>
         <input type="text" id="x" placeholder="请输入X值:" />
      </p>
      <p>
         <input type="text" id="ysf" placeholder="请输入运算符:" />
      </p>
      <p>
         <input type="text" id="y" placeholder="请输入Y值:" />
      </p>
      <p>
         <input type="button" onclick="calc()" value="计算" />
      </p>
      <div id="show"></div>
      <script>
         function calc() {
             var x = document.getElementById("x").value;
             var ysf = document.getElementById("ysf").value;
             var y = document.getElementById("y").value;
             document.getElementById("show").innerText = eval(x + ysf + y);
          }
      </script>
  
 

事件：

onblur失去焦点事件:

      <p>
         <input type="text" id="x" placeholder="请输入X值:" onblur="REx(this)" />
      </p>
      <p>
         <input type="text" id="ysf" placeholder="请输入运算符:" onblur="REx(this)"
      </p>
      <p>
         <input type="text" id="y" placeholder="请输入Y值:" onblur="REx(this)" />
      </p>
      <p>
         <input type="button" onclick="calc()" value="计算" />
      </p>
      <div id="show"></div>
      <script>
         function calc() {
             var x = document.getElementById("x").value;
             var ysf = document.getElementById("ysf").value;
             var y = document.getElementById("y").value;
             document.getElementById("show").innerText = eval(x + ysf + y);
          }
         function REx(o) {
             if (o.value == "") {
                 alert("不能有空值");
              }
          }
      </script>
  
 

onchange值改变事件:

      <p>
         <select onchange="change(this)">
             <optgroup label="三原色">
                 <option value="red">红色</option>
                 <option value="yellow">黄色</option>
                 <option value="blue">蓝色</option>
                 <option value="some">杂色</option>
             </optgroup>
         </select>
      </p>
      <div id="show"></div>
      <script>
         function change(o) {
             var color = o.value;
             switch (color) {
                 case "red":
                     document.body.style.backgroundColor = "red";
                     break;
                 case "yellow":
                     document.body.style.backgroundColor = "yellow";
                     break;
                 case "blue":
                     document.body.style.backgroundColor = "blue";
                     break;
                 default:
                     document.body.style.backgroundColor = "#ffffff";
                     break;
              }
          }
      </script>
  
 

onSubmit事件:

主要用于校验数据

      <form onclick="test.html" onsubmit="chick(this)">
         <p>
             <input type="text" name="userName" placeholder="请输入用户名" />
         </p>
         <p>
             <input type="submit" value="提交" />
         </p>
      </form>
      <div id="show"></div>
      <script>
         function chick(obj) {
             alert('阻止提交数据' + obj.userName.value);
             return false;
          }
      </script>
  
 

思考与记忆：

select修改值时触发的事件名称是什么？

文章来源: laoshifu.blog.csdn.net，作者：红目香薰，版权归原作者所有，如需转载，请联系作者。

原文链接：laoshifu.blog.csdn.net/article/details/121463394