JavaScript（一）

作业

第一题

<style type=”text/css”>

body{

background-color:#0CF;

}

input[type=’text’]{

border-top:none;

border-left:none;

border-right:none;

border-bottom:#06C solid 1px;

background-color:transparent; /*背景色透明*/

}

input[type=’button’]{

border:none;

background-color:transparent; /*背景色透明*/

cursor:pointer; /*当鼠标移上去的时候变成手形*/

}

</style>

</head>

<body>

<div>请输入信息：<input type=”text” name=”username” /><input type=”button” value=”确定>>>” /></div>

第四题

分析页面结构如下：

页面总宽度：8+206+500+8=722

页面总高度：110+519=629

难点：

实现代码

<style type=”text/css”>

#content{

width:722px;

height:629px; /*为了#left,#right高度100%，指定父元素高度*/

overflow:hidden; /*重新测定子元素的高度*/

margin:auto; /*页面居中*/

}

#content #left,#content #right{

width:8px;

height:100%; /*背景无法撑开盒子，所以要设定高度*/

background:url(images/line1.gif) repeat-y;

float:left;

}

#content #right{

background:url(images/line2.gif) repeat-y;

}

#content #center{

width:706px;

float:left;

}

#content #center>div{

float:left;

}

#content #center #part1{

width:206px;

background-color:#ECDFBC;

/*text-align:center;*/ /*图片居中方法一*/

}

#part1 img{

margin:auto; /*图片居中方法二*/

display:block; /*设置块显示才能使用margin:auto来居中*/

}

#content #center #part4{

width:500px;

height:519px;

background:url(images/b-04.jpg);

padding-top:30px;

}

#part4 #wenzi{

width:90%;

font-size:14px;

font-family:’微软雅黑’;

margin:auto;

}

</style>

</head>

<body>

<div id=”content”>

<div id=”left”></div>

<div id=”center”>

<div id=”part1″><img src=”images/xihuzi2.gif” /></div>

<div id=”part2″><img src=”images/5.jpg” /></div>

<div id=”part3″><img src=”images/6.jpg” /></div>

<div id=”part4″>

<div id=”wenzi”>

<header style=”text-align:center”>西湖春天简介 </header>

<p> 　　西湖春天是一家经旅游局批准，工商局登记注册，具有独立法人资格，并足额缴纳旅行社质量保证金的股份制企业。<br />

公司下设组团部、地接部、导游部、财务部、石浦门市部、丹城门市部等机构，承接旅游、休闲、度假、疗养、会务、商务考察等业务，公司管理高度重视人力资源的合理利用和开发，现已拥有一批长期从事旅游工作、精通各项旅游业务、重信誉、讲实效、高素质的管理人员和一支训练有素、经验丰富的导游队伍，并且已做到人人持证上岗。<br />

公司凭借象山旅游发展大好趋势，结合自身的规模优势，全力打造出&ldquo;西湖春天&rdquo;的旗帜品牌形象。目前，公司开发的公司网站，可以让您广泛的了解旅游信息。<br />

公司自成立以来，坚持以&ldquo;质量就是生命&rdquo;的座右铭，虚心接受客户的监督，不断完善管理机制，全体员工积极进取，开拓创新、奋发图强；公司连续获得2003年度《安全生产先进集体》、《浙江省旅游消费推荐单位》、《&ldquo;安康杯&rdquo;竞赛优胜企业》、2004年度《石浦首届旅游消费诚信单位》等荣誉称号。<br />

公司与国内众多旅行社建立了良好的义务关系，在主要城市已形成了客房、餐饮、交通等完善的旅游服务网络，&ldquo;西湖春天&rdquo;全体工作人员将以最合理的旅游线路，最实惠的价格，最细致的服务，热诚期待您的到来。</p>

</div>

</div>

</div>

<div id=”right”></div>

</div>

圆角矩形

区分上下左右四个点

例题

<style type=”text/css”>

div{

width:100px;

height:100px;

border:#000 solid 1px;

margin:5px auto;

}

div:nth-of-type(1){

border-radius:10px; /*四个点的圆角半径都是10px*/

}

div:nth-of-type(2){

border-radius:10px 20px; /*上下10px 左右20px*/

}

div:nth-of-type(3){

border-radius:10px 20px 30px; /*上10px 左右20px 下30px*/

}

div:nth-of-type(4){

border-radius:10px 20px 30px 40px; /*上右下左*/

}

div:nth-of-type(5){

border-radius:50%; /*正圆*/

}

</style>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

圆角矩形的应用

<style type=”text/css”>

body{

background:#999;

}

div{

width:200px;

height:200px;

padding:10px;

border:#000 solid 1px;

border-radius:10px;

background-color:#CCC;

}

#face{

border-radius:50%;

}

</style>

</head>

<body>

<div><img src=”images4/face.jpg” /></div>

<img src=”images4/face.jpg” id=”face” />

2D转换

在二维平面上桌变化，关键字：transform

2D转换之移动（translate）

例题：让div居于屏幕的中间

<style type=”text/css”>

div{

width:200px;

height:200px;

background-color:#900;

position:absolute;

left:50%;

top:50%;

/*transform:translateX(-50%) translateY(-50%);*/

transform:translate(-50%,-50%)

}

