CSS+Javascript

今天做了一个简单的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.最后结果是这样的:

其中最右侧的文字是滚动的。

posted @ 2016-04-18 14:30  非非是  阅读(205)  评论(0编辑  收藏  举报