1.动态时钟
1.png
2.发送邮件
2.png
3.DOM
3.png
4.浏览器加载网页
4.png
定时器
定时器.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
<script>
//周期性定时器
function f1() {
var n = 5;
//启动周期性定时器:
//每隔1000毫秒,让浏览器调用一次函数.
//返回值是定时器的id,用于停止定时器.
var id = setInterval(function(){
console.log(n--);
if(n<0) {
//停止定时器
clearInterval(id);
console.log("炸!");
}
},1000);
//启动的定时器类似于一个子线程,
//当前的方法f1类似于主线程(main),
//二者并发执行,即主线程启动完子线程后,
//立刻输出BOOM,而子线程却在1秒后执行第一次.
console.log("BOOM!");
}
//一次性定时器
var id;
function f2() {
//启动一次性定时器:
//在5000毫秒后,让浏览器调用函数.
//调用完成后,定时器会自动结束.
//也可以在未调用前,手动结束.
id = setTimeout(function(){
console.log("啪!");
},5000);
}
function f3() {
clearTimeout(id);
}
</script>
</head>
<body>
<input type="button" value="倒数"
onclick="f1();"/>
<input type="button" value="预备"
onclick="f2();"/>
<input type="button" value="取消"
onclick="f3();"/>
</body>
</html>
动态时钟
动态时钟.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态时钟</title>
<style>
#screen {
border: 1px solid red;
width: 200px;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 20px;
}
</style>
<script>
var id;
function start() {
//若id非空,表示定时器已启动,不要再次启动
if(id) {
return;
}
id = setInterval(function(){
//获取当前时间
var date = new Date();
//转换为本地格式
var time = date.toLocaleTimeString();
//将时间写入段落
var p = document.getElementById("screen");
p.innerHTML = time;
},1000);
}
function stop() {
clearInterval(id);
//清空id,以便于下次启动
id = null;
}
</script>
</head>
<body>
<input type="button" value="开始"
onclick="start();"/>
<input type="button" value="停止"
onclick="stop();"/>
<p id="screen"></p>
</body>
</html>
发邮件
发邮件.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发邮件</title>
<style>
p {
border: 1px solid red;
width: 200px;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 20px;
}
</style>
<script>
var id;
function send() {
//定时器已启动,不要再次启动
if(id) {
return;
}
var p = document.getElementById("msg");
p.innerHTML = "正在发送";
id = setTimeout(function(){
p.innerHTML = "已发送";
//停止定时器时,清空id
id = null;
},3000);
}
function cancel() {
if(id) {
var p = document.getElementById("msg");
p.innerHTML = "已撤回";
clearTimeout(id);
//停止定时器时,清空id
id = null;
}
}
</script>
</head>
<body>
<input type="button" value="发邮件"
onclick="send();"/>
<input type="button" value="撤回"
onclick="cancel();"/>
<p id="msg"></p>
</body>
</html>
BOM
BOM.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
function f1() {
var b = confirm("您确定要离开本网站吗?");
if(b) {
location.href = "http://www.tmooc.cn";
}
}
function f2() {
location.reload();
}
function f3() {
history.forward();
}
//页面加载之初,获取屏幕的尺寸
console.log(screen.width);
console.log(screen.height);
console.log(screen.availWidth);
console.log(screen.availHeight);
//页面加载时,获取浏览器的版本信息
console.log(navigator.userAgent);
</script>
</head>
<body>
<input type="button" value="TMOOC"
onclick="f1();"/>
<input type="button" value="刷新"
onclick="f2();"/>
<input type="button" value="前进"
onclick="f3();"/>
</body>
</html>
读写节点
读写节点.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>读写节点</title>
<script>
//onload是页面加载事件,在页面加载完成后自动触发.
window.onload = function(){
//1.读取节点的类型和名称
var p1 = document.getElementById("p1");
console.log(p1.nodeType);
console.log(document.nodeType);
console.log(p1.nodeName);
console.log(document.nodeName);
//2.读写节点的内容
//双标签中间的文本叫内容.
//innerHTML
var p2 = document.getElementById("p2");
console.log(p2.innerHTML);
p2.innerHTML = "DOM操作包括<u>查询</u>节点";
//innerText
var p3 = document.getElementById("p3");
console.log(p3.innerText);
p3.innerText = "DOM操作包括<u>增删</u>节点";
//3.读写节点的值
//表单控件(label除外)中的数据叫值.
var b1 = document.getElementById("b1");
console.log(b1.value);
b1.value = "BBB";
//4.读写节点的属性
//通过get,set方法进行读写
var i1 = document.getElementById("i1");
console.log(i1.getAttribute("src"));
i1.setAttribute("src","../images/02.jpg");
//通过属性名进行读写
//id,className,style
var a1 = document.getElementById("a1");
console.log(a1.style.color);
a1.style.color = "blue";
}
</script>
</head>
<body>
<p id="p1">DOM操作包括<b>读写</b>节点</p>
<p id="p2">DOM操作包括<b>查询</b>节点</p>
<p id="p3">DOM操作包括<b>增删</b>节点</p>
<p>
<input type="button" value="AAA" id="b1"/>
</p>
<p>
<img src="../images/01.jpg" id="i1"/>
</p>
<p>
<a href="#" style="color:red;" id="a1">登录</a>
</p>
</body>
</html>
