2021-04-14 js高级07

最新推荐文章于 2024-05-23 16:08:37 发布

子非鱼emma

最新推荐文章于 2024-05-23 16:08:37 发布

阅读量77

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_38998319/article/details/115707072

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.创建一个一次性定时器，定时器执行时，3秒后在控制台输出：“我是一次性定时器，只执行一次”

setTimeout(function () {
    console.log('我是一次性定时器，只执行一次');

  }, 3000);

2.新建一个一次性定时器，该定时器中的函数有参数a,b，参数值为：“参数1”。“参数2”，并在控制台输出这两个参数值

 setTimeout(function (a, b) {
    console.log(a);
    console.log(b);
  }, 3000, '参数1', '参数2');

3.新建一个定时器永久timerr ，没间隔1秒在控制台输出：“我是永久定时器”

var timerr = setInterval(function () {
    console.log("我是永久定时器");
  }, 1000);

4.用代码实现点击btn元素，取消定时器timmerr

var timerr = setInterval(function () {
    console.log("我是永久定时器");
  }, 1000);


var btn = document.getElementById("cancel");
  btn.onclick = function () {
    clearInterval(timerr);
  };

5.新建一个一次性定时器，3秒后跳转到知乎

 var timer = setTimeout(function () {
 location.href = "http://www.zhihu.com";
  }, 3000);

6. window对象和全局变量的关系

所有的全局变量都是window对象的属性

所有的全局函数都是window对象的方法

7.用代码实现，当页面所有内容加载完成后，在控制台输出：“我是所有内容加载完成后执行的代码”

    //window的onload事件
    window.onload=function(){
     
      console.log('我是所内容加载完成后执行的代码');
    }

8.用两种方法阻止a标签（link这个元素）的默认行为，？这两种方式有什么区别？

 //  阻止a标签的默认行为
    var link=document.getElementById('link');
    link.onclick = function(){
      return false;//会终止后面代码执行
      console.log(111);
    }

    link.onclick = function(e){
      e.preventDefault();//不会终止后面代码执行
      console.log(22222);

    }

9.mouseover与什么鼠标离开事件成对出现

box.onmouseover = function () {
    clearInterval(timer);
  };
  box.onmouseout = function () {
    //继续执行定时器
    timer = setInterval(moveRight, 3000);
  };

