样式

<!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. 【JZOJ3920】噪音

    description FJ有M个牛棚,编号1至M,刚开始所有牛棚都是空的.FJ有N头牛,编号1至N,这N头牛按照编号从小到大依次排队走进牛棚,每一天只有一头奶牛走进牛棚.第i头奶牛选择走进第p[i] ...

  2. 【转】java即时消息推送

    整个例子的源码下载:http://pan.baidu.com/s/1gfFYSbp 下载服务端jar文件 Comet4J目前仅支持Tomcat6.7版本,根据您所使用的Tomcat版本下载[comet ...

  3. 使用SpringBoot AOP 记录操作日志、异常日志

    平时我们在做项目时经常需要对一些重要功能操作记录日志,方便以后跟踪是谁在操作此功能:我们在操作某些功能时也有可能会发生异常,但是每次发生异常要定位原因我们都要到服务器去查询日志才能找到,而且也不能对发 ...

  4. 设置select下拉框高度的一种方法

    这种方法可以设置下拉框最多显示几条栏目,多余的栏目用显示滚动条展示: <select style="position: absolute;z-index: 1;" onmou ...

  5. 在C#.NET中，如何生成PDF文件？主要有以下几个途径

    1．使用.NET文件流技术:若通过.NET的文件流技术生成PDF文件,必须对PDF文件的语法很清楚,例如BT表示实体内容开始:ET表示实体内容结束:TD表示换行等等.我们可以从Adobe的官方网站上下 ...

  6. XSS的原理分析与解剖：第四章（编码与绕过）*******************未看**********************

    0×01前言 很抱歉,这第四章被我推了几个月,今天是元旦难得有空,就把第四章写下.我先把主要使用的编码说下,介绍完会说下绕过. 本文建议与<杂谈如何绕过WAF>一同阅读. 0×02 URL ...

  7. Linux文件大小 指令&编程

    在工作和日常的编程中时常需要确定文件的大小,一些基本的查看方式在此做一个总结. 一. linux shell环境下 df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力.    ...

  8. form提交跳转问题

    $.ajax({ type: "POST", url: url, data: $('.form-horizontal').serialize(), 提交form表单 success ...

  9. ajax - getJSON() 方法

    $("body").on("click",".layui-input-inline:eq(3)",function(){ $(this).f ...

  10. 2、使用siege进行服务端性能测试

    先查看siege帮助 输入siege -h 翻译一下常用命令 -c 指定并发数 -r 指定重复次数 -d 指定请求的延迟时间,注意每个请求间随机延迟 -f 指定url列表,可以一次给多个地址加压 -t ...