样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Insert title here</title>

<style type="text/css">

.c1{color:red;border:5px solid purple;}

</style>

<script type="text/javascript">

function addStyle(){

    var ob=document.getElementById('div1');

    ob.style.border="1px solid red";//div1，加边框

    ob.style.height="100px";

    ob.style.backgroundColor="#abcdef";

}

function addClass(){

    var ob=document.getElementById('div1');

    ob.className="c1";

}

</script>

</head>

<body>

<div id="div1">abc</div>

<input onclick="addStyle();" type="button" value="增加行内样式"/>

<input onclick="addClass();" type="button" value="增加类别样式"/>

</body>

</html>

滚动标题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>今天天气很好，两会马上召开了，邀请了何老师，李老师，邀请王老师，王老师没有去。</title>

<script type="text/javascript">

var start=0;

var t="今天天气很好，两会马上召开了，邀请了何老师，李老师，邀请王老师，王老师没有去。今天天气很好，两会马上召开了，邀请了何老师，李老师，邀请王老师，王老师没有去。";

function showTitle(){

    //每次切去一个字，并显示在title中

    start++;

    if(start==t.length/2){

        start=0;

    }

    var str=t.substr(start);

    document.title=str;

}

</script>

</head>

<body>

</body>

</html>

<script type="text/javascript">

setInterval(showTitle,250);

</script>

对联广告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Insert title here</title>

<style type="text/css">

*{padding:0;margin:0;}

.content{width:800px;height:100px;margin:0 auto;}

#advL,#advR{top:0;position:absolute;border:5px solid orange;width:75px;font-size:50px;text-align:center;padding:20px 0;}

#advL{left:5px;}

#advR{right:5px;}

</style>

</head>

<body>

<div id="advL">天<br/>王<br/>盖<br/>地<br/>虎</div>

<div id="advR">小<br/>鸡<br/>炖<br/>蘑<br/>菇</div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

<div class="content" style="background:#ccc;"></div>

<div class="content" style="background:#abc;"></div>

</body>

</html>

<script type="text/javascript">

window.onscroll=function(){

    //滚动条滚动的距离

    var T=document.body.scrollTop+document.documentElement.scrollTop;

    //让advL advR和滚动条一起动。

    var obL=document.getElementById("advL");

    var obR=document.getElementById("advR");

    obL.style.top=T+"px";

    obR.style.top=T+"px";

}

</script>

javascript基础总结之实例(一)的更多相关文章

  1. javascript基础总结之实例(二)

    div的显示和隐藏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  3. 一步步学习javascript基础篇（3）：Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  4. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  5. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  6. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  7. Javascript基础知识总结一

    Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  8. javascript基础部分

    javascript基础部分 1  数据类型: 基础数据类型(通过typeof来检测):Number,string,undefined,null,boolean,function typeof只能检测 ...

  9. 一个简单的、面向对象的javascript基础框架

    如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...

随机推荐

  1. 转帖 eclipse Web项目WebContent目录修改

    最近在做Web 项目时,新建了一个WEB 项目,如webdemo,eclipse默认的build路径为build,WEB-INF存放于WebContent下面,今改了一个build路径和WebCont ...

  2. nodejs模块——fs模块 使用fs.read读文件

    使用fs.read读文件 fs.read() 先介绍fs.open. fs.open(path,flags,[mode],callback)方法用于打开文件,以便fs.read()读取. 参数说明: ...

  3. Delphi QueryPerformanceCounter、QueryPerformanceFrequency函数，精确定时到ns

    var t1,t2:int64; r1,r2,r3:double; begin QueryPerformanceFrequency(c1);//WINDOWS API 返回计数频率 (Intel86: ...

  4. 微信小程序截取字符串

    我这里用的 str.substring(star,end)第一个参数代表开始位置,第二个参数代表结束位置的下一个位置;若参数值为负数,则将该值转为0;两个参数中,取较小值作为开始位置,截取出来的字符串 ...

  5. action通信机制

    当service通信不能很好的完成任务时候, actionlib则可以比较适合实现长时间的通信过程, actionlib通信过程可以随时被查看过程进度, 也可以终止请求, 这样的一个特性, 使得它在一 ...

  6. iptables对请求的URL作IP访问控制

    服务器运行环境是Tomcat,现在要实现的目的是,只允许特定的IP访问某个目录,一种方法是在tomcat配置文件server.conf中,使用RemoteAddrValve对虚拟主机做访问控制.另外一 ...

  7. 【前端控件】JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

  8. jQuery 封装的ajax

    jquery封装的ajax 具体操作: $.get(url  [,data]  [,fn回调函数]   [, dataType]); data:给服务器传递的数据,请求字符串 .json对象 都可以设 ...

  9. AWT Button类

    按钮是一个控制组件,按下时有一个标签,并生成一个事件.当按钮被按下和释放,AWT发送ActionEvent的一个实例的按钮,通过调用按钮上的processEvent.按钮的processEvent方法 ...

  10. 20140719 找到单链表的倒数第K个节点 判断一个链表是否成为一个环形 反转

    1.找到单链表的倒数第K个节点 2.判断一个单链表对否形成环形 3.单链表翻转