今天做了一个简单的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. （一）sql入门 导读

    从转行做软件始,就开始接触sql,但还是不怎么深入,回忆3月份找工作的时候,左关联都没有写出来,真是丢脸,以此博客做个认真的开始. 以后的日子,遇到了圆柱体的空心物体,我就应该联想到一样东西,那就是数 ...

  2. CEGUI环境配置

    由于最近项目需要CEGUI做界面,于是我去下载了CEGUI源码,但是却不知道怎么搭建.网上的教程都不是很详细,不能让我们这种新手理解,经过几天折腾,终于弄好了,特此记录下来. 1.下载官网CEGUI源 ...

  3. WCF、Net remoting、Web service概念及区别

    Windows通信基础(Windows Communication Foundation,WCF)是基于Windows平台下开发和部署服务的软件开发包(Software Development Kit ...

  4. python之计算器（第四天）

    作业: 使用正则表达式和递归实现计算器功能. 实现: 1.实现带括号的计算 2.实现指数.加减乘除求余等功能 一.实例说明: 本实例自己写了个版本,但依旧存在一点bug,例:-2-2等计算问题,故最后 ...

  5. win7 ins 30131 oracle 12c

    Cause - Failed to access the temporary location. Action - Ensure that the current user has required ...

  6. maven 打war包tomcat服务器乱码问题

    今天用maven3的命令打war包,命令是mvn clean package -Dmaven.test.skip=true,打包后放在tomcat跑起来后发现tomcat的日志出现乱码. 后来在pom ...

  7. [linux系统]--crontab定时任务

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  8. 学生信息管理系统（cocos2d引擎）——数据结构课程设计

    老师手把手教了两天半,看了一下模式,加了几个功能就大功告成了!!! 给我的感想就是全都是指针! 添加图片精灵: CCSprite*  spBG = CCSprite::create("&qu ...

  9. 菜鸟学Android编程——简单计算器《一》

    菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...

  10. SAML 2.0 setup steps, 效果图

    Steps of setting up SAML SSO. 效果图 # Registry a Identity Provider services in:(Might need purchase) I ...