JavaScript日常修炼笔记（第六天）@慕课网原创_慕课网

练习JavaScript已经第六天了，日常目标，朝着万元高薪进发。

学习前端是一个要很有耐性，要有执着的心才能一学好，它不能一步登天，需要时间的积累，学到第六天，明显感觉进度开始减慢了，因为要理解的点增多了，照着别人的代码抄是没用的，我每次都是把代码删了，自己慢慢手打出来，以后还有很多习题要做，希望大家一起坚持努力学习。

window对象

window对象是BOM的核心，window对象指当前的浏览器窗口。

window对象方法:

计时器setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

<script type="text/javascript">
    var atime;
    function clock(){
      var time = new Date();
      atime = time.getHours() + ":" + time.getMinutes() + ":" +time.getSeconds();
      document.getElementById("clock").value = atime;
    }
    setInterval(clock,1000);
</script>
<input type="text" id="clock" size="50"  />

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

<script type="text/javascript">
   function clock(){
      var time=new Date();
      document.getElementById("clock").value = time;
   }
   var i = setInterval("clock()",100);
   function start(){
       i = setInterval("clock()",100);
   }
</script>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick=clearInterval(i)  />
    <input type="button" value="start" onclick=start()  />
  </form>

取消计时器clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

<script type="text/javascript">
   function clock(){
      var time=new Date();
      attime = time.getHours() + ":" + time.getMinutes() + ":"  + time.getSeconds();
      document.getElementById("clock").value = attime;
   }
   var i = setInterval("clock()",100);
   function mm(){
       i = setInterval("clock()",100)
   }

</script>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"/>
    <input type="button" value="开始" onclick="mm()">
  </form>

计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

<script type="text/javascript">
  var num=0;
  function startCount() {
    document.getElementById('count').value=num;
    num=num+1;
    setTimeout("startCount()",500); 
  }
  //setTimeout("startCount()",1000);如果没有调用函数的执行，这里就需要执行调用函数的命令
</script>
<form>
<input type="text" id="count"  />
<input type="button" value="开始计数" onclick="startCount()">
</form>

取消计时器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止计时器。

语法:

clearTimeout(id_of_setTimeout)

<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>
  <form>
    <input type="text" id="count" />
    <input type="button" value="Start" onClick=startCount()  />
    <input type="button" value="Stop"  onClick=stopCount() />
  </form>

History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

返回前一个浏览的页面

back()方法，加载 history 列表中的前一个 URL。

语法：

window.history.back();

 <script type="text/javascript">
        function GoBack() {
        window.history.back();    
        }

    </script>
//点击下面的锚点链接，添加历史列表项:

    <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();" />        
    </form>

返回下一个浏览的页面

forward()方法，加载 history 列表中的下一个 URL。

如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法,代码如下:

window.history.forward();

 <script type="text/javascript">
        function GoForward() {
        window.history.forward();    
        }
    </script>
点击下面的锚点链接，添加历史列表项:    
    <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="GoForward()" />        
    </form>

返回浏览历史中的其他页面

go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。
语法：

window.history.go(number);

 <script type="text/javascript">
        function GoBack() {
            window.history.go(-1);
        }

        function GoForward() {
            window.history.go(1);
        }
    </script>
    点击下面的锚点链接，添加历史列表项:    
    <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();" /> 
    </form>

Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法:

location.[属性|方法]

 <script type="text/javascript">
    document.write(window.location.href);    
 </script>

屏幕分辨率的高和宽

window.screen 对象包含有关用户屏幕的信息。

screen.height 返回屏幕分辨率的高

screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。

window.screen 对象在编写时可以不使用 window 这个前缀。
我们来获取屏幕的高和宽，代码如下:

<script type="text/javascript">
document.write( "屏幕宽度：" + screen.width+"px<br/>");
document.write( "屏幕高度：" + screen.height+"px<br/>");       
</script>

屏幕可用高和宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

<script type="text/javascript">
document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);     
</script>

最后的编程练习

  <h1>操作成功</h1>
  <span id="second">5</span>
  <span>秒后回到主页</span>
  <a href="javascript:back();">返回</a>
  <script type="text/javascript">
    var num=document.getElementById("second").innerHTML;
    function count(){
        num--;
        document.getElementById("second").innerHTML = num;
        if(num == 0){
            location.assign("http://www.imooc.com");
        }
    }
    setInterval("count()",1000);
   //获取显示秒数的元素，通过定时器来更改秒数。
   //通过window的location和history对象来控制网页的跳转。
   function back(){
       window.history.back();
   }
 </script>