赞
踩
1、熟悉 MyEclipse 开发环境,掌握创建、部署和运行 Java Web 项目的步骤。
2、了解 HTML、CSS 和 JavaScript 的基本语法。
3、掌握 JSP 页面的创建方法、基本语法和执行过程。
1、使用 MyEclipse 创建 Web 工程【Web Project】。
2、编写静态页面【now.html】和动态页面【now.jsp】,分别以 JavaScript 和 Java 两种方式获
得当前时间,并呈现于页面中。
3、部署工程到 MyEclipse 內建的 Tomcat 并启动 Tomcat。
4、用浏览器访问上述页面
1、启动 MyEclipse Professional 2014。
2、新建 Web 工程:File → New → Web Project。
3、新建 HTML 文件:在【WebRoot】上单击右键 → New → File
4、编辑【now.html】并保存
<html> <head> <title>走动的时间(HTML版)</title> <!-- 页面的CSS样式放在style标签中 --> <style type="text/css"> .nowDiv { /* class选择器,对页面中所有class属性包含nowDiv的元素生效 */ font-size: 32px; /* 字号 */ } #nowSpan { /* id选择器,对页面中id属性为nowSpan的那个元素生效 */ color: #ff0000; /* 前景色 */ border-bottom: 2px dotted blue; /* 下边框(粗细、样式、颜色) */ } </style> <!-- 页面的JavaScript代码放在script标签中 --> <script type="text/javascript"> function setNow() { /* 修改span元素的内容 */ var now = new Date(); // 得到系统(浏览器所在机器)当前时间 var h = now.getHours(); // 时、分、秒 var m = now.getMinutes(); var s = now.getSeconds(); h = h < 10 ? ("0" + h) : h; // 时、分、秒若不够两位,则加前导零 m = m < 10 ? ("0" + m) : m; s = s < 10 ? ("0" + s) : s; // 根据id得到页面元素对象 var nowSpan = document.getElementById("nowSpan"); nowSpan.innerHTML = h + ":" + m + ":" + s; // 修改元素的内容 } function start() { setInterval(setNow, 1000); // 每过1秒调用一次上面的函数 } </script> </head> <body onload="start()"> <!-- 页面从服务器下载完毕后执行上面的start函数 --> <div class="nowDiv"> 现在时间是: <span id="nowSpan">N/A</span> </div> </body> </html>
5、新建 JSP 文件:在【WebRoot】上单击右键 → New → File。
6、编辑【now.jsp】并保存。
<!-- JSP页面的首行,pageEncoding属性指定了页面的编码 --> <%@ page language="java" pageEncoding="UTF-8"%> <!-- 导入本页面需要的Java类 --> <%@ page import="java.util.Date"%> <%@ page import="java.text.SimpleDateFormat"%> <html> <head> <title>走动的时间(JSP版)</title> <style type="text/css"> .nowDiv { font-size: 32px; } #nowSpan { color: #ff0000; border-bottom: 2px dotted blue; } </style> <script type="text/javascript"> reload(); // 页面加载完毕后立即调用下面的reload函数 function reload() { setTimeout(function() { window.location.reload(); // 重新向服务器请求当前页面(相当于浏览器的F5刷新) }, 1000); } </script> </head> <body> <div class="nowDiv"> 现在时间是: <span id="nowSpan"> <% SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss"); out.print(sdf.format(new Date())); // 取得系统(服务器所在机器)当前时间 %> </span> </div> </body> </html>
6、部署项目,并启动 Tomcat。
7、打开浏览器,分别访问【http://localhost:8080/WebProject/now.html】、
【http://localhost:8080/WebProject/now.jsp】,测试功能是否正确。
内部浏览器测试now.jsp
外部浏览器测试now.html
通过本节网页时间的设计实验,我学会了myeclipse,jdk,Tomcat配置安装;以及HTML、CSS 和 JavaScript 的基本语法;掌握 了JSP 页面的创建方法、基本语法和执行过程;实验中遇到了部署成功但查询不到网页的情况,最后了解到工程项目名称最好不要加空格,容易造成路径不明确。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。