10.轮播图案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100%;
        height: 100%;
        position: relative;
      }
      a {
        color: #fff;
      }
      html,
      body {
        height: 100%;
      }
      img {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 1s;
      }
      .btns {
        width: 100%;
        height: 0;
        position: absolute;
        z-index: 9;
        top: 50%;
      }
      .btns a {
        text-decoration: none;
        position: absolute;
        width: 60px;
        height: 100px;
        background-color: rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 4px #fff;
        font-size: 40px;
        border-radius: 4px;
        line-height: 100px;
        text-align: center;
      }
      .btns a:first-child {
        left: 0;
      }
      .btns a:last-child {
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="btns">
        <a href="javascript:;">&lt;</a>
        <a href="javascript:;">&gt;</a>
      </div>
      <div class="img">
        <img src="./images/1.jpg" alt="" />
        <img src="./images/2.jpg" alt="" />
        <img src="./images/3.jpg" alt="" />
        <img src="./images/4.jpg" alt="" />
        <img src="./images/5.jpg" alt="" />
      </div>
    </div>
  </body>
  <script>
    /*
    鼠标移到图片上面的时候,能暂停自动轮播
    鼠标离开图片 继续自动轮播

    思路: 
    1.把事件注册 box身上
    2.鼠标移入 定时器暂停
    3,鼠标移出  开启定时器
            */

    var img = document.querySelectorAll(".img img");
    // console.log(img);
    // 首先让第一张图显示出来
    img[0].style.opacity = 1;
    // 声明一个变量 0 当前是第几张图下标
    var current = 0;
    // 使用周期性定时器 实现切换效果
    var timer = setInterval(moveRight, 3000);
    function moveRight() {
      img[current].style.opacity = 0;
      img[(current = ++current === img.length ? 0 : current)].style.opacity = 1;
    }
    //先做右边 轮播图本来自己向右 只不过咱们点击 触发一次定时器
    var right = document.querySelector(".btns a:last-child");
    right.onclick = moveRight;

    //左边
    var left = document.querySelector(".btns a:first-child");
    left.onclick = function () {
      img[current].style.opacity = 0;
      // current--;
      // if (current === -1) {
      //   current = img.length - 1;
      // }

      img[
        (current = --current === -1 ? img.length - 1 : current)
      ].style.opacity = 1;
    };

    /* ======================暂停和继续自动轮播=========================== */
    var box = document.querySelector(".box");
    box.onmouseover = function () {
      clearInterval(timer);
    };
    box.onmouseout = function () {
      //继续执行定时器
      timer = setInterval(moveRight, 3000);
    };

    /* =============让图片变成最上面========================= */
    // 让动画结束 transitionend
    // img[0].ontransitionend = function () {
    //   console.log(1);
    // };
    img.forEach(function (e) {
      e.ontransitionend = function () {
        if (this.style.opacity == 1) {
          this.style.zIndex = 1;
        } else {
          this.style.zIndex = 0;
        }
      };
    });
  </script>
</html>

11.倒计时案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        display: flex;
        width: 200px;
        height: 100px;
        background-color: tomato;
        padding: 40px;
        border-radius: 4px;
        font-size: 40px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="h">00</div>
      <div>:</div>
      <div class="m">01</div>
      <div>:</div>
      <div class="s">01</div>
    </div>
  </body>
  <script>
    /* 
      目标: 
      倒计时: 每隔一秒让秒数 -1
                当秒小于0 让秒变成59 分钟-1
                当分钟小于0  让分钟变成59  小时-1
                当时 分 秒 都为0 停止


        步骤: 1.获取元素
             2.获取元素的文本
            3.定时器
            让秒-1 
            判断 秒<0
            变成59 分钟-1
            判断 分钟<0
            变成59  小时-1
            如果都是0 停止
      
      
       */
    //    1.获取元素
    var hh = document.querySelector(".h");
    var mm = document.querySelector(".m");
    var ss = document.querySelector(".s");
    //    2.获取元素里面的文本
    var h = parseInt(hh.innerText);
    var m = parseInt(mm.innerText);
    var s = parseInt(ss.innerText);

    // 3.定时器
    var timer = setInterval(function () {
      if (h === 0 && m === 0 && s === 0) {
        clearInterval(timer);
        return;
      }
      s--;
      //   判断s是否小于0 如果小于0 变成59 分钟-1\
      //   if (s < 0) {
      //     s = 59;
      //     m--;
      //   }
      s = s < 0 ? 59 : s;
      s === 59 ? m-- : m;
      //如果m 也是0 也要变成59
      //   if(m<0){
      //       m=59;
      //       h--;
      //   }
      m < 0 ? ((m = 59), h--) : m;
      //补0
      var tempS = s < 10 ? "0" + s : s;
      var tempM = m < 10 ? "0" + m : m;
      var tempH = h < 10 ? "0" + h : h;
      //把数字修改回去
      ss.innerText = tempS;
      mm.innerText = tempM;
      hh.innerText = tempH;
    }, 1000);
  </script>
</html>

子非鱼emma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-04-14 js高级07

1.创建一个一次性定时器，定时器执行时，3秒后在控制台输出：“我是一次性定时器，只执行一次”setTimeout(function () { console.log('我是一次性定时器，只执行一次'); }, 3000);2.新建一个一次性定时器，该定时器中的函数有参数a,b，参数值为：“参数1”。“参数2”，并在控制台输出这两个参数值 setTimeout(function (a, b) { console.log(a); console.log(b..
复制链接

扫一扫