查看: 320|回复: 0

网页界面设计一个简单的计算器

[复制链接]

4

主题

4

帖子

20

积分

新手上路

Rank: 1

积分
20
发表于 2021-11-14 16:03:20 | 显示全部楼层 |阅读模式
网页界面设计一个简单的计算器


在一个网页界面设计一个简单的计算器,可以实现简单的加减算法,加上幂次方和开方运算。


界面实现以后的网页为:
捕获.PNG
源代码为:

  1. <font color="purple"><!DOCTYPE html></font>
  2.        <html lang="en">
  3.       <head>
  4.            <meta charset="UTF-8">
  5.           <font color="cyan"><title>简易计算机</title></font>
  6.           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7.      </head>
  8.      <body>
  9.          <div id="app"  align="center"  >
  10.               <br>
  11.              <h1 ><span style="background:darkblue; ">简易计算机</span></h1>
  12.            <br>以下计算机可以实现数字进行的加减,幂次方以及开方运算
  13.            <hr>
  14.            <br>
  15.             <br>
  16.             <input type="text" v-model="n1">
  17.            <select v-model="opt">
  18.            <option value="+">+</option>
  19.            <option value="-">-</option>
  20.            <option value="^">^</option>
  21.            <option value="s">s</option>
  22.            <lect>
  23.                   <input type="text" v-model="n2">
  24.                    <input type="button" value="=" @click="calculator">

  25.                    <input type="text" v-model="result">
  26.               <br>
  27.                <br>
  28.                <br>
  29.                <h5 >
  30.                <span style="background: skyblue">+执行加法运算
  31.               <br> -执行减法运算
  32.              <br>  ^执行n1的幂次方运算
  33.              <br> s执行n1的开n2方运算
  34.            </span>
  35.              <h5>
  36.             </div>
  37. <script><!--自定义脚本文件-->
  38.   let vm = new Vue({
  39.      el: '#app',
  40.     data: {
  41.        n1: 0,
  42.        n2: 0,
  43.        opt: '-',
  44.        result: 0
  45.        },
  46.    methods: {
  47.        calculator() {
  48.      <!--选择语句,选择不同的字母时候执行不同的算法-->
  49.       switch (this.opt) {
  50.              case '+':
  51.               this.result = Number(this.n1) + Number(this.n2);
  52.                break;
  53.               case '-':
  54.                this.result = Number(this.n1) - Number(this.n2);
  55.               break;
  56.                case '^':
  57.                this.result = Math.pow(Number(this.n1),Number(this.n2));
  58.               break;
  59.               case 's':
  60.              this.result = Math.pow(Number(this.n1),1/Number(this.n2));
  61.              break;
  62.                   }
  63.             }
  64.       }
  65.     });
  66.    </script>
  67. </body>
  68. <html>
  69. <script>
  70.       (function() {
  71.               var ws = new WebSocket('ws://' + window.location.host + '/jb-server-page?                                               reloadServiceClientId=103');
  72.               ws.onmessage = function (msg) {
  73.                         if (msg.data === 'reload') {
  74.                                     window.location.reload();
  75.                          }
  76.                          if (msg.data.startsWith('update-css ')) {
  77.                                    var messageId = msg.data.substring(11);
  78.                                    var links = document.getElementsByTagName('link');
  79.                                      for (var i = 0; i < links.length; i++) {
  80.                                             var link = links[i];
  81.                                             if (link.rel !== 'stylesheet') continue;
  82.                                             var clonedLink = link.cloneNode(true);
  83.        var newHref = link.href.replace(/(&|\?)jbUpdateLinksId=\d+/, "$1jbUpdateLinksId=" + messageId);
  84.                                            if (newHref !== link.href) {
  85.                                                       clonedLink.href = newHref;
  86.                                                   }
  87.                                         else {
  88.                                                var indexOfQuest = newHref.indexOf('?');
  89.                                          if (indexOfQuest >= 0) {
  90.           // to support ?foo#hash
  91.     clonedLink.href = newHref.substring(0, indexOfQuest + 1) + 'jbUpdateLinksId=' + messageId + '&' +
  92.        newHref.substring(indexOfQuest + 1);
  93.                                    }
  94.                                     else {
  95.                                              clonedLink.href += '?' + 'jbUpdateLinksId=' + messageId;
  96.                                       }
  97.               }
  98.                  link.replaceWith(clonedLink);
  99.                 }
  100.           }
  101.     };
  102. })();
  103. </script>
复制代码





回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|风火轮WIKI|手机版|深圳风火轮团队 ( 粤ICP备17095099号

GMT+8, 2021-11-27 17:20 , Processed in 0.058395 second(s), 27 queries .

快速回复 返回顶部 返回列表
 
【客服1】 商务合作 15289193
【客服2】 业务洽谈 13257599
【客服3】 售前咨询 510313198
【邮箱】
smartfire@smartfire.cn