今天做了一个简单的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. UEFI Bootable USB Flash Drive - Create in Windows(WIN7 WIN8)

    How to Create a Bootable UEFI USB Flash Drive for Installing Windows 7, Windows 8, or Windows 8.1 In ...

  2. PMP考试

    今天是第二次PMP模拟考试,得了146分,比上次高25分,这次题目相对简单些,看来昨晚的复习没有白费,还是有效果的. 有些题目影响还是比较深刻,老外的项目管理思想是先规划好一切再执行(管理),比如信息 ...

  3. Database cannot be started in this edition of SQL Server" error when restoring a Microsoft Dynamics CRM database

    处理办法:http://support.microsoft.com/kb/2567984

  4. CRM 2013 限制Lookup

    var oTo = document.getElementById("customerid_i"); oTo.setAttribute("defaulttype" ...

  5. Windows Azure Storage 之 Retry Policy （用来处理短暂性错误-Transient Fault）

    在使用Windows Azure Storage Service 的时候, 通常会遇到各种各样的问题. 例如网络连接不稳定,导致请求没有发出去.删除一个Blob Container 之后又立刻创建同名 ...

  6. percona server 二进制安装下编译tpcc-mysql的坑

    出于习惯,percona server的部署都是通过二进制包自动化安装,结果遇到一个硕大无比的坑,编译TPCC-MySQL时出现警告 10:49:36 root@DB-Master:~/tpcc-my ...

  7. Asp.Net运行于32/64模式下的性能差异

    项目使用的是Oracle数据库,.Net使用Odac对数据库进行访问.在官方下载Odac时会让你选择是下载32位的还是64位的.这会直接影响到网站的运行模式.目前我们使用的是32位的,那么布署时,需要 ...

  8. 【GO】GO语言学习笔记四

    流程控制 1.条件语句 举个栗子: if x>5 { return 1; }else{ return 0; } 注意:  条件语句不需要使用括号将条件包含起来(); 无论语句体内有几条语句, ...

  9. Android的学习第六章(布局一TableLayout)

    今天我们来简单的说一下Android不居中的TableLayout布局(表格布局) 表格布局的意思就是将我们的布局看做为一个表格,主要用于对控件进行整齐排列 我们看一个简单的案例 <TableL ...

  10. 最常用的ES6特性

    遇到了要写出es6新特性的题目,所以查阅了资料来总结一下,点击查看原文. 进入正题,最常用的ES6特性有:let, const, class, extends, super, arrow functi ...