webAPI 第一天的相关习题

习题是提升的根本,可以将自己的知识更好地巩固

第一天的课程总共有11道练习题,我们一一填写

1.点击按钮，切换图片

2. 点击按钮，修改图片的宽高 -- width、height属性

3. 点击按钮，修改div的样式 -- 预定义类名

4. 点击按钮，div进行显示和隐藏（两个按钮） -- 预定义类名

5. 点击按钮，div进行显示和隐藏（一个按钮） -- 预定义类名 + innerText属性

6. 点击按钮，循环切换图片 -- src属性

7.点击按钮修改p标签的内容 -- innerText属性

8点击按钮，同时修改多个p标签的内容

9. 给多个按钮注册点击事件

10. 隔行变色

11. 给多个按钮注册点击事件，点击的那个变成红色

1.点击按钮，切换图片

<!DOCTYPE html>
<html >
<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 id="but">点击切换图片</button>
  <img id="tu" src="imgs/1.jpg" alt="图片1" title="这是图片1">

  <script>
    // 点击按钮，切换图片
    var but = document.getElementById("but");
    var tu = document.getElementById("tu");

    but.onclick = function(){
      tu.src = "imgs/2.jpg";
      tu.title = "这是图片2";
    }
  </script>
</body>
</html>

2. 点击按钮，修改图片的宽高 -- width、height属性

<!DOCTYPE html>
<html >
<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 id="but">点击切换图片宽高</button>
    <br>
    <img id="tu" width="400" height="500" src="imgs/1.jpg" alt="图片1" title="这是图片1">
  <script>
    //1. 点击按钮，修改图片的宽高 -- width、height属性
    var but = document.getElementById("but");
    var tu = document.getElementById("tu");

    but.onclick = function(){
      tu.width = "200";
      tu.height = "250";
    }
  
  </script>
</body>
</html>

3. 点击按钮，修改div的样式 -- 预定义类名

