【php基础班】第12天网页对象介绍、对象深入讲解、事件、定时器

来源：互联网发布：lm算法编辑：程序博客网时间：2024/06/03 14:24

第一节昨日回顾

1） Math对象

a) Math.pow(n1,n2)，求n1的n2次方

b) Math.abs（n）求n的绝对值

c) Math.floor();向下取整（不大于这个数的最大整数）

d) Math.ceil();想上取整（不小于这个数的最小整数）

e) Math.random()求得0到1的随即数，这个随即数不包含1，包含0

f) Math.floor(Math.random()*（大数-小数+1）)+小数;//两个数之间的随即数

g) Math.round()求四舍五入的值

h) Math.max(n1，n2，。。。。。。)求最大值

i) Math.min();求最小值

2） String对象 var abcdef=”abcdabcd”;

a) substr(n1,n2)截取字符串从n1开始截取n2个字符，如果只有一个参数n1，从n1开始截取字符到最后

b) substring(n1,n2)截取字符串从n1到n2，n1可以截取到，n2不可以截取到（不包含n2）

c) indexOf(“字符”)查找字符出现在字符串的第一次出现的位置，如果有返回字符串位置，如果没有找到返回-1

d) lastIndexOf(“字符”);查找字符出现在字符串最后一次的位置，返回字符的位置

e) toLowerCase();转换成小写

f) toUpperCase();转换成大写

g) charAt(n);返回指定位置n的对应的字符

h) charCodeAt()返回指定位置的编码值，a为97，A为65

i) split(“字符”);以字符分割字符串，返回的是数组(var str=”abc12def12mon123456”;=>[“abc”,”def”,”mon”,3456])

3） Date对象

a) Vard1=new Date();//创建当前时间日期对象

b) Vard2=new Date(“2015/11/16 9:29:33”);//创建指定的时间日期

c) Vard3=new Date(2015,11,16,9,29,39);//创建指定的时间日期，注意，月份的值是0到11（0代表1月11代表12月）

d) Vard4=new Date(234584578945);从1970年1月1日开始计算的毫秒值的时间

e) toLocaleString()//获得本地时间显示的格式

f) d1.getTime();//获得从1970年开始到d1的毫秒值

g) d1.getFullYear();//获得年份

h) d1.getMonth();//获得月份

i) d1.getDate();//获得日期

j) d1.getDay();//获得星期

k) d1.getHours();//获得小时

l) d1.getMinutes();//获得分钟数

m) d1.getseconds();//获得秒数

n) d1.getMilliSeconds()//获得毫秒数

o) d1.setFullYear();//设置年份

p) d1.setMonth();//设置月份

q) d1.setDate();//设置日期

r) d1.setDay();//获得星期

s) d1.setHours();//设置小时

t) d1.setMinutes();//设置分钟数

u) d1.setseconds();//设置秒数

v) d1.setMilliSeconds()//设置毫秒数

4） Array对象

a) concat();连接数组

b) join(“字符”);以字符连接数组转换为字符串

c) pop()删除最后一项

d) push(“n’)加入新的元素，加入到后面的位置

e) reverse()翻转数组顺序

f) shift()删除第一个元素,并且返回这个元素

5） Break，continue

a) Break跳出整个循环

b) Continue跳出当前这次循环

6）二维数组 var abcarr=[[23,12,23],[234,56,23],[34,34,23]]

a) 格式[[23,12,23],[234,56,23],[34,34,23]]

b) 下标有两个arr[i][j]

7）特殊字符

“,’,\,\r,\n,\t

第二节网页对象介绍

对象的概念

指具体的东西，在以js的眼光看所有的标签都是标签对象

第三节对象深入讲解

Js控制改变标签的html属性和Css属性

1) 首先获取标签

2) 找到对应的标签属性并赋值

1) HTML的标签属性设置

i. 取值var w=对象.HTML属性名

ii. 对象.HTML属性名=值

2) CSS属性设置

i. Var ab=对象.style.CSS属性名

ii. 对象.style.CSS属性名=值（字符串）

JS控制CSS属性语法

HTML

CSS

Width

background-colr

backgroundColor

height

margin-left

marginLeft

对象案例

//鼠标放上等开

//鼠标离开灯关

functionkaideng(){

varobj=document.getElementById("d1");//获得id为d1的标签

obj.src="images/bulbon.gif";

}

functionguandeng(){

varobj=document.getElementById("d1");//获得id为d1的标签

obj.src="images/bulboff.gif";

}

第四节事件

事件

HTML和Js通过事件建立起来联系。

鼠标事件：

onclick：点击事件

onmouseover:鼠标放上

onmouseout：鼠标离开

ondbclick:双击

onmousedown: 鼠标按下

onmouseup: 鼠标抬起

onmousemove: 鼠标移动。

Event:是指之事件发生的时候（事件源）相关的一些信息

clientX:获得鼠标的X坐标

clientY:获得鼠标的Y坐标

event.target:事件源

在FF里面event需要在函数调用的时候当做参数传递进去

键盘事件

OnkeyDown：键盘按下

OnkeyUp:键盘抬起

OnkeyPress：按键一次

表单事件

Onsubmit：表单提交事件

Onreset：重置事件

Onfocus：获得焦点

Onblur：失去焦点

窗口事件

1)Onload，在网页一打开的时候发生（注意：必须是把所有东西都加载完成之后）

</body>

2)window.onload=init注意：函数名init之后没有括号

第五节innerHTML与value的对比

innerHTML：所有在这个对象之内的内容都是innerHTML的内容

value内容

一般情况：input的时候都是value，双标签都需要用到innerHTML

Document.getElementById(“id”);通过这种方法可以获得这个id名的标签对象

Document.getElemetsByTagName(“标签名”)通过这种方法可以获得标签名的标签对象注意：这个时候获得的是数组形式的

Document.body：获得body这个对象

创建标签：

Document.createElement(“标签名”);

Var obj=document.ceateElement(“img”);

Document.body.appendChild(obj);

margin:不会触发事件

第六节点出满天小星星

//window.setInterval("star(event)",1000);

//在页面点击，能够出现小星星

//这个图片是随即大小的

window.onload=init;

functioninit(){

document.body.bgColor="black";

}

functionstar(e){

//在网页上点击出现星星

varobj=document.createElement("img");

obj.src="images/xingxing.gif";

//让星星的宽度随即变化(90到30之间的宽度)

varw=Math.floor(Math.random()*(90-30+1))+30;

obj.width=w;//随即宽度

//随即出现位置（鼠标点击在哪就出现到哪）

varx=e.clientX;//x需要随即出现

vary=e.clientY;//y需要随即出现

obj.style.position="absolute";

obj.style.top=y+"px";

obj.style.left=x+"px";

document.body.appendChild(obj);

}

第七节定时器

1）反复性定时器：格式：window.setInterval(“fn()”,1000);

a) 会反复执行

b) 第二个参数是以毫秒计算的

2）一次性定时器：格式：window.setTimeout(“fn()”,1000);

a) 执行一次

b) 第二个参数是以毫秒计算的

清除定时器：

1） window.clearInterval();清除反复性定时器

2） window.clearTimeout();清除一次性定时器

阅读全文

0 0

【php基础班】第12天 网页对象介绍、对象深入讲解、事件、定时器

【php基础班】第12天网页对象介绍、对象深入讲解、事件、定时器