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

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

CSS+Javascript的更多相关文章

  1. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  2. Sublime Text插件：HTML+CSS+JAVASCRIPT+JSON快速格式化[转]

    今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...

  3. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  4. HTML+CSS+JAVASCRIPT 总结

    1. HTML 1: <!doctype html> 2: <!-- This is a test html for html, css, javascript --> 3: ...

  5. Umbraco（3） - CSS & Javascript（翻译文档）

    原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...

  6. 原创的基于HTML/CSS/JavaScript的层级目录树

    之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...

  7. MiniCodeEditor：只有168字节的在线Html/CSS/JavaScript编辑器

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:MiniCodeEditor:只有168字节的在线Html/CSS/JavaScript编辑器.

  8. CSS+Javascript的那些框架

    CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint  http://www.oschina.net/p/blueprintcss Ela ...

  9. 3 Ways to Preload Images with CSS, JavaScript, or Ajax---reference

    Preloading images is a great way to improve the user experience. When images are preloaded in the br ...

  10. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

随机推荐

  1. Spring学习笔记1——基础知识 （转）

    1.在java开发领域,Spring相对于EJB来说是一种轻量级的,非侵入性的Java开发框架,曾经有两本很畅销的书<Expert one-on-one J2EE Design and Deve ...

  2. Openstack的nova-network的vlan模式扩展

    openstack的nova-network的vlan模式是可以在安装的时候,将网络划分为多个子网,每个项目一个或者多个子网进行虚拟机创建.但是他现在代码级别上不支持:如果一开始安装的环境的vlan网 ...

  3. MySql SELECT INTO 记录为空的问题

    SELECT Id INTO @Id FROM GiftCode WHERE Status = 1 AND GiftId = #GiftId# ORDER BY Id ASC LIMIT 1;     ...

  4. Linux-wget

    Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP协 ...

  5. linux的mount（挂载）命令详解

    本文介绍mount命令的用法,以及技巧光盘镜像文件.移动硬盘及U盘的方法. 挂接命令(mount) 首先,介绍一下挂接(mount)命令的使用方法,mount命令参数非常多,这里主要讲一下今天我们要用 ...

  6. POJ-1028 Web Navigation 和TOJ 1196. Web Navigation

    Standard web browsers contain features to move backward and forward among the pages recently visited ...

  7. fenxi

    线路:通过定义而来(固定线路可以定义,随机和临时线路怎么来) 订单:线路上点对点的关系 装车单:同意线路上的车辆可以有多个订单组成的装车单 车辆任务:给调度接口输入车辆和订单集合,根据订单产生多个车的 ...

  8. apache代理服务器为nodejs服务设置域名

    本机以apache为主,其中 在httpd.conf中先设置 <VirtualHost *:80> ServerName nodejs.cc ServerAlias www.nodejs. ...

  9. python之禅

    >>> import this The Zen of Python, by Tim Peters Beautiful is better than ugly. Explicit is ...

  10. 使用Java-UrlConnection调用webService接口

    URL wsUrl = new URL("http://192.168.1.1:8080/webservice"); HttpURLConnection conn = (HttpU ...