全栈组第二次任务笔记

全栈组徐金杰

已于 2024-01-24 13:25:35 修改

阅读量427

点赞数 10

文章标签：笔记

于 2024-01-24 13:24:59 首次发布

本文链接：https://blog.csdn.net/xxyxjj99/article/details/135819751

版权

计算器

HTML与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">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <title>Javascript Calculator</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
 
    body {
      margin: 0;
      box-sizing: border-box;
    }
 
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: aqua;
    }
 
    .calculator {
      background: yellow;
      border-radius: 5px;
      padding: 5px;
      width: 300px;
      min-width: 300px;
      box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.4),
                        4px 4px 10px rgba(0, 0, 0, 0.7);
    }
 
    .output {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      position: relative;
      background: #ffffff;
      min-height: 50px;
      padding: 5px;
      margin: 0 1px 10px;
      border-radius: 0.25rem;
      box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
    }
 
    .output pre {
      text-align: right;
      font-size: 25px;
      margin: 0;
      font-family: 'Orbitron', sans-serif;
      width: 288px;
      overflow-x: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
 
    .output pre::-webkit-scrollbar {
      display: none;
    }
 
    .output #upper {
      color: #424242;
      font-size: 18px;
    }
 
    .input {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
 
    .input button {
      width: calc(25% - 24px);
      height: 50px;
      margin: 8px 12px;
      border-radius: 50%;
      background-color: #c05d5d;
      box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3),
                        1px 1px 5px rgba(94, 31, 31, 0.7);
      color: white;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      outline: none;
      border: none;
    }
 
    .input button:hover {
      background-color: #b35555;
    }
 
    .input button:active {
      box-shadow: inset 1px 1px 5px rgba(94, 31, 31, 0.7),
                  inset -1px -1px 2px rgba(255, 255, 255, 0.3);
      color: #642929;
    }
  </style>
</head>
 
<body>
  <div class="container">
    <div class="calculator">
      <div class="output">
        <pre id="upper"></pre>
        <pre id="lower">0</pre>
      </div>
      <div class="input">
        <button onclick="pressAllClear()">AC</button>
        <button onclick="pressNum(this)">0</button>
        <button onclick="pressClear()"><i class="fas fa-backspace"></i></button>
        <button onclick="pressOperator(this)">+</button>
        <button onclick="pressNum(this)">1</button>
        <button onclick="pressNum(this)">2</button>
        <button onclick="pressNum(this)">3</button>
        <button onclick="pressOperator(this)">-</button>
        <button onclick="pressNum(this)">4</button>
        <button onclick="pressNum(this)">5</button>
        <button onclick="pressNum(this)">6</button>
        <button onclick="pressOperator(this)">&times;</button>
        <button onclick="pressNum(this)">7</button>
        <button onclick="pressNum(this)">8</button>
        <button onclick="pressNum(this)">9</button>
        <button onclick="pressOperator(this)">&div;</button>
        <button onclick="pressDot()">.</button>
        <button onclick="pressBracket(this)">(</button>
        <button onclick="pressBracket(this)">)</button>
        <button onclick="pressEqual()">=</button>
      </div>
    </div>
  </div>

JavaScript部分：

