第二次JS考核总结

最新推荐文章于 2024-08-09 21:30:00 发布

橙柒1

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量51

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_73638967/article/details/130546617

版权

总结

获取元素的方法

document.getElementById()
document.querySelector()
document.querySelectorAll()
document.getElementsByTagName()
document.getElementsByClassName()

事件对象的属性

事件对象(Event Object)具有以下常用属性:

type: 返回事件类型的字符串表示。
ClientX:相对于浏览器窗口的距离
ClientY:相对于浏览器窗口的距离
offsetX:对于事件源元素的内边距左侧的偏移量
offsetY:对于事件源元素的内边距右侧的偏移量
TagName: 触发事件的元素的名字
target: 返回触发事件的元素。
currentTarget: 返回当前正在处理事件的元素，通常是绑定了事件处理程序的元素。
bubbles: 返回布尔值，指示事件是否冒泡。
cancelable: 返回布尔值，指示事件是否可以取消。
preventDefault(): 阻止事件的默认行为。
stopPropagation(): 阻止事件传播到其他元素。
stopImmediatePropagation(): 立即停止事件传播并执行其他注册的事件处理程序。
eventPhase: 返回一个整数，指示事件处理程序所处的阶段，是捕获阶段(1)、目标阶段(2)还是冒泡阶段(3)。
timeStamp: 返回从 1970 年 1 月 1 日到事件被创建时的毫秒数。
keyCode: 返回与按下的键相关的键码。
clientX 和 clientY: 返回鼠标事件的坐标，相对于浏览器窗口的左上角。
pageX 和 pageY: 返回鼠标事件的坐标，相对于文档的左上角。
altKey, ctrlKey, shiftKey: 返回按下了哪些修饰键。
which: 返回与按下的键相关的Unicode字符代码或枚举值。
relatedTarget: 返回与当前事件相关的元素，在 mouseover 和 mouseout 事件中使用。
注意: 不同类型的事件可能会有不同的属性。

创建一个新节点

document.createElement() 方法来创建一个新的 HTML 元素节点

