webapi练习三 ----- tab栏切换,百度换肤等

最新推荐文章于 2022-03-31 00:59:39 发布

Joy Weijiao

最新推荐文章于 2022-03-31 00:59:39 发布

阅读量230

点赞数

分类专栏：练习 webapi 文章标签：练习

本文链接：https://blog.csdn.net/weixin_44114310/article/details/88756966

版权

练习同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

webapi

8 篇文章 0 订阅

订阅专栏

【案例：获取当前元素的索引.html】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
  <button>按钮6</button>
  <button>按钮7</button>
  <button>按钮8</button>
  <script>
    var btns = document.querySelectorAll('button')
    for(var i =0 ; i < btns.length ; i++){
      btns[i].index = i+1
      btns[i].onclick = function(){
        console.log(this.index)
      }
    }
  </script>
</body>
</html>

【案例：tab栏切换.html】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      * {
          margin: 0;
          padding: 0;
          list-style: none;
      }
  
      .box {
          width: 500px;
          height: 400px;
          border: 1px solid #000;
          margin: 100px auto;
      }
  
      .hd {
          overflow: hidden;
      }
  
      .hd li {
          width: 25%;
          height: 60px;
          float: left;
          background-color: pink;
          text-align: center;
          line-height: 60px;
          cursor: pointer;
          font-size: 24px;
      }
  
      .hd li.now {
          background-color: green;
      }
  
      .bd {
          width: 100%;
          height: 340px;
      }
  
      .bd div {
          width: 100%;
          height: 100%;
          display: none;
          line-height: 340px;
          text-align: center;
          font-size: 100px;
          background-color: #ccc;
      }
  
      .bd div.current {
          display: block;
      }
      </style>
  </head>
  <body>
    <div id="box" class="box">
        <!--导航区-->
        <ul class="hd" id="hd">
            <li class="now" index="0">导航1</li>
            <li index="1">导航2</li>
            <li index="2">导航3</li>
            <li index="3">导航4</li>
        </ul>
        <!--内容区-->
        <div class="bd" id="bd">
            <div class="current">内容1</div>
            <div>内容2</div>
            <div>内容3</div>
            <div>内容4</div>
        </div>
    </div>
    <script>
      var lis = document.querySelectorAll('.box #hd li')
      var divs = document.querySelectorAll('.box #bd div')
      for(var i =0 ; i < lis.length ; i++){
        lis[i].index = i
        lis[i].onclick = function(){
          for(var i =0 ; i < lis.length ; i++){
            lis[i].className = ''
            divs[i].className = ''
          }
          this.className = 'now'
          divs[this.index].className = 'current'
        }
      }
      
    </script>
</body>
</html>

【案例：开关灯案例】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button>关灯</button>
  <script>
    var btn = document.querySelector('button')
    btn.onclick = function(){
      if(btn.innerText == "关灯"){
        btn.innerText = "开灯"
        document.body.style.backgroundColor = '#000'
      }
      else{
        btn.innerText = "关灯"
        document.body.style.backgroundColor = '#fff'
      }
    }
  
  </script>
</body>
</html>

【案例：百度换肤】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      * {
          margin: 0px;
          padding: 0px;
      }
  
      body {
          background-image: url(images/1.jpg);
      }
  
      #mask {
          background-color: rgba(255, 255, 255, 0.3);
          height: 200px;
          text-align: center;
      }
  
      #mask img {
          width: 200px;
          margin-top: 35px;
          cursor: pointer;
      }
  </style>
</head>
<body>
    <div id="mask">
        <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>
  <script>
    var imgs = document.querySelectorAll('#mask img')
    for(var i =0 ; i < imgs.length ; i++){
      imgs[i].onclick = function(){
        var sr = this.src
        document.body.style.backgroundImage = 'url('+ this.src + ' ) '
      }
    }
  
  </script>
</body>
</html>

Joy Weijiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webapi练习三 ----- tab栏切换,百度换肤等

【案例：获取当前元素的索引.html】<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
复制链接

扫一扫