您的位置：首页 > Web前端 > JavaScript

【Web前端】慕课网—JavaScript进阶篇8-17编程练习

2016-11-20 12:59 483 查看

前言

本人也是刚学，在这里只是给完全没有头绪的同学一些思路，写的不好请多多指教。

第一步：

编写页面布局之标题：

可以看到练习里面是一个黑色粗体的“操作成功”，所以这里用<h1>标签，很简单，完成第一步。<h1>操作成功</h1>

第二步：

编写页面布局之倒计时部分：

首先我们用一个<p>标签写出语句，<p>5秒后回到主页面返回</p>

接着，我们来完善这部分。

看任务说明，5 这个数字是倒计时的，所以我们用一个 <span> 标签包裹起来，后续操作。<span>5</span>，首先给他设置一个 id再设置样式<span id=”second”>5</span>，任务中的 5 是加粗了的，所以在<head></head>标签里加一个样式

#seconds{
font-weight: bold;
}

然后给“返回”设置一个 <a>标签，设置样式达到任务中效果：

<a href="#" id="back">返回</a>

a{
color: blue;
}

到这里，样式基本完成了。

第三步：

样式设置完成后，要开始 Js 部分了。首先实现哪个倒计时效果。

在 <script> 标签中定义一个函数，这部分在之前的课程里有讲，不过多赘述。

function typeSeconds(){
document.getElementById("seconds").innerHTML = num;
num--;
var i = setTimeout("typeSeconds()",1000);
if (num<=0) {
clearTimeout(i);
location.href="http://write.blog.csdn.net/postlist";
}
}

在这里对修改 <span>里的值说明一下：document.getElementById(“seconds”).innerHTML 可以修改 HTML 中的值。设置定时器，最后判断一下是否已经是 0 了，是就取消定时器，实现页面跳转，用到了 location.href 。倒计时和页面自动跳转就完成了。

第四步：

实现 <a> 标签的点击返回上一页功能。

首先修改返回里 href，使用 Js 来动态控制跳转页面，这里可以参考我的另一篇博客，【Web前端】利用 Js 控制标签跳转

将其修改为

<a href=”javascript:void(0)” id=”back” onclick=”back()”>返回</a>

然后在 js 中定义一个 back 函数，在函数里面调用 history.back() 方法，完成返回上一页跳转。

function back(){
history.back();
}

全部结束。

全部代码：

<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#seconds{
font-weight: bold;
}a{
color: blue;
}
</style>
</head>
<body>
<!--先编写好网页布局-->
<h1>操作成功</h1>
<p><span id="seconds"></span>秒后回到主页 <a href="javascript:void(0)" id="back" onclick="back()">返回</a></p>
<script type="text/javascript">
var num=5;
//获取显示秒数的元素，通过定时器来更改秒数。
function typeSeconds(){
document.getElementById("seconds").innerHTML = num;
num--;
var i = setTimeout("typeSeconds()",1000);
if (num<=0) {
clearTimeout(i);
location.href="http://write.blog.csdn.net/postlist";
}
}typeSeconds();
//通过window的location和history对象来控制网页的跳转。
function back(){
history.back();
}</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航