javascript程序设计基础答案 javascript编程基础案例

转载

daleiwang 2023-08-11 13:25:26

文章标签 javascript程序设计基础答案 css javascript html 前端 文章分类 JavaScript 前端开发

JavaScript 事件操作案例学习

还是JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）部分的内容，目前是从基础的JavaScript跳到了稍微复杂一点的DOM操作方面。

案例1，使用 JavaScript 隐藏或是显示密码

效果图如下：

点击图标前

javascript程序设计基础答案 javascript编程基础案例_javascript程序设计基础答案

点击图标后：

javascript程序设计基础答案 javascript编程基础案例_html_02

原理是在 onclick 事件修改 intpu 的 type，当 type="password" 时密码是隐藏的，当 type="text" 时密码是明文的。

<!DOCTYPE html>
	<html lang="en">
	  <head>
	    <meta charset="UTF-8" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	    <title>Document</title>
	    <style>
	      .box {
	        position: relative;
	        width: 400px;
	        border-bottom: 1px solid #ccc;
	        margin: 100px auto;
	      }
	      .box input {
	        width: 370px;
	        height: 30px;
	        border: 0;
	        outline: none;
	      }
	      .box img {
	        position: absolute;
	        top: 10px;
	        right: 0px;
	        width: 24px;
	      }
	    </style>
	  </head>
	  <body>
	    <div class="box">
	      <label for="">
	        <img src="./img/20200825202258596.gif" alt="" srcset="" id="eye" />
	      </label>
	      <input type="password" name="" id="pwd" />
	    </div>
	    <script>
	      // get elements
	      const eye = document.getElementById("eye");
	      const pwd = document.getElementById("pwd");
	      let isPassword = true;
	
	      // register event
	      eye.onclick = function () {
	        if (isPassword) {
	          pwd.type = "text";
	          eye.src = "./img/20200825202355781.gif";
	        } else {
	          pwd.type = "password";
	          eye.src = "./img/20200825202258596.gif";
	        }
	        isPassword = !isPassword;
	      };
	    </script>
	  </body>
	</html>

案例2，精灵图，sprites 的做法

效果图如下：

javascript程序设计基础答案 javascript编程基础案例_javascript_03

精灵图的原图看起来是这样的：

javascript程序设计基础答案 javascript编程基础案例_css_04

原理是通过使用 background-position 去对精灵图的位置进行修改，从而动态地渲染背景图片。

这张图的原点是左上角(0,0)，每个 icon 的长度都固定，因此只要在循环中选定要往下走多少个的移动单位即可，也因此y值是负值。

源码如下：

<!DOCTYPE html>
	<html lang="en">
	  <head>
	    <meta charset="UTF-8" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	    <title>Sprites 精灵图</title>
	    <style>
	      * {
	        list-style: none;
	        margin: 0;
	        padding: 0;
	      }
	      .box {
	        width: 250px;
	        margin: 100px auto;
	      }
	      .box li {
	        float: left;
	        width: 24px;
	        height: 24px;
	        margin: 15px;
	        background: url("./img/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png");
	      }
	    </style>
	  </head>
	  <body>
	    <div class="box">
	      <ul>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	        <li></li>
	      </ul>
	    </div>
	    <script>
	      // get elements
	      var li = document.querySelectorAll("li");
	      for (let i = 0; i < li.length; i++) {
	        li[i].style.backgroundPosition = `0 -${i * 44}px`;
	      }
	    </script>
	  </body>
	</html>

案例3，对输入进行判断

如：

javascript程序设计基础答案 javascript编程基础案例_javascript程序设计基础答案_05

javascript程序设计基础答案 javascript编程基础案例_前端_06

这个用 onchange, onblur 都可以做，视频中用的是 onblur，但是我觉得 onchange 会比较好一些。

在事件中判断输入的密码长度是否合乎标准，然后通过对类名进行操作，进行CSS的修改。

源码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 600px;
        margin: 100px auto;
      }
      .message {
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url("img/信息.png") no-repeat left center;
        background-size: contain;
        padding-left: 20px;
      }
      .error {
        color: red;
        background-image: url("img/错误.png");
      }
      .correct {
        color: green;
        background-image: url("./img/正确.png");
      }
    </style>
  </head>
  <body>
    <div class="register">
      <input type="text" class="ipt" />
      <p class="message">请输入6~16位密码</p>
    </div>
    <script>
      const ipt = document.querySelector(".ipt");
      const msg = document.querySelector(".message");
      // 1. 判断是否 onblur
      ipt.onblur = function () {
        // get value from input
        if (this.value.length > 16 || this.value.length < 6) {
          // 原本的写法：
          // msg.class = "error message";
          msg.classList.add("error");
        } else {
          msg.classList.remove("error");
          msg.classList.add("correct");
          msg.innerHTML = "密码格式正确";
        }
      };
    </script>
  </body>
</html>

案例4，排他思想

动态的使用循环注册事件，排他思想就是在当前时间发生前，现将循环体内的其他事件修改为默认值，如：

javascript程序设计基础答案 javascript编程基础案例_html_07

这个案例中一旦点击其他的按钮，背景颜色就会变，而之前选中的也会恢复到默认值。

源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      button {
        margin-right: 15px;
      }
    </style>
  </head>
  <body>
    <button>button 1</button><button>button 2</button><button>button 3</button
    ><button>button 4</button><button>button 5</button>
    <script>
      const btns = document.getElementsByTagName("button");
      for (let i = 0; i < btns.length; i++) {
        const btn = btns[i];
        btn.onclick = function () {
          for (let j = 0; j < btns.length; j++) {
            const btnToChange = btns[j];
            btnToChange.style.backgroundColor = "";
          }
          //   this.style.backgroundColor = "lightyellow";
          btn.style.backgroundColor = "lightyellow";
        };
      }
    </script>
  </body>
</html>