实验二 Java web基础二--web

一、实验目的
理解和巩固课堂上所学的JavaScript知识，提高学生对知识的实际运用与软件编程实现能力。
二、实验内容
编写一个Web程序，实现以下两种功能。
功能1：简单的计算器，实现对两个数的加、减、乘、除功能。输入两个数字和运算符号，当点击Button的时候，显示结果。
功能2：实现一个时钟。（也可以是倒计时）
三、实验要求

文件名字不要使用中文，文件名字首字母小写。2. 第一个文件命名为为index.html。3. 所有文件打成一个文件压缩包提交。压缩包文件命名规则：计181-01-姓名。

//index.html

<!DOCTYPE html>
<html>
  <head>
    <title>实验二</title>
 <script language="javaScript">
 function button()
    {
     
     
    return confirm("真的要访问此链接吗？");
    }
 function openwindow()
 {
     
     
    str=window.open("time.html","smallwindow","toolbar=no,left=200,top=500,menubar=no,width=200,height=200");
    return str;
 }
 </script>
  </head>
  <body>
    <h1>简单计算器</h1>
      <a href="calculator.html" onclick="return button()">calculator示例</a>
    <h2>时钟</h2>
      <input type="button" value="ShowTime" onClick="hhh=openwindow();"/>
      <input type="button" value="closeTime" onClick="hhh.close();"/>
  </body>
</html>

//calcilator.html

<html>
  <head>
    <title>简单计算器</title>
 <script language="javaScript">
 function jisuan(f)
 {
     
     
   var str1=xpp.num1.value;
   if(isNaN(str1)){
     
     
      alert("请输入数字！");
      xpp.num1.value="";
      xpp.num1.focus();
      return;
     }
   
   var str2=xpp.num2.value;
    if(isNaN(str2)){
     
     
      alert("请输入数字！");
      xpp.num2.value="";
      xpp.num2.focus();
      return;
     } 
   
   switch(f)
   {
     
     
     case"+":result=parseInt(str1)+parseInt(str2);break;
     case"-":result=str1-str2;break;
     case"*":result=str1*str2;break;
     case"/": if(str2!=0) {
     
     result=str1/str2;break;}
              else{
     
     break;}
    }
    xpp.result.value=result;
 }
 </script>
  </head>
  <body>
   <form name="xpp">
     <h1>计算两个数的运算结果</h1>
        请输入第一个数：<input type="text" name=num1><br>
        请输入第二个数：<input type="text" name=num2 ><br>
        请选择运算符计算结果：<br>
     <input type="button" value="+" onClick="jisuan('+')">
     <input type="button" value="-" onClick="jisuan('-')">
     <input type="button" value="*" onClick="jisuan('*')">
  <input type="button" value="/" onClick="jisuan('/')"><br>
  计算结果：<input type="text" name="result" >
 </form>
  </body>
</html>

//time.html

<!DOCTYPE html>
<html>
  <head>
    <title>时钟</title>
 <script language="javaScript">
 function showTime()
 {
     
     
    var Timer=new Date();
    var h=Timer.getHours();
    var min=Timer.getMinutes();
    var s=Timer.getSeconds();
    var d=Timer.getDate();
       var m=Timer.getMonth()+1; 
    var y=Timer.getYear()+1900;  
    var strShow=""+y+"-"+m+"-"+d+"  "+h+":"+min+":"+s;
    myspan.innerText=strShow;
    setTimeout("showTime()",1000);
 }
 </script>
  </head>
  <body>
    <h1><font color="green" size="20pt">北京时间</font></h1>
    <span id="myspan"></span>
    <script>showTime();</script>
  </body>
</html>

おすすめ