今天做了一个简单的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. web app响应式字体设置！rem之我见

    之前做沙漠教育的时候,直接以设计图为准,然后强暴式,缩放处理.简单.直接,粗暴!但是,开发快.……一劳永逸! 但那是,现在开发,作为业界良心:是不能那么做的!(那个是被逼的啊 首先看代码: @medi ...

  2. PL/SQL Developer主数据库连接和窗口连接切换

    Oracle开发者估计对PL/SQL Developer都非常熟悉了,里面有些小的功能点大概还有些初学者没发现.PL/SQL Developer支持多连接多窗口,下面详细说说. 主连接的概念 打开PL ...

  3. 【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用

    这几天看书看到这几个属性做几个笔记 parentNode:顾名思义,就是获取某元素的父元素等同于jq的parent(). *注意一下,在调用parentNode 方法的时候 调用的对象必须是用ID 或 ...

  4. HTML、JavaScript之单双引号转义

    一.HTML : 双引号:" 单引号:&apos; 二.JavaScript: 双引号:\" 单引号:\'

  5. 不安装oracle客户端，用plsql连接oracle

    常用的Oracle开发的工具有SQL Developer和PL/SQL Developer,个人感觉前者虽然跨平台性优于后者,但比较大(大于300M)占用资源,而且用户体验也一般,而后者相对就小很多( ...

  6. Java泛型详解 转载

    转载地址:http://blog.csdn.net/jinuxwu/article/details/6771121 比较好的讲解: http://blog.csdn.net/lonelyroamer/ ...

  7. Graphics平移缩放旋转(转载)+点睛

    点睛:可以进行多次旋转和平移,也就是平移以后再平移,旋转以后再旋转,有时候一次达不到要求,如果你想一次调整完美的话很麻烦,所以最好多次,上代码 private void btnTranslate_Cl ...

  8. 获取WOED和EXCEL的公用方法

    1. 需要传入word地址 /// <summary> /// 获取WORD内容 /// </summary> /// <param name="docFile ...

  9. 分页sql优化

    如果分页sql里包含排序: select * from (...order by id) where rownum <=20 因为要排序,所以即使是分页只取20条,执行计划还是要把所有满足条件的 ...

  10. PHP优化笔记

    1.指定display_function内容,用来禁用危险参数 2.指定display_errors = Off 来关闭错误显示 3.这个和上一条有因果关系,关闭了错误前台显示,但是要记录错误信息就必 ...