前端实践--JavaScript--浏览器对象

JavaScript 计时器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript"> var i = setInterval(clock,100); function clock(){ var time=new Date(); attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds(); document.getElementById("clock").value = attime; } </script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>

演示结果:

前端实践--JavaScript--浏览器对象_第1张图片
点击STOP按钮停止计时。

JavaS计数器

要创建一个运行于无穷循环中的计数器,我们需要编写一个函数来调用其自身。在下面的代码,当按钮被点击后,输入域便从0开始计数。
添加了一个 “Stop” 按钮来停止这个计数器。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript"> var num=0; var i; function startCount(){ document.getElementById('count').value=num; num=num+1; i=setTimeout("startCount()",1000); } function stopCount(){ clearTimeout(i); } </script>
</head>
<body>
  <form>
    <input type="text" id="count" />
    <input type="button" value="Start" onClick="startCount()" />
    <input type="button" value="Stop" onClick="stopCount()" />
  </form>
</body>
</html>

演示效果:

前端实践--JavaScript--浏览器对象_第2张图片
点击START按钮开始计时,点击STOP按钮停止计时。

返回上下页面

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
 <script type="text/javascript"> function GoBack() { window.history.back(); } function GoForward() { window.history.forward(); } function GoBacka() { window.history.go(-1); } function GoForwarda() { window.history.go(1); } </script>
</head>
<body>
点击下面的锚点链接,添加历史列表项:

    <br />
    <a href="#target1">第一个锚点</a>
    <a name="target1"></a>
    <br />
    <a href="#target2">第二个锚点</a>
    <a name="target2"></a>
    <br /><br />
    使用下面按钮,实现返回前一个页面:
    <form>
       <input type="button" value="返回前一个页面" onclick="GoBack();" />    
       <input type="button" value="返回下一个页面" onclick="GoForward()" /> 
       <input type="button" value="返回前一个页面" onclick="GoBacka();" />
       <input type="button" value="返回下一个页面" onclick="GoForwarda();" />        
    </form>
</body>
</html>

演示结果:

前端实践--JavaScript--浏览器对象_第3张图片

点击第一个锚点第二个锚点,当点击按钮返回下一个页面,当前在#target1的时候,会返回到#target2。

前端实践--JavaScript--浏览器对象_第4张图片

当前在#target2的时候,点击按钮返回前一个页面,会返回到#target2.

前端实践--JavaScript--浏览器对象_第5张图片

制作一个跳转提示页面

要求:

  1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如慕课网主页。

  2. 如果点击“返回”按钮则返回前一个页面。

效果:

注意: 在窗口中运行该程序时,该窗口一定要有历史浏览记录,否则”返回”无效果。

任务分解

第一步: 先编写好网页布局,如下:

前端实践--JavaScript--浏览器对象_第6张图片

第二步: 获取显示秒数的元素,通过定时器来更改秒数。

第三步: 通过window的location和history对象来控制网页的跳转。

解决代码:

<!DOCTYPE html>
<html>
 <head>
  <title>浏览器对象</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
 </head>
 <body>
  <!--先编写好网页布局-->
  <h2>操作成功</h2>
  <p><span id="time"> 5 </span>秒后回到主页&nbsp<a href="javascript:history.back()"> 返回</a></p>
  <script type="text/javascript"> //获取显示秒数的元素,通过定时器来更改秒数。 var num = document.getElementById("time").innerHTML; //通过window的location和history对象来控制网页的跳转。 var i = setInterval("if(num > 1){document.getElementById('time').innerHTML = --num;}else{location.assign('http://www.imooc.com');}", 1000); </script> 
</body>
</html>

演示效果:

前端实践--JavaScript--浏览器对象_第7张图片

前端实践--JavaScript--浏览器对象_第8张图片

你可能感兴趣的:(JavaScript,前端,对象)