javascript基础总结之实例(一)
样式
<!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基础总结之实例(一)的更多相关文章
- javascript基础总结之实例(二)
div的显示和隐藏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 一步步学习javascript基础篇（3）：Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- Javascript基础回顾 之(三) 面向对象
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Javascript基础回顾 之(一) 类型
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- Javascript基础知识总结一
Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- javascript基础部分
javascript基础部分 1 数据类型: 基础数据类型(通过typeof来检测):Number,string,undefined,null,boolean,function typeof只能检测 ...
- 一个简单的、面向对象的javascript基础框架
如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...
随机推荐
- 3、Python 基础类型 -- List 列表类型
2.更新列表:list.append() 3.删除列表元素 del
- cdq分治（陈丹琦分治）
//转自:http://blog.csdn.net/snowy_smile/article/details/49668689 /* 算法介绍之cdq分治: 其实cdq分治的思想与应用都能被很简单地描述 ...
- ElasticSearch---初识
1.概述 1.1 ElasticSearch是一个 基于Lucene 的 搜索服务器: 1.2 ElasticSearch 提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful ...
- 小程序之rpx适配方案
官网文档: 我的理解: rpx是自适应单位 计算方式: 1rpx = 设备屏幕宽度 / 750 注意:750是官网规定 为什么选择iPhone6为标准,作为开发模拟? 因为在iPhone6中,1px ...
- 阿里云资深技术专家黄省江：让天下没有难做的SaaS
导语:本文中,阿里云资深技术专家黄省江(花名禅笑)将聚焦“SaaS加速器——让天下没有难做的SaaS”,对伙伴来说,SaaS加速器帮助他们做好SaaS,卖好SaaS:对企业来说,SaaS加速器帮助他们 ...
- PHP ftp_connect() 函数
定义和用法 ftp_connect() 函数打开 FTP 连接. 当连接打开后,您就可以通过服务器来运行 FTP 函数了. 语法 ftp_connect(host,port,timeout) 参数 描 ...
- Http请求工具类 httputil
package com.snowfigure.kits.net; import java.io.BufferedReader; import java.io.IOException; import j ...
- CSS适配，方案
1.尺寸常用单位: https://www.cnblogs.com/whitewolf/p/css-em-px-percentage.html px.em.rem.% 2.CSS的长度单位适配方案 ...
- js面向对象编程（第2版）——js继承多种方式
附带书籍地址: js面向对象编程(第2版)
- error LNK2019: 无法解析的外部符号 "__declspec(dllimport) long __stdcall RtlGetVersion(struct _OSVERSIONINFOW
虽然ntdll.lib库也引用了,但还是提示找不到RtlGetVersion函数定义,工程中头文件的定义如下: NTSYSAPI NTSTATUS NTAPI RtlGetVersion( _ ...