<script>
    // javascript calculator
 
    // upper output is for showing the expression
    let outputUpper = document.querySelector('#upper');
    // lower output is for showing the result
    let outputLower = document.querySelector('#lower');
 
    // function to get number input
    function pressNum(e) {
      if (outputLower.innerHTML === '0') {
        outputLower.innerHTML = e.innerHTML;
      } else {
        outputLower.innerHTML += e.innerHTML;
      }
    }
 
    // clear all
    function pressAllClear() {
      outputUpper.innerHTML = '';
      outputLower.innerHTML = '0';
    }
 
    // clear one
    function pressClear() {
      outputLower.innerHTML = outputLower.innerHTML.slice(0, -1);
    }
 
    // calculate button
    function pressEqual() {
      let exp = outputLower.innerHTML;
      outputUpper.innerHTML = exp;
      exp = exp.replace(/×/g, '*').replace(/÷/g, '/');
      let result;
      try {
        result = eval(exp);
        // if decimal number more than 4 decimal places
        if (result.toString().indexOf('.') !== -1) {
          result = result.toFixed(4);
        }
      } catch (e) {
        result = 'Error';
      }
      outputLower.innerHTML = result;
    }
 
    function pressOperator(e) {
      // check last operator
      let lastOperator = outputLower.innerHTML.slice(-1);
      if (lastOperator === '+' || lastOperator === '-' || lastOperator === '×' || lastOperator === '÷') {
        output.innerHTML = outputLower.innerHTML.slice(0, -1) + e.innerHTML;
      } else {
        outputLower.innerHTML += e.innerHTML;
      }
    }
 
    function pressDot() {
      outputLower.innerHTML += '.';
    }
 
    function pressBracket(e) {
      outputLower.innerHTML += e.innerHTML;
    }
 
    // attach keyboard event
    document.addEventListener('keydown', function (e) {
      switch (e.key) {
        case '0':
          pressNum(document.querySelector('button:nth-child(2)'));
          break;
        case '1':
          pressNum(document.querySelector('button:nth-child(5)'));
          break;
        case '2':
          pressNum(document.querySelector('button:nth-child(6)'));
          break;
        case '3':
          pressNum(document.querySelector('button:nth-child(7)'));
          break;
        case '4':
          pressNum(document.querySelector('button:nth-child(9)'));
          break;
        case '5':
          pressNum(document.querySelector('button:nth-child(10)'));
          break;
        case '6':
          pressNum(document.querySelector('button:nth-child(11)'));
          break;
        case '7':
          pressNum(document.querySelector('button:nth-child(13)'));
          break;
        case '8':
          pressNum(document.querySelector('button:nth-child(14)'));
          break;
        case '9':
          pressNum(document.querySelector('button:nth-child(15)'));
          break;
        case '+':
          pressOperator(document.querySelector('button:nth-child(4)'));
          break;
        case '-':
          pressOperator(document.querySelector('button:nth-child(8)'));
          break;
        case '*':
          pressOperator(document.querySelector('button:nth-child(12)'));
          break;
        case '/':
          pressOperator(document.querySelector('button:nth-child(16)'));
          break;
        case '.':
          pressDot();
          break;
        case '(':
          pressBracket(document.querySelector('button:nth-child(18)'));
          break;
        case ')':
          pressBracket(document.querySelector('button:nth-child(19)'));
          break;
        case 'Enter':
          // prevent default action
          e.preventDefault();
          pressEqual();
          break;
        case 'Backspace':
          pressClear();
          break;
        case 'Escape':
          pressAllClear();
          break;
      }
    });
  </script>

效果图如下：

网页时钟

HTML与CSS部分：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电子时钟</title>
  <!-- 定义样式 -->
  <style>
    body {
            background-image: url(壁纸.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
    .box {
      width: 300px;
      height: 150px;
      margin: 20px auto;
    }
 
    .oneDay {
      height: 100px;
      width: 100%;
      color: black;
      font-size: 60px;
      font-weight: 600;
      text-align: center;
      line-height: 100px;
    }
 
    .month {
      height: 50px;
      width: 100%;
      color: black;
      font-size: large;
      text-align: center;
      letter-spacing: 2px
    }
  </style>
</head>
 
<body>
  <div class="box"> <!-- 创建一个div容器，设置样式为.box -->
    <div class="oneDay"></div> <!-- 在盒子中创建一个div，设置样式为.oneDay -->
    <div class="month"></div> <!-- 在盒子中创建一个div，设置样式为.month -->
  </div>

JavaScript部分：

<script>
    const day = [ '一', '二', '三', '四', '五', '六','日'] // 定义一个数组day，包含了一周中每一天的汉字表示
    setInterval(function () { // 创建一个定时器
      const date = new Date() // 获取当前时间并存储在变量date中
      let nowHours = date.getHours() // 获取当前时间的小时数
      const nowMinutes = date.getMinutes() // 获取当前时间的分钟数
      let nowSecond = date.getSeconds() // 获取当前时间的秒数
      nowHours = nowHours < 10 ? '0' + nowHours : nowHours // 如果当前小时数小于10，则在前面添加0
      nowSecond = nowSecond < 10 ? '0' + nowSecond : nowSecond // 如果当前秒数小于10，则在前面添加0
      // 将当前时间显示在.oneDay的div容器中
      document.querySelector('.oneDay').innerHTML = `${nowHours}:${nowMinutes}:${nowSecond}`
    }, 1000) // 设置定时器的时间间隔为1000毫秒
 
    setInterval(function () { // 创建另一个定时器
      const date = new Date() // 获取当前时间并存储在变量date中
      const nowMonth = date.getMonth() // 获取当前月份
      const nowDate = date.getDate() // 获取当前日期
      const nowDay = date.getDay() // 获取当前星期几对应的数字
      // 将当前日期和星期几以及月份显示在.month的div容器中
      document.querySelector('.month').innerHTML = `${nowMonth + 1}月${nowDate}日&nbsp星期${day[nowDay-1]}`
    }, 1000) // 设置定时器的时间间隔为1000毫秒
  </script>

效果图如下：