样式

<!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. model字段对象和forms字段对象的区别和联系

    一.model字段对象 (一)_meta _meta是django.db.models.options.Options的实例,获取字段对象可通过模型类来进行获取,而_meta可提供如下功能: 获取模型 ...

  2. Django之template操作

    一.模板渲染的原理 (一)使用 模板渲染首先有一个模板对象Template,然后有一个上下文对象Context,通过render方法进行渲染,最后返回字符串,render方法的本质还是调用了HttpR ...

  3. ORM与JPA规范

    一.ORM框架 1.ORM简单介绍 对象关系映射,(Object Relational Mapping,简称ORM),是通过使用描述对象和数据库之间的映射的元数据,将面向对象语言程序中的对象自动持久化 ...

  4. 批量修改root密码

    公司有五十多台服务器.每台服务器中使用的密码完全不同,同时操作系统也不一样,centos5,6,7 .ubuntu,windows都有,更不用提其中各种小版本. root密码定期更改是一个大问题(wi ...

  5. centos7 nodejs二进制安装

    1.安装文件下载 1.下载地址:http://nodejs.cn/download/ 2.选择一个合适的版本下载 2.安装步骤 1.将安装包上传到指定位置(我习惯放到:/usr/local/appli ...

  6. 安卓Unity3d游戏的逆向破解

    使用到的工具 ApkToolBox .NET Reflector Reflexil(.NET程序编辑器) 怎么判定它是Unity游戏呢 一般的路径格式是这样的assets\bin\Data\Manag ...

  7. magento 为用户注册增加一个字段

    步骤 I. 加一个occupation/title字段到用户注册页,差不多在register.html的54行,在email下方加一个Occupation显示代码 代码: <li>< ...

  8. 工程师技术(二)：postfix基础邮件服务、postfix空客户端邮件服务、搭建mariadb数据库系统、配置一个数据库、使用数据库查询

    一.postfix基础邮件服务 目标: 本例要求在虚拟机server0上配置 postfix 基础服务,具体要求如下: 1> 监听本机的所有接口    2> 将邮件域和邮件服务主机名都改为 ...

  9. input限制字符长度 - composition

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. CSS：CSS 表格

    ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...