标签：
今天做了一个简单的CSS和Javascript的调用，发现CSS和Javascript系统的来写还真是蛮方便的。
1.先建一个CSS文件和一个JS文件
2.在jsp中调用
<link type="text/css" rel="stylesheet" media="all" href="css1.css" /> <script type="text/javascript" src="js1.js" ></script>
这两句是调用代码，我的jsp完整代码是这样的：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>CSS学习</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link type="text/css" rel="stylesheet" media="all" href="css1.css" />
<script type="text/javascript" src="js1.js" ></script>
</head>
<body>
<div id="ding">
<div id="ding1">
<img id=obj src =arr[curIndex] border =0>
<input type="button" onclick="b()">
</div>
<div id="demo">
<div id="demo1">
<a href="#">伫立 在窗边 凝视 人来人往 飘散的发丝带着微雨</a><br>
<a href="#">似乎 它也在期待</a><br>
<a href="#">期待他的出现</a><br>
<a href="#">天空飘着幸福的微雨</a><br>
<a href="#">空气散发幸福的气息</a><br>
<a href="#">她的脸上 堆满幸福的期待</a><br>
<a href="#">雨无声无息地下着</a><br>
<a href="#">雨丝变成了雨滴</a><br>
<a href="#">慢慢地 地面有了停留的雨水</a><br>
<a href="#">她的他 却始终没有出现</a><br>
<a href="#">她的脸湿了</a><br>
<a href="#">她对自己说 那不是泪</a><br>
<a href="#">只是被雨打湿了</a><br>
<a href="#">她记得</a><br>
<a href="#">记得他陪她一起淋雨</a><br>
<a href="#">记得他陪她看过的日出日落</a><br>
<a href="#">现在 陪着她的</a><br>
<a href="#">只有无声的雨</a><br>
<a href="#">雨滴打在她的脸上</a><br>
<a href="#">凉凉的 很冷 很冷</a><br>
</div>
<div id="demo2"></div>
</div>
<script>
var speed=40
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
</script>
</div>
</body>
</html>
3.CSS文件中写div的style：
@CHARSET "UTF-8";
body {
background-color:#EECBAD;
}
#ding{
background-color:#F5F5F5;
width: 70%;
height: 300px;
margin-left:200px;
margin-top:100px;
text-align:center;
position:relative;
}
#ding1{
float:left;
width: 30%;
height: 300px;
}
#demo{
float:right;
overflow:hidden;
height:132px;
width:30%;
border:1px solid #dde5bc;
margin-left:300px;
}
4.JS文件中写函数：
var curIndex=0;
//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。
var timeInterval=1000;
var arr=new Array();
arr[0]="images/book3.jpg";
arr[1]="images/book1.jpg";
setInterval(changeImg,timeInterval);
function changeImg()
{
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}
function b(){
alert("bbbbbbb");
}
today=new Date();
function initArray(){
this.length=initArray.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments[i] }
var d=new initArray(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六");
document.write(
"<font color=#333 style=‘font-size:9pt;font-family: 宋体‘> ",
today.getFullYear(),"年",
today.getMonth()+1,"月",
today.getDate(),"日",
d[today.getDay()+1],
"</font>" );
5.最后结果是这样的：
其中最右侧的文字是滚动的。
标签：
原文地址：http://www.cnblogs.com/feifeishi/p/5404371.html
