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基础框架
如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...
随机推荐
- IT类影视
1.爱奇艺 代码(The Code) 2.爱奇艺 操作系统革命(Revolution OS) 3.爱奇艺 互联网之子 4.爱奇艺 深网
- springcloud笔记一
微服务的概述 什么是微服务? 现今微服务界没有一个统一的.标准的定义 微服务化的核心就是将统一的一站式应用,根据业务拆分成一个一个的服务,彻底的去耦合,每一个微服务提供单个业务功能的服务,一个服务做一 ...
- python操作pymysql
#_author:来童星#date:2019/12/19import pymysql#1.打开数据库连接db=pymysql.connect('localhost','root','root','te ...
- React笔记03——React实现TodoList
1 什么是JSX语法? 原生JS中,要向页面中挂载html标签,标签一定是被引号''包起来的:document.getElementById('root').append('<div>he ...
- MyEclipse6.0中使用aptana插件，添加jquery提示功能
MyEclipse6.0中使用aptana插件,添加jquery提示功能 第一:查看当前MyEclipse集成的eclipse的版本,, 查看路径 D:/MyEclipse 6.0/eclips ...
- JSTL标签的用法详解
在JSP中写Java代码是一件很恶心的事情,代码量少的话还可以,要是多的话,就蛋疼了,整个页面都是<% %>所以EL表达式和JSTL就应运而生了,这里我们注重讲解一下JSTL标签的使用: ...
- Codeforces Round＃498（Div.3）D. Two Strings Swaps
题目 题意是给了两个字符串a和b,然后可以对这两个字符串有三种操作来使这两个字符串相等,一是交换a[i]和b[i],二是交换a[i]和a[n-i+1],三是交换b[i]和b[n-i+1],这三个操作都 ...
- 炼数成金数据分析课程---10、python中如何画图
炼数成金数据分析课程---10.python中如何画图 一.总结 一句话总结: 主要matplotlib库,pandas中也可以画一些基础图 大纲+实例快速学习法 1.matplotlib的最简单画图 ...
- linux find相关 （持续更新中）
按名字查找 find . -name *.txt find . -name test* # . 指的是当前路径, 查找全局的话把. 换成/ 查找并删除多个文件 find -type f -name & ...
- Codeforces 340B - Maximal Area Quadrilateral (计算几何)
Codeforces Round #198 (Div. 2) 题目链接:Maximal Area Quadrilateral Iahub has drawn a set of \(n\) points ...