JS10Word格式文档下载.docx
- 文档编号:21367316
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:28
- 大小:110.37KB
JS10Word格式文档下载.docx
《JS10Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《JS10Word格式文档下载.docx(28页珍藏版)》请在冰豆网上搜索。
;
student.age=13;
student.sex="
M"
functioncheckProperty(){
alert("
Thisisastudent"
);
}
student.property=checkProperty();
student.property();
/script>
document.write(Math.sin(Math.PI));
三、课后小结
今天上课的内容简单,但要求大家多多练习,以熟能生巧,特别是在网页中超链接的应用等。
四、课后练习
functioncalcBallVol(radius){
return(4/3)*(Math.PI*Math.pow(radius,3));
alert(calcBallVol(5));
第7周第1次课
JavaScript对象编程
(二)
一、对象的属性和方法
●JavaScript对象是属性和方法的集合。
●属性是一个或者一组值,是对象的成员之一,方法是对象的一个函数,也是对象的成员。
二、对象属性
●对象的属性使用跟在对象后面的标识符表示,对象和标识符之间用“.”分隔,下面是对象属性的标准表示规则:
●object.property
●object是对象名,property是属性名。
●在定义了一个对象后,可以动态地给对象添加属性。
三、对象方法
●对象的方法也通过跟在对象后面的标识符表示,对象和标识符之间用“.”分隔,不同的是,对象的方法名后面有一对括号。
下面是对象属性的标准表示规则:
●object.method();
●object是对象名,method是方法名。
四、实例
五、课后练习
varnewDate=newDate();
document.write("
今年是"
+newDate.getYear()+"
年"
+"
br>
"
newDate.setYear(2007);
明年是"
明年的今天是:
+newDate);
第7周第2次课
JavaScript对象编程(三)
1、熟悉Math等对象的应用方法。
熟悉Date等对象的应用方法。
熟悉Number,String等对象的应用方法。
一、Math对象
●Math对象具有一系列的常量和方法,能够实现比较复杂的算术运算逻辑。
●Math对象是由解释器自动生成的,因此在使用的时候不需要首先生成实例,而是可以直接访问。
二、Date对象
●Date对象提供了十分灵活的操作时间和日期的方法。
●Date对象拥有一系列属性和方法,可以用来表示任意的日期和时间,获取系统当前时间或者获取两个时间的间隔。
●Date对象是从1970年1月1日00:
00:
00.000GMT开始计时的,并且以毫秒为单位。
GMT是格林威治标准时间。
三、Number对象
●Number对象是提供基本数据类型中数值型的JavaScript内置对象,Number对象还提供数值型常数。
●需要注意是,在介绍数据类型的时候,提到过浮点类型的对象是要求介于±
5×
10-324和±
1.7976×
10308之间的。
四、Sring对象
●String对象是提供基本数据类型中字符串型的JavaScript内置对象。
String对象提供的方法十分丰富。
●String对象的惟一属性是长度属性,这个属性指出了String对象代表的字符串的长度。
五、Array对象
●当创建一个数组时,实际上创建了一个Array对象。
●Array对象一个非常重要的属性是其长度属性。
Array对象的长度属性返回数组中现有的元素个数。
由于Array对象索引值从0开始的缘故,长度属性返回的值也是Array对象下一次动态增加元素的索引值。
六、练习
varthisDate=newDate();
document.write(thisDate.toString());
document.write(thisDate.toUTCString());
document.write(thisDate.toGMSString());
《/script>
设置超链接的样式
1、丰富的超链接特效。
2、按钮式超链接。
按钮式超链接。
一、丰富的超链接特效
1、动态超链接
伪类别选择嚣:
伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。
它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。
我们最常用的是4种a元素的伪类,它表示动态链接在4种不同的状态:
link、visited、active、hover。
CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。
格式:
选择器:
伪类{属性:
值;
}
如:
a:
link{color:
#FF0000;
}?
锚伪类别:
link
visited
hover
active
必须按以下顺序设置,否则在IE中无效
a:
?
/*未访问的链接*/
visited{color:
#00FF00;
}/*已访问的链接*/
hover{color:
#FF00FF;
/*鼠标移动到链接上*/
active{color:
#0000FF;
/*选定的链接*/
1.2.12、按钮式超链接
.a2:
link,.a2:
visited{color:
#fff;
background:
#ee251e;
text-decoration:
none;
border-top:
1pxsolid#B7B7B7;
border-left:
border-right:
1pxsolid#408080;
border-bottom:
hover{color:
#FFFFFF;
#5555FF;
1pxsolid#b7b7b7;
二、学生练习
设置超链接的样式
(二)
三、源码
h1>
一、丰富的超链接特效<
/h1>
1、动态超链接<
p>
/p>
伪类<
spanlang="
EN-US"
xml:
lang="
>
{<
/span>
属性:
值<
}<
&
nbsp;
<
link<
{color:
link&
visited&
hover&
active&
必须按以下顺序设置,否则在IE中无效<
div>
palign="
left"
/*<
未访问的链接<
*/<
visited<
}/*<
已访问的链接<
hover<
鼠标移动到链接上<
active<
选定的链接<
/div>
tablewidth="
780"
border="
0"
cellspacing="
cellpadding="
tr>
tdcolspan="
8"
imgsrc="
pic/tongdefuben.jpg"
width="
950"
height="
140"
/>
/td>
/tr>
td>
divalign="
center"
ahref="
#"
首页<
/a>
系部简介<
专业设置<
报考信息<
成绩查询<
毕业事宜<
规章制度<
联系我们<
953"
站内新闻<
/table>
四、课后小结
第7周第3次课
3、浮雕式超链接
.a3:
link,.a3:
font-family:
宋体"
font-size:
14px;
width:
100px;
height:
30px;
text-align:
center;
padding-left:
0px;
font-weight:
bold;
underline;
.table{background:
url(./pic/dhbg.gif)repeat-x;
16px;
vertical-align:
middle;
.td{
border-right-width:
1px;
border-top-style:
none;
border-right-style:
double;
border-bottom-style:
border-left-style:
border-right-color:
#ff0;
学生练习操作
第8周第1次课
设置页面滚动条的样式
1、学生熟练掌握设置页面滚动条的知识。
页面滚动条
一、页面滚动条
滚动条相关颜色属性:
face-color:
滑块颜色
hightlight-color:
高亮颜色
3dlight-color:
三维光线颜色
darkshadow-color:
暗影颜色
shadow-color:
阴影颜色
arrow-color:
箭头颜色
tack-color:
滑道颜色
二、源码:
body{scrollbar-3dlight-color:
scrollbar-highlight-color:
#000;
scrollbar-face-color:
#ff0;
scrollbar-shadow-color:
scrollbar-darkshadow-color:
#ccc;
scrollbar-arrow-color:
purple;
scrollbar-base-color:
.largetext{scrollbar-3dlight-color:
#80c4de;
#f00;
#00f;
三、效果图
五、课后小结
第8周第2次课
无需表格的菜单
(一)
1、掌握项目列表的用法。
2、制作无需表格的菜单。
制作无需表格的菜单。
一、项目列表
1、列表的符号(ol:
有序ul:
无序,加上list-style-type后没有实际区别)
值
描述
none
无标记。
disc
默认。
标记是实心圆。
circle
标记是空心圆。
square
标记是实心方块。
decimal
标记是数字。
decimal-leading-zero
0开头的数字标记。
(01,02,03,等。
)
lower-roman
小写罗马数字(i,ii,iii,iv,v,等。
upper-roman
大写罗马数字(I,II,III,IV,V,等。
lower-alpha
小写英文字母Themarkerislower-alpha(a,b,c,d,e,等。
upper-alpha
大写英文字母Themarkerisupper-alpha(A,B,C,D,E,等。
lower-greek
小写希腊字母(alpha,beta,gamma,等。
lower-latin
小写拉丁字母(a,b,c,d,e,等。
upper-latin
大写拉丁字母(A,B,C,D,E,等。
hebrew
传统的希伯来编号方式
armenian
传统的亚美尼亚编号方式
georgian
传统的乔治亚编号方式(an,ban,gan,等。
cjk-ideographic
简单的表意数字
hiragana
标记是:
a,i,u,e,o,ka,ki,等。
(日文片假名)
katakana
A,I,U,E,O,KA,KI,等。
hiragana-iroha
i,ro,ha,ni,ho,he,to,等。
katakana-iroha
I,RO,HA,NI,HO,HE,TO,等。
水上运动
o自由泳
o仰泳
o蛙泳
o蝶泳
o个人混合泳
o自由泳接力
2、图片符号
ul{font:
12px;
color:
#0066FF;
list-style-type:
circle;
.ul{list-style-image:
url(pic/bt1.jpg);
.li{background:
url(pic/bt1.jpg)no-repeat;
25px;
三、学生练习制作个人栏目列表项。
第8周第3次课
无需表格的菜单
(二)
三、无需表格的菜单源码:
#navigation{width:
200px;
#navigationul{list-style-type:
/*不显示项目符号*/
margin:
padding-lef
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JS10
![提示](https://static.bdocx.com/images/bang_tan.gif)