简单计算器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>简单计算器</title>4444
   <style>
    body {
        background-color: #f2f2f2;
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    .calculator {
        width: 300px;
        margin: auto;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        background-color: #fff;
    }
    .display {
        height: 70px;
        padding: 10px;
        background-color: #e6e6e6;
        text-align: right;
    }
    .display .result {
        font-size: 24px;
        margin: 0;
    }
    .input button {
        border: none;
        background-color: #f2f2f2;
        font-size: 18px;
        color: #333;
        float: left;
        cursor: pointer;
        width: 25%;
        padding: 20px;
        margin: 0;
    }
    .input button:hover {
        background-color: #c9c9c9;
    }
    .input button:active {
        background-color: #bfbfbf;
    }
    .input button:nth-child(1) {
        background-color: #9a9a9a;
        color: #fff;
    }
    .input button:nth-child(2) {
        background-color: #9a9a9a;
        color: #fff;
    }
    .input button:nth-child(3) {
        background-color: #9a9a9a;
        color: #fff;
    }
    .input button:nth-child(4) {
        background-color: #ff8c00;
        color: #fff;
    }
    .input button:nth-child(19) {
        background-color: #fff;
        color: #333;
    }
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
   </style>
</head>
<body>
  <div class="calculator">
    <div class="display">
      <p class="result">0</p>
    </div>
    <div class="input">
      <button onclick="clearResult()">C</button>
      <button onclick="backspace()">&larr;</button>
      <button onclick="appendSymbol('%')">%</button>
      <button onclick="appendSymbol('/')">÷</button>
      <button onclick="appendNumber('7')">7</button>
      <button onclick="appendNumber('8')">8</button>
      <button onclick="appendNumber('9')">9</button>
      <button onclick="appendSymbol('*')">x</button>
      <button onclick="appendNumber('4')">4</button>
      <button onclick="appendNumber('5')">5</button>
      <button onclick="appendNumber('6')">6</button>
      <button onclick="appendSymbol('-')">-</button>
      <button onclick="appendNumber('1')">1</button>
      <button onclick="appendNumber('2')">2</button>
      <button onclick="appendNumber('3')">3</button>
      <button onclick="appendSymbol('+')">+</button>
      <button onclick="appendNumber('0')">0</button>
      <button onclick="appendSymbol('.')">.</button>
      <button onclick="calculateResult()">=</button>
    </div>
  </div>
  <script>
    // 初始化结果为“0”
    let result = '0';

    // 添加数字
    function appendNumber(num) {
        if (result === '0') {
            // 如果结果是“0”，则替换为当前数字
            result = num;
        } else {
            // 否则将当前数字添加到结果末尾
            result += num;
        }
        // 更新显示屏
        updateDisplay();
    }

    // 添加符号
    function appendSymbol(symbol) {
        if (symbol === '.' && result.indexOf('.') !== -1) {
            // 如果要添加的是小数点，且结果中已经存在小数点，则不添加
            return;
        }
        // 否则将符号添加到结果末尾
        result += symbol;
        // 更新显示屏
        updateDisplay();
    }

    // 清零操作
    function clearResult() {
        result = '0';
        // 更新显示屏
        updateDisplay();
    }

    // 退格操作
    function backspace() {
        result = result.slice(0, -1);
        if (result === '') {
            // 如果结果为空，则置为“0”
            result = '0';
        }
        // 更新显示屏
        updateDisplay();
    }

    // 计算结果
    function calculateResult() {
        try {
            // 使用eval函数计算结果
            result = eval(result).toString();
        } catch (e) {
            // 如果有错误，则结果为“Error”
            result = 'Error';
        }
        // 更新显示屏
        updateDisplay();
    }

    // 更新显示屏
    function updateDisplay() {
        const display = document.querySelector('.result');
        // 将结果显示在显示屏上
        display.textContent = result;
    }

    // 等待页面加载完成后执行初始化操作
    window.addEventListener('DOMContentLoaded', () => {
        // 更新显示屏
        updateDisplay();
    });

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

请添加图片描述

案例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>手机号输入框</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      margin: 0;
      padding: 0;
    }
    
    .container {
      width: 500px;
      margin: auto;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
      text-align: center;
    }

    input[type="text"] {
      width: 300px;
      padding: 10px;
      border: none;
      border-bottom: 2px solid #ccc;
      font-size: 18px;
      margin-bottom: 30px;
      outline: none;
    }

    input[type="text"]:focus {
      border-color: #08a4ff;
    }

    .count {
      font-size: 18px;
      color: #666;
      margin-bottom: 20px;
    }

    .feedback {
      font-size: 14px;
      color: red;
      margin-bottom: 30px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }

    td {
      vertical-align: top;
    }

    .btn {
      padding: 10px;
      background-color: #08a4ff;
      border: none;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
    }

    .btn:hover {
      background-color: #0077ff;
    }

    .btn:active {
      background-color: #0052cc;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>手机号输入框</h2>
    <input type="text" placeholder="提示输入手机号" id="phone-input">
    <p class="count">已输入 <span id="phone-count">0</span> 位数字</p>
    <p class="feedback" id="phone-feedback">检查手机号格式</p>
    <button class="btn" id="add-btn">添加</button>
    <table>
      <tr>
        <th>序号</th>
        <th>手机号码</th>
      </tr>
    </table>
  </div>
  <script>
    const phoneInput = document.getElementById('phone-input');
    const phoneCount = document.getElementById('phone-count');
    const phoneFeedback = document.getElementById('phone-feedback');
    const addBtn = document.getElementById('add-btn');
    const table = document.querySelector('table');

    let count = 0;

// 输入框获得焦点时清空默认提示文本
phoneInput.addEventListener('focus', function(){
  if (phoneInput.value === '提示输入手机号') {
    phoneInput.value = '';
  }
});

// 输入框失去焦点时检查手机号格式
phoneInput.addEventListener('blur', function() {
  const phoneRegex = /^[0-9]{11}$/; // 其中，/^...$/ 表示该正则表达式适用于整个输入字符串；[0-9] 表示匹配数字 0 到 9；{11} 表示匹配前面的内容恰好11次。
  if (phoneInput.value === '') {
    phoneFeedback.textContent = '手机号不能为空';
    phoneFeedback.style.display = 'block';
  } else if (!phoneRegex.test(phoneInput.value)) {  // 判断手机格式的正确性
    phoneFeedback.textContent = '手机号格式不正确';
    phoneFeedback.style.display = 'block';
  } else {
    phoneFeedback.style.display = 'none';
  }
});

// 按下键盘 enter 键时将手机号添加到表格中
phoneInput.addEventListener('keyup', function(e) {
  if (e.key === 'Enter') {
    addPhone();
  }
});

// 点击添加按钮时将手机号添加到表格中
addBtn.addEventListener('click',addPhone);

// 添加手机号到表格中
function addPhone() {
  if (phoneFeedback.style.display === 'none') {
    count++;
    const tr = document.createElement('tr');
    const td1 = document.createElement('td');
    const td2 = document.createElement('td');
    td1.textContent = count;
    td2.textContent = phoneInput.value;
    tr.appendChild(td1);
    tr.appendChild(td2);
    table.appendChild(tr);
    phoneInput.value = '';
    phoneCount.textContent = '0';
  } else {
    phoneInput.focus();
  }
}

// 实时更新输入数字的数量
phoneInput.addEventListener('input', function() {
  phoneCount.textContent = phoneInput.value.length;
});
  </script>
</body>

</html>