<!DOCTYPE html>
<html >
<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>
    div{
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .d{
      width: 100px;
      height: 100px;;background-color: red;
    }
  </style>
</head>
<body>
  <button id="but">按钮</button>
  <div id="d">我是一个盒子</div>

  <script>
  //2. 点击按钮，修改div的样式 -- 预定义类名
    var but = document.getElementById("but");
    var d = document.getElementById('d');

    but.onclick = function(){
      d.className = "d";
    }
  
  </script>
</body>
</html>

4. 点击按钮，div进行显示和隐藏（两个按钮） -- 预定义类名

<!DOCTYPE html>
<html >
<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>
    .xian{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .yin{
      display: block;
    }
  </style>
</head>
<body>
  <button id="but1">显示</button>
  <button id="but2">隐藏</button>
  <div id="d"></div>
  <script>
  //3. 点击按钮，div进行显示和隐藏（两个按钮） -- 预定义类名
  var but1 = document.getElementById("but1");
  var but2 = document.getElementById("but2");
  var d = document.getElementById("d");

  but1.onclick = function(){
    d.className = "xian";
  }
  but2.onclick = function(){
    d.className = "yin";
  }
  
  </script>
</body>
</html>

5. 点击按钮，div进行显示和隐藏（一个按钮） -- 预定义类名 + innerText属性

<!DOCTYPE html>
<html >
<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>
    div{
      width: 200px;
      height: 200px;
      background-color: pink;
      display: none;
    }
    .show{
      display: block;
    }
  
  </style>
</head>
<body>
  <button id="but">显示</button>
  <div id="d"></div>
  <script>
    //4. 点击按钮，div进行显示和隐藏（一个按钮） -- 预定义类名 + innerText属性
    var but = document.getElementById("but");
    var d = document.getElementById("d");

    but.onclick = function(){
      if(but.innerText == "显示"){
        d.className = "show";
        but.innerText = "隐藏";
      }else{
        d.className = "";
        but.innerText = " 显示 ";
      }
    }

  
  </script>
</body>
</html>

6. 点击按钮，循环切换图片 -- src属性

<!DOCTYPE html>
<html >
<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 id="but">切换</button>
  <br>
  <img id="tu" src="imgs/1.jpg" alt="">
  <script>
    var but = document.getElementById("but");
    var tu = document.getElementById("tu");
    var i = 0;
    var arr = ["imgs/1.jpg",'imgs/01.jpg',"imgs/2.jpg","imgs/02.jpg"];
    but.onclick = function(){
        i++;
        if(i == 4){
          i = 0;
        }
        tu.src = arr[i];
    }
  
  </script>
  
</body>
</html>

7.点击按钮修改p标签的内容 -- innerText属性

<!DOCTYPE html>
<html >
<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 id="but">点击更换</button>
  <p id="prc">我是P标签</p>
  <script>
    // 1. 点击按钮修改p标签的内容  -- innerText属性
    var but = document.getElementById("but");
    var prc = document.getElementById("prc");

    but.onclick = function(){
      prc.innerText = "更改后的P";
    }

  </script>
</body>
</html>

8点击按钮，同时修改多个p标签的内容

<!DOCTYPE html>
<html >
<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 id="but">更改</button>
  <p>我是p标签</p>
  <p>我是p标签</p>
  <p>我是p标签</p>
  <p>我是p标签</p>
  <p>我是p标签</p>
  <p>我是p标签</p>
  <script>
    //1. 点击按钮，同时修改多个p标签的内容
    var but = document.getElementById("but");
    // 这是数组
    var ps = document.getElementsByTagName("p");
    but.onclick = function(){
      for(var i = 0 ; i < ps.length ;i++){
        ps[i].innerText = "更改";
      }
    }
  
  </script>
</body>
</html>

9. 给多个按钮注册点击事件

<!DOCTYPE html>
<html >
<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>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <script>
    //2. 给多个按钮注册点击事件
    var buts = document.getElementsByTagName("button");
    for(var i= 0; i < buts.length;i++){
      buts[i].onclick = function(){
        alert("哈哈");
      }
    }
  </script>
</body>
</html>

10. 隔行变色

<!DOCTYPE html>
<html >
<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>
    .red{
      background-color: red;
    }
    .green{
      background-color: green;
    }
  </style>
</head>
<body>
  <p>我是P标签</p>
  <p>我是P标签</p>
  <p>我是P标签</p>
  <p>我是P标签</p>
  <p>我是P标签</p>
  <p>我是P标签</p>
  <p>我是P标签</p>
  <p>我是P标签</p>
  <p>我是P标签</p>
  <p>我是P标签</p>
  <script>
  //3. 隔行变色
  var ps = document.getElementsByTagName("p");
  for(var i = 0 ; i <ps.length ;i++){
    if(i%2==0){
      ps[i].className = "red";
    }else{
      ps[i].className = "green";
    }
    
  }
  
  </script>
</body>
</html>

11. 给多个按钮注册点击事件，点击的那个变成红色

<!DOCTYPE html>
<html >
<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>
<style>
  .bg{
    background-color: pink;
  }
</style>
<body>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <script>
  //1. 给多个按钮注册点击事件，点击的那个变成红色
  var buts = document.getElementsByTagName("button");
  for(var i = 0 ;i<buts.length ; i++){
    buts[i].onclick = function(){
      // 指向当前的按钮
      this.className = "bg";
    }
  }


  </script>
</body>
</html>

webAPI 第一天的相关习题

继续阅读

二叉搜索树得后序遍历序列(java)

计算1/1-1/2+1/3-1/4+1/5 …… + 1/99 - 1/100 的值

链表问题（1）

hdu 2015 java 偶数求和

求100到200间的素数

二进制求和-LeetCode（Java实现）

Java，求整数各个位上的数值（常用）

机动车号牌查询，在线查询, api 查询

Spring - 5 Spring框架整合JUnit单元测试

《黑马程序员》 TreeSet集合练习之按照字符串长度排序

练习 - 宠物市场

数组查表法(根据键盘录入索引,查找对应星期)///a=23在数组中的位置习题描述

UFLDL练习(Sparse Autoencoder)

PHP所有水仙花数

Yandex.Algorithm Online Round 3 Sunday, June 15, 2014

集合练习题1

webAPI 第一天 的相关习题

继续阅读

webAPI 第一天的相关习题