BOM_Location与案例3_自动跳转首页

BOM_Location

　　　　window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

　　　　Location: 地址栏对象

　　　　　　　　1.创建（获取）

　　　　　　　　　　　　　1.window.location

　　　　　　　　　　　　　2.location

　　　　　　　　2.方法：

　　　　　　　　　　　reload（）重写加载当前文档。刷新　

　　　　　　　　3.属性：

　　　　　　　　　　　1.href   设置或返回完整的   URL

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>

</head>
<body>
    <input type="button" id="btn" value="刷新">

    <input type="button" id="goItcast" value="去传智">

    <script>
        //reload方法，定义一个按钮，点击按钮，刷新当前页面
        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单击事件
        btn.onclick = function (){
            //3.刷新页面
            location.reload();
        }
        //获取href
        var href  = location.href;
        //alert(href);

        //点击按钮，去访问www.baidu.com官网
        //1.获取按钮
        var goItcast = document.getElementById("goItcast");
        //2.绑定单击事件
        goItcast.onclick = function (){
            //3.去访问www.baidu.com官网
            location.href = "http://www.baidu.com";
        }
    </script>
</body>
</html>
复制代码

 

案例3_自动跳转首页　

案例分析

 分析：
         1.显示页面效果  <p>
         2.倒计时读秒效果实现
             2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
             2.2 定义一个定时器，1秒执行一次该方法
         3.在方法中判断时间如果<= 0 ，则跳转到首页】
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自动跳转</title>
  <style>
    p{
      text-align: center;
    }
    span{
      color:red;
    }

  </style>


</head>
<body>
<p>
  <span id="time">5</span>秒之后，自动跳转到首页...
</p>


<script>
  /*
      分析：
         1.显示页面效果  <p>
         2.倒计时读秒效果实现
             2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
             2.2 定义一个定时器，1秒执行一次该方法
         3.在方法中判断时间如果<= 0 ，则跳转到首页

   */
  // 2.倒计时读秒效果实现

  var second = 5;
  var time = document.getElementById("time");

  //定义一个方法，获取span标签，修改span标签体内容，时间--
  function showTime(){
    second -- ;
    //判断时间如果<= 0 ，则跳转到首页
    if(second <= 0){
      //跳转到首页
      location.href = "https://www.baidu.com";
    }

    time.innerHTML = second +"";
  }


  //设置定时器，1秒执行一次该方法
  setInterval(showTime,1000);



</script>
</body>
</html>
复制代码

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>

</head>
<body>
    <input type="button" id="btn" value="刷新">

    <input type="button" id="goItcast" value="去传智">

    <script>
//reload方法，定义一个按钮，点击按钮，刷新当前页面
//1.获取按钮
var btn = document.getElementById("btn");
//2.绑定单击事件
btn.onclick = function (){
//3.刷新页面
location.reload();
}
//获取href
var href  = location.href;
//alert(href);

        //点击按钮，去访问www.baidu.com官网
//1.获取按钮
var goItcast = document.getElementById("goItcast");
//2.绑定单击事件
goItcast.onclick = function (){
//3.去访问www.baidu.com官网
location.href = "http://www.baidu.com";
}
</script>
</body>
</html>
posted @   zj勇敢飞，xx永相随  阅读(34)  评论(0)  编辑  收藏  举报
相关博文：
· 案例2_轮播图与BOM_Window_属性
· BOM_概述与BOM_Window_弹出方法
· BOM的Location和案例3自动跳转首页
· BOM_Location和案例3_自动跳转首页
· BOM_Window属性和location对象
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示