javascript案例

  

1、直接可以写在HTML文件中

    1)Javascript书写的代码和位置，一般情况下代码写在head中间

    2)直接写在body标签中

    3)可以写在<HTML>标记之外

 

  2、可以使用外部文件引入的方式

  

  3、弱类型语法

 

  4、+运算符

                  可以根据运算符的表达式自动处理

    1)如果表达式有任意一个字符串,"+"则变成 "字符串";

2)如果说两个表达式都是数字,"+"则变成表达式;

 

  案例：

 

①    加减乘除

   <body>

    <script type="text/javascript">

   function checkNum(num){           

              return isNaN(num);

}

function fun1(){ 

a=parseInt(document.getElementById("num1").value);

b=parseInt(document.getElementById("num2").value);

 if(checkNum(a)||checkNum(b)){

       alert("输入错了");

}else{

document.getElementById("num3").value=a+b;      

}

}

 

function fun2(){   

       a=document.getElementById("num1").value;

       b=document.getElementById("num2").value; 

       if(checkNum(a)||checkNum(b)){

              alert("输入错了");

       }else{

       document.getElementById("num3").value=a-b;

       }

       }

function fun3(){

    

       a=document.getElementById("num1").value;

       b=document.getElementById("num2").value;

 

       if(checkNum(a)||checkNum(b)){

              alert("输入错了");

       }else{

       document.getElementById("num3").value=a*b;      

       }

       }

 

function fun4(){

  

       a=document.getElementById("num1").value;

       b=document.getElementById("num2").value;

 

       if(checkNum(a)||checkNum(b)){

              alert("输入错了");

       }else{

       document.getElementById("num3").value=a/b;

       }

       }

 

</script>

 

 

  <form method="post">

  num1:<input type="text" name="num1"><br>

  num2:<input type="text" name="num2"><br>

      结果:<input type="text" name="num3"><br>

  <input type="button" name="jia" value="+" onclick="fun1();">

  <input type="button" name="jian" value="-" onclick="fun2();">

  <input type="button" name="cheng" value="*" onclick="fun3();">

  <input type="button" name="chu" value="÷" onclick="fun4();">

 

  </form>

  </body>

 

 

②    简易计算器：

<script type="text/javascript">

 

 var clear=false;

   function jisuan(num){ 

        var number=document.getElementById("result");

         

        if(clear){  

               number.value="";

               clear=false;

               }  

         number.value+=num;

         }

        

  function result(){

       

         var number=document.getElementById("result");

         number.value=number.value+"="+eval(number.value);

          clear=true;

        }  

 

</script>

 

<body>

<table width="228" border="1" align="center">

<caption>简易计算器</caption>

  <tr>

    <td colspan="4"><input type="text" size="36" name="result"></td>

  </tr>

  <tr>

    <td width="51"><input type="button" value="    1    " size="20" onclick="jisuan(1);"></td>

    <td width="51"><input type="button" value="    2    " size="20" onclick="jisuan(2);" /></td>

    <td width="51"><input type="button" value="    3    " size="20" onclick="jisuan(3);" /></td>

    <td width="51"><input type="button" value="    +    " size="20" onclick="jisuan('+');" /></td>

  </tr>

  <tr>

    <td><input type="button" value="    4    " size="20" onclick="jisuan(4);" /></td>

    <td><input type="button" value="    5    " size="20" onclick="jisuan(5);" /></td>

    <td><input type="button" value="    6    " size="20" onclick="jisuan(6);" /></td>

    <td><input type="button" value="    -    " size="20" onclick="jisuan('-');" /></td>

  </tr>

  <tr>

    <td><input type="button" value="    7    " size="20" onclick="jisuan(7);" /></td>

    <td><input type="button" value="    8    " size="20" onclick="jisuan(8);" /></td>

    <td><input type="button" value="    9    " size="20" onclick="jisuan(9);" /></td>

    <td><input type="button" value="    *    " size="20" onclick="jisuan('*');" /></td>

  </tr>

  <tr>

    <td><input type="button" value="    0    " size="20" onclick="jisuan(0);" /></td>

    <td><input type="button" value="    .    " size="20" onclick="jisuan('.');" /></td>

    <td><input type="button" value="    =    " size="20" onclick="result();" /></td>

    <td><input type="button" value="    /    " size="20" onclick="jisuan('/');" /></td>

  </tr>

</table>

 

</body>

 

③    比较大小

   <body>

 

   <form method="post">

 

  <input type="hidden" name="rand" id="rand" value="<?php echo rand(50,800);?>">

 

 

  </form>

 

 

  <script type="text/javascript">

 

 

   var b=document.getElementById("rand").value;

  

 

  for(var i=9;i>-1;i--){

 

 

  var a=prompt("请输入数字","");

 

  if(b<a){

         document.write("您输入的数字"+a+"大了!您还有"+i+"次机会<br>");

         }

   else if(b>a){

          document.write("您输入的数字"+a+"小了!您还有"+i+"次机会<br>");          

          }

       else{

         document.write("您输入的数字"+a+"恭喜您答对了....!<br>");

          break;

          }  

         

  }

 

</script>

 

 

</body>