亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 26
粉絲 2
評論 0
訪問量 30285
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
vue實現(xiàn)簡易計算器
leverWang
原創(chuàng)
4154人瀏覽過

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="vue.js"></script>
  10.     <style>
  11.         * {
  12.             padding: 0;
  13.             margin: 0;
  14.         }
  16.         .item {
  17.             cursor: pointer;
  18.         }
  20.         .item:hover {
  21.             background: #ddd
  22.         }
  24.         .container_box {
  25.             display: grid;
  26.             grid-template-rows: 60px 60px 60px;
  27.             grid-template-columns: 60px 60px 60px;
  28.             float: left;
  29.         }
  31.         .container_box .item {
  32.             font-size: 24px;
  33.             text-align: center;
  34.             border: 1px solid #000;
  35.             line-height: 60px;
  36.             color: #333;
  37.         }
  39.         .btns {
  40.             display: grid;
  41.             grid-template-rows: 60px 60px 60px;
  42.         }
  44.         .btns .item {
  45.             font-size: 24px;
  46.             text-align: center;
  47.             border: 1px solid #000;
  48.             line-height: 60px;
  49.             color: #333;
  50.             width: 60px
  51.         }
  53.         .res {
  54.             width: 116px;
  55.             height: 30px;
  56.             border: 1px solid #000;
  57.             line-height: 30px;
  58.             text-align: center;
  59.             cursor: pointer;
  60.             cursor: pointer;
  61.             display: inline-block;
  62.             margin-top: 5px;
  63.         }
  65.         .res:hover {
  66.             background: #ddd
  67.         }
  69.         .sign {
  70.             margin-top: 20px;
  71.             font-size: 28px;
  72.             font-weight: bold;
  73.             padding: 15px;
  74.             color: rgb(0, 119, 167);
  76.         }
  78.     </style>
  79. </head>
  81. <body>
  82.     <div class="app">
  84.         <div class="container_box" @click="getValue">
  85.             <div class="item ">7</div>
  86.             <div class="item ">8</div>
  87.             <div class="item ">9</div>
  88.             <div class="item ">4</div>
  89.             <div class="item ">5</div>
  90.             <div class="item ">6</div>
  91.             <div class="item ">1</div>
  92.             <div class="item ">2</div>
  93.             <div class="item ">3</div>
  94.             <div class="item ">0</div>
  95.             <div class="item " style="width:120px">.</div>
  97.         </div>
  98.         <div class="btns" @click="getSign">
  99.             <div class="item ">+</div>
  100.             <div class="item ">-</div>
  101.             <div class="item ">*</div>
  102.             <div class="item ">/</div>
  103.         </div>
  104.         <div class="res" @click="init">重置</div>
  105.         <div class="res" @click="getRes">計算</div>
  107.         <div class="sign">
  108.             <span>{{num1}}</span>
  109.             <span>{{sign}}</span>
  110.             <span>{{num2}}</span>
  111.             <span>{{equal}}</span>
  112.             <span>{{res}}</span>
  113.         </div>
  115.     </div>
  117.     <script src="demo.js"></script>
  118. </body>
  120. </html>

js

  1. var vm = new Vue({
  2.   el: ".app",
  3.   data: {
  4.     num1: "",
  5.     num2: "",
  6.     sign: "",
  7.     res: "",
  8.     flag: true,
  9.     equal: "",
  10.   },
  11.   methods: {
  12.     //獲取數(shù)字
  13.     getValue(e) {
  14.       if (this.flag == true) {
  15.         this.num1 += e.target.innerText;
  16.       }
  17.       if (this.flag == false) {
  18.         this.num2 += e.target.innerText;
  19.       }
  20.     },
  21.     //獲取運算符
  22.     getSign(e) {
  23.       this.flag = false;
  24.       this.sign = e.target.innerText;
  25.     },
  26.     //計算
  27.     getRes() {
  28.       this.equal = "=";
  29.       switch (this.sign) {
  30.         case "+":
  31.           this.res = this.num1 * 1 + this.num2 * 1;
  32.           break;
  33.         case "-":
  34.           this.res = this.num1 - this.num2;
  35.           break;
  36.         case "*":
  37.           this.res = this.num1 * this.num2;
  38.           break;
  39.         case "/":
  40.           this.res = this.num1 / this.num2;
  41.           break;
  42.         default:
  43.           this.res = "未識別的運算符";
  44.           break;
  45.       }
  46.     },
  47.     init() {
  48.       this.flag = true;
  49.       this.num1 = "";
  50.       this.num2 = "";
  51.       this.sign = "";
  52.       this.res = "";
  53.       this.equal = "";
  54.     },
  55.   },
  56. });

效果

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：創(chuàng)建極棒, 挺你
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
2條評論
P粉075367495 2022-12-09 11:04:21
你是不是漏了個js沒上傳？
2樓
十二 2021-12-15 11:34:21
flag的作用是什么？
1樓
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學