</style>

<div></div>

2D转换之旋转

2D转换之缩放（scale）

<style type=”text/css”>

img{

transform:scaleX(1.5); /*x轴是原来的1.5倍*/

transform:scaleY(0.5); /*y轴是原来的0.5倍*/

transform:scale(0.5,0.5); /*同时设定x轴和y轴的缩放*/

}

</style>

<img src=”images4/face.jpg” width=”200″ height=”200″ />

例题：三角做法

<style type=”text/css”>

div{

width:300px;

height:30px;

border:#999 solid 1px;

margin:100px auto;

position:relative;

}

div:after{

content:”;

width:12px;

height:12px;

display:inline-block;

position:absolute;

right:12px;

border-right:#999 solid 1px;

border-bottom:#999 solid 1px;

transform:rotate(45deg) translateY(10px);;

}

div:hover{

border:#00F solid 1px;

}

div:hover:after{ /*必须先写:hover，后写:after*/

border-right:#00F solid 1px;

border-bottom:#00F solid 1px;

}

</style>

<div></div>

过渡（transition）

动画类型有：

例题（对象移动）：

<style type=”text/css”>

div{

width:200px;

height:200px;

background-color:#F00;

transition:all 1s ease;

}

div:hover{

transform:translateX(500px);

}

</style>

<div></div>

例题：（头像旋转）

<style type=”text/css”>

img{

border-radius:50%;

transition:all 0.5s ease;

}

img:hover{

transform:rotate(360deg);

}

</style>

<img src=”images4/face.jpg” />

例题：（头像变大）

<style type=”text/css”>

ul{

list-style-type:none;

margin:10px auto;

padding:0px;

overflow:hidden;

}

li{

width:200px;

height:200px;

border:#000 solid 1px;

margin:5px;

float:left;

overflow:hidden;

}

img{

transition:all 0.5s ease;

}

img:hover{

transform:scale(1.1);

}

</style>

<ul>

<li><img src=”images4/face.jpg” width=”200″ height=”200″ /></li>

<li><img src=”images4/face.jpg” width=”200″ height=”200″ /></li>

<li><img src=”images4/face.jpg” width=”200″ height=”200″ /></li>

</ul>

Sublime介绍

1. 生成HTML框架结构

按tab键或ctrl+E生成

注意要将页面保存再按快捷键生成

常用的其他技巧

什么是JavaScript

1. JavaScript是一种解释型的，基于对象的脚本语言。
2. Javascript（JS）可以运行在客户端，也可以运行在服务器端。默认是运行在客户端。

script：脚本

页面的执行过程

解释型与编译型

要看一门语言是否是解释型还是编译型，主要看是否会生成中间文件。

运行在客户端的语言都是解释型

运行在服务器端的语言都是编译型。

脚本语言

脚本语言也是语言一种，脚本语言的特点要结合其他语言一起实现功能。

JavaScript的应用场景

1. 客户端特效
2. 验证表单

变量

变量就是一个会变的量

x+1=2 x=1

x+10=20 x=10

变量就是内存中的一段空间

变量的命名规则

1. 变量以字母、下划线，$开头，后面跟的在字母、数字、下划线，$
2. 关键字不能做变量名
3. 变量名区分大小写（aa和Aa是两个空间）

下列变量名是否合法

1. aa 合法
2. a1 合法
3. 1a 不合法（不能以数字开头）
4. _1a 合法
5. a-1 不合法
6. a% 不合法
7. x 合法
8. do 不合法（关键字不可以做变量名 if for else case …）

声明变量

通过var关键字来声明变量。

声明变量有两种方法

1. 显式声明：通过var关键字声明后使用
2. 隐式声明：不声明，直接使用

输出的方法

1、document.write(‘锄禾日当午’); //输出在浏览器上

2、alert(‘锄禾日当午’); //弹出一个对话框（就是window.alert()）

3、prompt()：弹出一个用于输入的对话框

4、弹出一个对话框，有“确定”和“取消”按钮

5、console.log(‘锄禾日当午’)：在控制台输出，用于代码调试

几个需要记忆的单词

1. window：窗口
2. document：文档
3. console：控制台
4. log：日志

变量数据类型

变量的数据类型取决于变量中存储的值。如果存放的是数字就是数字型，存放字符串就是字符串型。

基本数据类型

特殊数据类型

typeof：显示变量的数据类型

多学一招：JS支持八进制，十进制，十六进制。

多学一招：JS支持无穷大

JavaScript的基本语法规则

1. 解释型语言，可以随时运行
2. 大小写敏感
3. 弱类型语言（变量的数据类型取决于存放的数据）
4. 分号表示语句的结束（也可以使用换行替代分号，但不推荐）

注释

1. 单行注释： //
2. 多行注释： /* */

运算符

赋值运算符（=）

a=5：将5付给a

算术运算符

注意：

1、“+”除了做数字运算，还可以做字符串相加，字符串相加就是字符串相连。

2、字符串和数字相加，将数字转成字符串型再相连

3、字符串只能做加法，不能做减法，不能做乘法，不能做除法。

4、取模就是取余数

自增

++前置：先自增，后运行

++后置：后自增，先运算

作业：

1. 实现旋转的效果