WebBasicJavaScriptUnit03
1 动态时钟的启动和停止
1.1 问题
1）显示当前时间
2）启动时钟
3）停止时钟
1.2 方案
1.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建HTML
在day06文件夹下创建demo1.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>动态时钟</title>
<meta charset="utf-8" />
<script type="text/javascript">
var timer;
function start() {
timer = setInterval(function(){
var now = new Date();
var time = now.toLocaleTimeString();
var c = document.getElementById("clock");
c.innerHTML = time;
}, 1000);
}
function stop() {
clearInterval(timer);
}
</script>
</head>
<body>
<h1>动态时钟</h1>
<p>当前时间：<span id="clock"></span></p>
<p>
<input type="button" value="启动" onclick="start();"/>
<input type="button" value="停止" onclick="stop();"/>
</p>
</body>
</html>
步骤二：测试
使用浏览器打开demo1.html，点击启动按钮，效果如下图：
图-1
1.4 完整代码
demo1.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>动态时钟</title>
<meta charset="utf-8" />
<script type="text/javascript">
var timer;
function start() {
timer = setInterval(function(){
var now = new Date();
var time = now.toLocaleTimeString();
var c = document.getElementById("clock");
c.innerHTML = time;
}, 1000);
}
function stop() {
clearInterval(timer);
}
</script>
</head>
<body>
<h1>动态时钟</h1>
<p>当前时间：<span id="clock"></span></p>
<p>
<input type="button" value="启动" onclick="start();"/>
<input type="button" value="停止" onclick="stop();"/>
</p>
</body>
</html>
2 动态提示信息
2.1 问题
1）点击按钮时弹出提示信息
2）N秒后自动关闭弹出界面
2.2 方案
使用setTimeout推迟隐藏显示框2秒。
2.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建HTML
创建demo2.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>动态提示信息</title>
<meta charset="utf-8" />
<style type="text/css">
#msg {
border:1px solid #ccc;
padding:10px;
text-align:center;
width:200px;
background-color: #eee;
}
.hide {
display:none;
}
.show {
display:block;
}
</style>
<script type="text/javascript">
function del() {
var m = document.getElementById("msg");
m.className = "show";
var timer = setTimeout(function(){
m.className = "hide";
clearTimeout(timer);
}, 2000);
}
</script>
</head>
<body>
<h1>动态提示信息</h1>
<p><input type="button" value="删除" onclick="del();"/></p>
<p id="msg" class="hide">操作成功</p>
</body>
</html>
步骤二：测试
使用浏览器打开demo2.html，点击删除按钮，效果如下图：
图-2
2.4 完整代码
demo2.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>动态提示信息</title>
<meta charset="utf-8" />
<style type="text/css">
#msg {
border:1px solid #ccc;
padding:10px;
text-align:center;
width:200px;
background-color: #eee;
}
.hide {
display:none;
}
.show {
display:block;
}
</style>
<script type="text/javascript">
function del() {
var m = document.getElementById("msg");
m.className = "show";
var timer = setTimeout(function(){
m.className = "hide";
clearTimeout(timer);
}, 2000);
}
</script>
</head>
<body>
<h1>动态提示信息</h1>
<p><input type="button" value="删除" onclick="del();"/></p>
<p id="msg" class="hide">操作成功</p>
</body>
</html>
3 图片轮播
3.1 问题
1）在页面上增加一组图片
2）默认显示第一张图片
3）设置每N秒切换显示一张图片
3.2 方案
使用className属性修改节点的样式。
3.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建HTML
创建demo3.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>图片轮播</title>
<meta charset="utf-8" />
<style type="text/css">
.photo {
list-style-type: none;
border: 2px solid #ccc;
width: 480px;
height: 360px;
margin:0;
padding:0;
}
.photo li {
width: 480px;
height: 360px;
margin: 0;
padding: 0;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
<script type="text/javascript">
var timer;
var index = 0;
function start() {
timer = setInterval(function(){
var ul = document.getElementById("photo");
var lis = ul.getElementsByTagName("li");
for(var i=0;i<lis.length;i++) {
lis[i].className = "hide";
}
index++;
lis[index%lis.length].className = "show";
}, 1000);
}
function stop() {
clearInterval(timer);
}
</script>
</head>
<body onload="start();">
<h1>图片轮播</h1>
<ul class="photo" id="photo"
onmouseover="stop();" onmouseout="start();">
<li class="show">
<img src="../images/f1.jpg">
</li>
<li class="hide">
<img src="../images/f2.jpg">
</li>
<li class="hide">
<img src="../images/f3.jpg">
</li>
<li class="hide">
<img src="../images/f4.jpg">
</li>
</ul>
</body>
</html>
步骤二：测试
使用浏览器打开demo3.html，效果如下图：
图-3
3.4 完整代码
demo3.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>图片轮播</title>
<meta charset="utf-8" />
<style type="text/css">
.photo {
list-style-type: none;
border: 2px solid #ccc;
width: 480px;
height: 360px;
margin:0;
padding:0;
}
.photo li {
width: 480px;
height: 360px;
margin: 0;
padding: 0;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
<script type="text/javascript">
var timer;
var index = 0;
function start() {
timer = setInterval(function(){
var ul = document.getElementById("photo");
var lis = ul.getElementsByTagName("li");
for(var i=0;i<lis.length;i++) {
lis[i].className = "hide";
}
index++;
lis[index%lis.length].className = "show";
}, 1000);
}
function stop() {
clearInterval(timer);
}
</script>
</head>
<body onload="start();">
<h1>图片轮播</h1>
<ul class="photo" id="photo"
onmouseover="stop();" onmouseout="start();">
<li class="show">
<img src="../images/f1.jpg">
</li>
<li class="hide">
<img src="../images/f2.jpg">
</li>
<li class="hide">
<img src="../images/f3.jpg">
</li>
<li class="hide">
<img src="../images/f4.jpg">
</li>
</ul>
</body>
</html>