样式

<!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. readme.md常用格式的编写

    md是Markdown的缩写,md是一种易读易写的文本格式(easy-to-read, easy-to-write plain text format),并且可以很方便的转换成HTML格式显示在网页中 ...

  2. poj 3744 矩阵快速幂+概率dp

    题目大意: 输入n,代表一位童子兵要穿过一条路,路上有些地方放着n个地雷(1<=n<=10).再输入p,代表这位童子兵非常好玩,走路一蹦一跳的.每次他在 i 位置有 p 的概率走一步到 i ...

  3. 线程池——Executors

    一 Executor框架 为了更好地控制多线程,JDK提供了一套线程框架Executor,帮助开发人员有效的进行线程控制.它们都在java.util.concurrent包中,是JDK并发包的核心.其 ...

  4. js实现复制|剪切指定内容到粘贴板--clipboard

    这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下.项目地址:https://github.com/zenorocha/clipboard ...

  5. python读取ini配置文件的示例代码(仅供参考)

    这篇文章主要介绍了python读取ini配置文件过程示范,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 安装 pip install configp ...

  6. JQuery 浮动DIV显示提示信息并自动隐藏

    /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @p ...

  7. spring data jpa 配置文件

    <?xml version="1.0" encoding="UTF-8"?><persistence xmlns="http://j ...

  8. apue 第18章 终端I/O

    终端I/O有两种不同的工作模式: (1)规范模式:输入以行单位进行处理,每个读请求也最多返回一行. (2)非规范模式:输入字符不装配成行. 终端设备是由通常位于内核中的终端驱动程序控制的.每个终端设备 ...

  9. STM32嵌入式开发学习笔记（五）：中断

    我们过去了解了用循环实现延时,或用系统滴答计时器实现延时,但这两种方法都有一种问题:会阻塞处理器的运行.下面我们学习一种不阻塞处理器运行其他事件的功能:时钟中断. 所谓中断,就是让处理器放下手头的事情 ...

  10. Machine Learning 之二，什么监督性学习，非监督性学习。

    1.什么是监督性学习?Supervised  Machine Learning. 在监督性学习,我们给定一个数据集以及我们已经知道正确输出的结果,然后找到一个输入和输出的关系. In Supervis ...