今天做了一个简单的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. url编码

    url编码 情况1:网址路径中包含汉字 打开IE,输入网址”http://zh.wikipedia.org/wiki/春节”.注意,”春节”这两个字此时是网址路径的一部分. 查看HTTP请求的头信息, ...

  2. 在Visual Studio 中开发自定义脚手架 Scaffolder

    1.官方简单教程 http://blogs.msdn.com/b/webdev/archive/2014/04/03/creating-a-custom-scaffolder-for-visual-s ...

  3. Used Query

    ---  查询 look back 6 days logic period_key. select s.store_id, i.upc, sf.period_key from JNJ_CASINO_H ...

  4. node上截取图片工具 images（node-images）

    我们经常会遇到服务器上传的图片进行裁剪或者增加logo等等一些操作,在node平台上该如何实现呢? 看到大家都在使用"gm"这个工具,功能很强大,但是在Windows平台上简直就是 ...

  5. Linq对XML的简单操作

    前两章介绍了关于Linq创建.解析SOAP格式的XML,在实际运用中,可能会对xml进行一些其它的操作,比如基础的增删该查,而操作对象首先需要获取对象,针对于DOM操作来说,Linq确实方便了不少,如 ...

  6. Eclipse断点调试方法

    1. 条件断点 断点大家都比较熟悉,在Eclipse Java 编辑区的行头双击就会得到一个断点,代码会运行到此处时停止. 条件断点,顾名思义就是一个有一定条件的断点,只有满足了用户设置的条件,代码才 ...

  7. Linux_用户级_常用命令（3）：mkdir

    Linux常用命令之mkdir 开篇语:懒是人类进步的源动力 本文原创,专为光荣之路公众号所有,欢迎转发,但转发请务必写出处! Linux常用命令第3集包含命令:mkdir (附赠tree命令,日期时 ...

  8. 基于ThinkPHP开发的PHPExcel导入

    首先,我们还是要导入PHPExcel类文件...至于怎么导入.可以参考我写的导出的那篇文章(http://www.cnblogs.com/hopelooking/p/6230303.html) 但是我 ...

  9. POJ 1459：Power Network（最大流）

    http://poj.org/problem?id=1459 题意:有np个发电站,nc个消费者,m条边,边有容量限制,发电站有产能上限,消费者有需求上限问最大流量. 思路:S和发电站相连,边权是产能 ...

  10. Spring+SpringMVC+MyBatis+LogBack+C3P0+Maven+Git小结（转）

    摘要 出于兴趣,想要搭建一个自己的小站点,目前正在积极的准备环境,利用Spring+SpringMVC+MyBatis+LogBack+C3P0+Maven+Git,这里总结下最近遇到的一些问题及解决 ...