Java基础入门day36

day36

js

dom控制css变化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>this is p1</p><p id="p2">this is p2</p><p id="p3">this is p3</p>
<script>document.getElementById("p2").innerHTML="<font color='red'>this is p2 updated</font>";document.getElementById("p2").style.fontFamily = "楷体";document.getElementById("p2").style.fontSize = "30px";document.getElementById("p3").innerText="<font color='red'>this is p3 updated</font>";</script>
</body>

</html>

使用dom可以对于元素的css进行设置

dom事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1 id="h1">this is h1</h1><button οnclick="document.getElementById('h1').innerHTML='<font color=red>this is h1 updated</font>'">click me</button>
<script></script>
</body>

</html>

使用dom可以对于元素的事件做出反应

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1 οnclick="this.innerHTML='<font color=red>this is h1 updated</font>'">this is h1</h1><script></script>
</body>

</html>

dom使得JavaScript有能力对于html事件做出反应

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1 οnclick="changeText(this)">this is h1</h1><script>function changeText(h){h.innerHTML="<font color=red>this is h1 updated</font>";}</script>

</body>

</html>

使用dom事件处理器调用一个函数

EventListener

addEventListener函数可以让用户在不同控件上添加事件
语法
element.addEventListener(event, function, useCapture);
参数名描述
event 事件的类型
function 事件触发后调用的函数
useCapture 用于描述事件是冒泡还是捕获

特点：

addEventListener函数用于向指定的元素添加事件

添加的事件句柄不会覆盖已存在的事件句柄

可以向一个元素添加多个事件

可以向同一个元素添加多个相同事件

可以向任何dom对象添加事件监听，不一定是html元素，甚至是window对象

addEventListener可以更简单地控制事件的冒泡与捕获

使用addEventListener函数，可以是的JavaScript能够将事件从html标记中分离出来，可读性更强
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="btn">click me</button><script>
document.getElementById("btn").addEventListener("click", btnAlert);document.getElementById("btn").addEventListener("click", displayDate);document.getElementById("btn").addEventListener("mouseover", changeColor);document.getElementById("btn").addEventListener("mouseout", changeColor02);
function displayDate(){document.getElementById("btn").innerHTML=Date();}
function btnAlert(){alert("i am clicked.")}
function changeColor(){document.getElementById("btn").style.backgroundColor = "red";}
function changeColor02(){document.getElementById("btn").style.backgroundColor = "green";}</script></body>

</html>
可以向元素添加多个事件，click，mouseover， mouseout

也可以同时想元素添加多个click事件

各自的事件互相不冲突

参数名	描述
event	事件的类型
function	事件触发后调用的函数
useCapture	用于描述事件是冒泡还是捕获

操作元素

如需向html中添加元素，dom也可以完成

document.createElement();

document.appendChild();

js中的定时任务

定义定时器

setInterval('调用的函数名'，间隔时间)；每间隔指定的间隔时间后自动执行函数

setTimeout('调用的函数名'，间隔时间)；在固定的时间之后执行异常调用函数

关闭定时器

clearInterval(定时器名称);

clearTimeout(定时器名称);

小综合案例-点名系统

点名系统

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>count</title><script src="js/count.js" ></script><link href="css/count.css" rel="stylesheet" />
</head>
<body οnlοad="create()"><input type="button" id="btnStart" value="start" οnclick="startCount()" /> <input type="button" id="btnStop" value="stop" οnclick="stopCount()"  /> <p /><div id="par">
</div>
</body>
</html>

html页面，放了两个按钮，外加一个空的div

.stu{border: 1px solid green;width: 200px;height: 200px;float: left;margin: 10px;text-align: center;line-height: 200px;
}

外部的css文件用来设置每一个学生div的样式

var names = ["王可明",    "左佳慧",    "靳钰萧",    "宋治刚",    "李伟" ,   "韩温昱",    "李博森",    "胡嘉豪",    "陈晓玲",    "冯煜" ,   "赵雪儿",    "刘西阳",    "呼唤" ,   "王鹏展",    "李晨星",    "周晓宇",    "唐润曈",    "陈世钰",    "付梦茹",    "何俊超",    "袁奕鸿",    "张亚绒",    "樊琳杰",    "崔雅静",    "刘彩霞",    "刘芙蓉",    "何佳豪",    "赵博" ,   "田秘" ,   "张恒超",    "何云飞"
];

var index = -1;
var select;
var flag;

function create(){var par = document.getElementById("par");
for(var i = 0; i < names.length; i++){var stu = document.createElement("div");
stu.innerHTML = names[i];stu.className = "stu";stu.style.backgroundColor = "pink";stu.id = "id" + i;
par.appendChild(stu);}
}

function startCount(){document.getElementById("btnStart").disabled = true;flag = setInterval(myStart, 100);
}

function myStart(){if(index != -1){select.style.backgroundColor = "pink";}//alert(123);// console.log(new Date());
index = parseInt((Math.random() * 99999) % names.length);
// console.log(index);select = document.getElementById("id" + index);
select.style.backgroundColor = "green";
}

function stopCount(){clearInterval(flag);document.getElementById("btnStart").disabled = false;
if(index != -1){alert("此次的幸运儿是" + names[index]);}
}

外部的js文件，用来处理各种事件

浏览器的bom模型

概念：

bom： browser object model：浏览器对象模型，使得JavaScript可以与浏览器”对话“

window

所有浏览器都支持window对象，表示浏览器窗口

所有的js对象、函数以及变量均自动成为window对象的成员

全局变量都是window对象的属性，比如alert，document

status

浏览器的状态栏

用来显示一些状态信息

history

back是后退一次

forward是前进一次

go（num），num为正数，则前进num次，如果为负数，后退num次

screen

window.screen.availWidth

window.screen.availHeight

location

可以获取当前页的url地址，并把浏览器重定向到新的页面

location.hostname:主机名

location.pathname: 路径或者文件名

location.port: 端口

location.protocal,协议，http，https

location.href:返回当前页的url
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>hello<a href="js10.html">js10</a><button οnclick="history.back()">back</button><button οnclick="history.forward()">forward</button><button οnclick="history.go(-1)">指定地址</button><script>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var h = window.screen.availHeight;var w = window.screen.availWidth;
alert(w + ", " + h);</script>
</body>
</html>
screen的availHeight和availWidth可以分别拿到屏幕的可用尺寸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var h = window.location.hostname;var href = window.location.href;alert(href)window.location.href = "http://www.baidu.com";</script>
</body>
</html>
location定位：可以获取主机名，端口，链接等信息