准备:
前期准备:安装配置oracle(可在我博客中找到安装oracle 以及配置的文章);
创建项目adminsystem;
搭建tomcat服务器;
导入项目所需要的jar包,将jar包放入web-inf下的lib文件夹;
第一篇主要讲:html+css布局技术:
本项目的web.xml文件是一键生成的;
第一个jsp页面:
在webcontent下新建一个jsp file;
输入名字index.jsp;
选择字符格式:点开右下角的JSP Templates;
在jsp Files中将修改Encoding为utf-8格式;
创建出第一个jsp页面;
代码如下:
/简易坦克/
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
hello world
<div id="tank"></div>
<!--
<div class="a"></div>
<div class="a"></div>
-->
<script src="js/zquery.1.0.0.js"></script>
<script src="js/index.js"></script>
</body>
</html>
优化jsp:
在webcontent下新建两个文件夹:css,js;
在css下新建file:index.css,后缀名为css;
在js下新建file:index.js & zquery.1.0.0.js,后缀名为js;
index.css代码:
body{
color:red;
}
#tank{
width:100px;
height:100px;
/* background:red; */
border:1px solid red;
position:absolute;
}
.a{
width:100px;
height:100px;
background:red;
margin-bottom:5px;
}
index.js代码:
var User = function(username,password){
this.username = username;
this.password = password;
this.login = function(){
console.log(this.username+"has logined!");
}
}
//var xiaoming = new User("xiaoming","666666");
//xiaoming.login();
//var xiaohong = {username:"xiaohong",password:"666",login:function()
//{console.log(this.username+"has logined!")}}
//xiaohong.login();
//function run(){
// console.log("123");
//}
//run();
//??????
//var tank = document.getElementById("tank");
var tank = $("#tank");
var run1=function(){
// console.log("321");
//interval 间隔2000运动跑
window.setInterval(function(){
tank.style.left = tank.offsetLeft+100+"px";
}, 50)
}
/**
* 触发事件
*/
tank.onclick = function(){
run1();
//alert("321");
}
//run1();
zquery.1.0.0.js代码:
var $ = function(element){
var ele;
if(element.indexOf("#")!=-1) //包含#
//substring 截取 如112233 截取掉#
lel=document.getElementById(element.substring(1));
return lel;
}